富文本编辑器

src/utils/model/prosemirror/index.vue

@@ -1,27 +1,69 @@
 <template>
-    <editor-content :editor="editor" />
+  <Editor  ref="editor"></Editor>
 </template>
-  
-  <script>
-  // Import the editor
-  import { Editor, EditorContent } from 'tiptap'
-  
-  export default {
-    components: {
-      EditorContent,
+
+<script>
+import Editor from 'vue-prosemirror-editor'
+import { menu  } from 'prosemirror-menu';  
+import 'prosemirror-menu/style/menu.css'; // 导入菜单样式  
+export default {
+  components: {
+    Editor
+  },
+  props: {},
+  data() {
+    return {
+      editor:null
+    };
+  },
+  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 等  
+      ] 
     },
-    data() {
-      return {
-        editor: null,
-      }
+    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);  
     },
-    mounted() {
-      this.editor = new Editor({
-        content: '<p>This is just a boring paragraph</p>',
-      })
+    didCreate(val){
+      this.editor = val
+      var state = this.editor.state
+      var view = this.editor.view
+      console.log(MenuItem)
+      const menu = new MenuItem({  
+        state,  
+        view,  
+        // ... 其他配置选项  
+      });  
+      console.log(view) 
+      this.editor.view.someProp =  menu
     },
-    beforeDestroy() {
-      this.editor.destroy()
+    bold(){
+      const { view, state, tr } = this.editor;  
+      tr.toggleMark(state.schema.marks.bold);  
+      view.dispatch(tr);  
     },
-  }
-  </script>
+    italic(){}
+  },
+};
+</script>
+<style lang="scss" scoped>
+</style>