prosemirror富文本编辑器示例代码-html代码-BFW代码库

prosemirror富文本编辑器示例代码

代码语言：html

所属分类：其他

代码描述：prosemirror富文本编辑器示例代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />

    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/prosemirror.editor.css">
            <style>
            .ProseMirror { padding: 2px 20px; min-height: 180px; outline: none; }
              p.callout {
                padding: 0 20px 0 15px;
                font-weight: 600;
              }
        </style>
</head>

<body>
    <div id=editor></div>
 


        <div id="content" style="display: none">
            <p>就像这样一样！</p>
            <p>在这个地方尝试输入内容，或者到 <a href="examples">examples</a>查看更多示例！</p>
        </div>
<button id="getcontentbtn">获取内容</button>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/prosemirror.js"></script>
        <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/markdown-it.min.js"></script>
        <script>
            (function (prosemirrorState, prosemirrorView, prosemirrorModel, prosemirrorSchemaBasic, prosemirrorSchemaList, prosemirrorExampleSetup) {
              'use strict';
            
              // code{
            
              // 将 prosemirror-schema-list 和基本 schema 放在一起形成一个支持 list 的 schema
              var mySchema = new prosemirrorModel.Schema({
                nodes: prosemirrorSchemaList.addListNodes(prosemirrorSchemaBasic.schema.spec.nodes, "paragraph block*", "block"),
                marks: prosemirrorSchemaBasic.schema.spec.marks
              });
            
              window.view = new prosemirrorView.EditorView(document.querySelector("#editor"), {
                state: prosemirrorState.EditorState.create({
                  doc: prosemirrorModel.DOMParser.fromSchema(mySchema).parse(document.querySelector("#content")),
                  plugins: prosemirrorExampleSetup.exampleSetup({schema: mySchema})
                })
              });
              
      // 添加到之前的代码中

// ...你的代码...

// 在编辑器的末尾追加内容的函数
function appendContentToEditor(content) {
  const view = window.view; // 假设 window.view 是你的 EditorView 实例
  const state = view.state; // 当前编辑器的状态
  const { tr } = state; // 创建.........完整代码请登录后点击上方下载按钮下载查看