富文本编辑器

src/utils/model/prosemirror/index.vue

@@ -1,57 +1,76 @@
 <template>
-  <Editor @didCreate="didCreate"  ref="editor"></Editor>
+  <div class="myEditor">
+    <slot name="header"> </slot>
+    <div ref="editor"></div>
+    <slot name="footer"> </slot>
+    </div>
 </template>
 
 <script>
-import Editor from 'vue-prosemirror-editor'
-import { common } from './menu.js'
+import {EditorState} from "prosemirror-state"
+import {EditorView} from "prosemirror-view"
+import {Schema, DOMParser} from "prosemirror-model"
+import {schema} from "prosemirror-schema-basic"
+import {addListNodes} from "prosemirror-schema-list"
+import {exampleSetup} from "prosemirror-example-setup"
+import 'prosemirror-menu/style/menu.css'
+import 'prosemirror-example-setup/style/style.css'
+import 'prosemirror-view/style/prosemirror.css'
 export default {
-  components: {
-    Editor
-  },
-  mixins:[common],
+  components: {},
   props: {},
   data() {
     return {
-      editor:null
+        editor:{
+
+        }
     };
   },
   watch: {},
   computed: {},
   created() {},
   mounted() {
-  //  this.init()
+    this.init()
   },
   methods: {
     init(){
-      const myMenuItems = [  
-          { key: 'bold', run: (state, dispatch, view) => this.toggleMark(state, dispatch, 'strong') },  
-          // ... 添加其他菜单项，比如 italic, underline 等  
-        ];
-      this.plugins= [  
-        menu({  
-          content: myMenuItems, // 将你的菜单项传递给 menu 插件  
-          // 其他 menu 插件配置选项...  
-        }),  
-        // ... 其他插件，比如 keymap, inputRules 等  
-      ] 
-    },
-    toggleMark(state, dispatch, markType) {  
-      const { tr } = state;  
-      const { selection } = tr;  
-      tr.setMeta('addToHistory', false);  
-      tr.addMark(selection, markType.create()).setMeta('addToHistory', true);  
-      return dispatch(tr);  
-    },
-   
-    bold(){
-      const { view, state, tr } = this.editor;  
-      tr.toggleMark(state.schema.marks.bold);  
-      view.dispatch(tr);  
-    },
-    italic(){}
+        const mySchema = new Schema({
+            nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
+            marks: schema.spec.marks
+        })
+
+        this.editor.view = new EditorView(this.$refs.editor, {
+        state: EditorState.create({
+            doc: DOMParser.fromSchema(mySchema).parse(this.$refs.editor),
+            plugins: exampleSetup({schema: mySchema})
+        })
+        })
+    }
   },
 };
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
+.myEditor{
+//     .ProseMirror-menubar-wrapper{
+//         height: 50px !important;
+//         .ProseMirror-menubar{
+//             display: flex;
+//             align-items: center;
+//             min-height: 50px !important;
+//             height: 100%;
+//             .ProseMirror-menuitem{
+//                 width:auto;
+//                 padding: 10px;
+//             }
+//         }
+//     }
+    .ProseMirror-menubar{
+        border:1px solid var(--bg);
+        border-bottom:none;
+    }
+    .ProseMirror{
+        outline: #dcdfe6;
+        border:1px solid var(--bg);
+    }
+}
 </style>

src/utils/model/prosemirror/index1.vue

@@ -0,0 +1,58 @@
+<template>
+  <Editor @didCreate="didCreate" :editorProps="plugins"  ref="editor"></Editor>
+</template>
+
+<script>
+import Editor from 'vue-prosemirror-editor'
+import { common } from './menu.js'
+export default {
+  components: {
+    Editor
+  },
+  mixins:[common],
+  props: {},
+  data() {
+    return {
+      editor:null,
+      plugins:{}
+    };
+  },
+  watch: {},
+  computed: {},
+  created() {},
+  mounted() {
+  //  this.init()
+  },
+  methods: {
+    init(){
+      const myMenuItems = [  
+          { key: 'bold', run: (state, dispatch, view) => this.toggleMark(state, dispatch, 'strong') },  
+          // ... 添加其他菜单项，比如 italic, underline 等  
+        ];
+      this.plugins= [  
+        menu({  
+          content: myMenuItems, // 将你的菜单项传递给 menu 插件  
+          // 其他 menu 插件配置选项...  
+        }),  
+        // ... 其他插件，比如 keymap, inputRules 等  
+      ] 
+    },
+    toggleMark(state, dispatch, markType) {  
+      const { tr } = state;  
+      const { selection } = tr;  
+      tr.setMeta('addToHistory', false);  
+      tr.addMark(selection, markType.create()).setMeta('addToHistory', true);  
+      return dispatch(tr);  
+    },
+   
+    bold(){
+      const { view, state, tr } = this.editor;  
+      tr.toggleMark(state.schema.marks.bold);  
+      view.dispatch(tr);  
+    },
+    italic(){}
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>

src/utils/model/prosemirror/menu.js

@@ -61,14 +61,16 @@ export function icon(text, name) {
   export const common = {
     methods:{
         didCreate(val){
+          console.log(val)
             this.editor = val
-            let menu = menuPlugin([
+            this.plugins = menuPlugin([
             {command: toggleMark(schema.marks.strong), dom: icon("B", "strong")},
             {command: toggleMark(schema.marks.em), dom: icon("i", "em")},
             {command: setBlockType(schema.nodes.paragraph), dom: icon("p", "paragraph")},
             heading(1), heading(2), heading(3),
             {command: wrapIn(schema.nodes.blockquote), dom: icon(">", "blockquote")}
             ])
+            console.log(this.plugins)
         },
     }