富文本编辑器

src/utils/model/prosemirror/index.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import {EditorState} from "prosemirror-state"
+import {EditorState,basicSetup } from "prosemirror-state"
 import {EditorView} from "prosemirror-view"
 import {Schema, DOMParser} from "prosemirror-model"
 import {schema} from "prosemirror-schema-basic"
@@ -18,15 +18,54 @@ import 'prosemirror-example-setup/style/style.css'
 import 'prosemirror-view/style/prosemirror.css'
 export default {
   components: {},
-  props: {},
+  props: {
+    value:{
+
+    }
+  },
   data() {
     return {
         editor:{
 
+        },
+        content:{
+            "type": "doc",
+            "content": [
+                {
+                    "type": "paragraph",
+                    "content": [
+                        {
+                            "type": "text",
+                            "text": "fdfcvds"
+                        },
+                        {
+                            "type": "text",
+                            "marks": [
+                                {
+                                    "type": "strong"
+                                }
+                            ],
+                            "text": "fdsc"
+                        },
+                        {
+                            "type": "text",
+                            "text": "dcvd"
+                        }
+                    ]
+                }
+            ]
         }
     };
   },
-  watch: {},
+  watch: {
+    value(newVal) {  
+        this.content = newVal
+      if (this.editor.view) {  
+        const newState = this.editor.view.state.apply(this.editor.view.state.tr.setDoc(schema.nodeFromJSON(newVal)));  
+        this.editor.view.updateState(newState);  
+      }  
+    },  
+  },
   computed: {},
   created() {},
   mounted() {
@@ -38,14 +77,48 @@ export default {
             nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
             marks: schema.spec.marks
         })
-
+        // this.editor.state = EditorState.create({  
+        //     schema,  
+        //     plugins: basicSetup,  
+        //     doc: schema.nodeFromJSON(this.content), // 使用Vue数据初始化文档  
+        // });  
+        var that = this
         this.editor.view = new EditorView(this.$refs.editor, {
-        state: EditorState.create({
-            doc: DOMParser.fromSchema(mySchema).parse(this.$refs.editor),
-            plugins: exampleSetup({schema: mySchema})
-        })
+            state: EditorState.create({
+                mySchema,
+                doc: this.getInitialDoc (mySchema),
+                plugins: exampleSetup({schema: mySchema})
+            }),
+            parent: this.$refs.editor, 
+            dispatchTransaction(transaction) {
+                let newState = that.editor.view.state.apply(transaction)
+                console.log(newState.doc.toJSON())
+                that.editor.view.updateState(newState)
+            }
         })
-    }
+          // 设置监听器以更新Vue数据  
+        // this.editor.view.on('transaction', (transaction, oldState) => {  
+        //     if (transaction.docChanged) {  
+        //         this.content = transaction.doc.toJSON(); // 更新Vue数据属性  
+        //         this.$emit('input',this.content)
+        //         console.log(this.content)
+        //     }  
+        // });
+    },
+    getInitialDoc (schema) {
+      if (this.content){
+        return schema.nodeFromJSON(this.content)
+      }else {
+        return DOMParser.fromSchema(schema).parse(this.$refs.editor)
+      }
+    },
+  },
+  beforeDestroy() {  
+    // 清理编辑器视图和相关资源  
+    if (this.editor.view) {  
+        this.editor.view.destroy();  
+        this.editor = {};  
+    }  
   },
 };
 </script>

src/utils/model/route.vue

@@ -12,7 +12,7 @@
     <!-- <div @mouseup="up">
       gsdtuicsahcviodkfvdf
     </div> -->
-    <prosemirror></prosemirror>
+    <prosemirror v-model="content"></prosemirror>
   </div>
 </template>
 
@@ -35,7 +35,8 @@ export default {
   props: {},
   data() {
     return {
-      show:true
+      show:true,
+      content:''
     };
   },
   watch: {},