富文本编辑器

src/utils/model/prosemirror/index.js

@@ -0,0 +1,70 @@
+
+  
+// 定义 MenuView 类  
+class MenuView {  
+  constructor(label, action) {  
+    this.label = label;  
+    this.action = action;  
+  }  
+  
+  render() {  
+    const button = document.createElement('button');  
+    button.textContent = this.label;  
+    button.addEventListener('click', this.action);  
+    return button;  
+  }  
+}  
+  
+// 定义 MenuBarView 类  
+class MenuBarView {  
+  constructor(editorView) {  
+    this.editorView = editorView;  
+    this.dom = null;  
+    this.menuItems = [];  
+  }  
+  
+  addMenuItem(menuItem) {  
+    this.menuItems.push(menuItem);  
+    if (this.dom) {  
+      this.render(); // 如果 DOM 已经存在，重新渲染  
+    }  
+  }  
+  
+  render() {  
+    if (this.dom) {  
+      this.dom.innerHTML = ''; // 清空现有的菜单项  
+    } else {  
+      this.dom = document.createElement('div');  
+      this.dom.classList.add('menu-bar');  
+      this.editorView.dom.parentNode.insertBefore(this.dom, this.editorView.dom);  
+    }  
+  
+    for (const menuItem of this.menuItems) {  
+      this.dom.appendChild(menuItem.render());  
+    }  
+  }  
+}  
+  
+
+  
+// 创建一个切换粗体的函数  
+function toggleBold(editorView,type) {  
+  const { tr } = editorView.state;  
+  tr.setMeta(type, !tr.getMeta(type)); // 切换粗体状态  
+  editorView.dispatch(tr);  
+}  
+
+
+export function addMenu(editorView){
+    // 创建 MenuBarView 实例  
+    const menuBarView = new MenuBarView(editorView);  
+    
+    // 创建 "B" 菜单项，用于切换粗体  
+    const boldMenuItem = new MenuView('B', () => toggleBold(editorView,'bold'));  
+    
+    // 将 "B" 菜单项添加到 MenuBarView  
+    menuBarView.addMenuItem(boldMenuItem);  
+    
+    // 渲染 MenuBarView  
+    menuBarView.render();
+  } 

src/utils/model/prosemirror/index.vue

@@ -16,6 +16,8 @@ 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'
+
+import {addMenu} from './index.js'
 export default {
   components: {},
   props: {
@@ -23,6 +25,7 @@ export default {
 
     }
   },
+  mixins:[],
   data() {
     return {
         editor:{
@@ -35,8 +38,11 @@ export default {
     value(newVal) {  
       this.content = newVal
       if (this.editor.view) { 
-        
-        this.editor.view.state.tr.doc = schema.nodeFromJSON(newVal)
+        const mySchema = new Schema({
+            nodes: addListNodes(schema.spec.nodes, "paragraph block*", "block"),
+            marks: schema.spec.marks
+        })
+        this.editor.view.state.tr.doc = mySchema.nodeFromJSON(newVal)
         const newState = this.editor.view.state.apply(this.editor.view.state.tr);  
         this.editor.view.updateState(newState);  
       }  
@@ -67,13 +73,14 @@ export default {
             }),
             parent: this.$refs.editor, 
             dispatchTransaction(transaction) {
-              console.log(transaction)
                 let newState = that.editor.view.state.apply(transaction)
                 console.log(newState.doc.toJSON())
                 that.editor.view.updateState(newState)
                 that.$emit('input',newState.doc.toJSON())
             }
         })
+        addMenu(this.editor.view)
+        console.log(this.editor.view)
           // 设置监听器以更新Vue数据  
         // this.editor.view.on('transaction', (transaction, oldState) => {  
         //     if (transaction.docChanged) {  
@@ -83,6 +90,17 @@ export default {
         //     }  
         // });
     },
+    addMenu(){
+      var editorView = this.editor.view
+      const menuBarView = new MenuBarView(editorView, { /* options */ });  
+      const menuItem1 = new MenuView({ label: 'Item 1' });  
+      const menuItem2 = new MenuView({ label: 'Item 2' });  
+      menuBarView.addMenuItem(menuItem1);  
+      menuBarView.addMenuItem(menuItem2);  
+        
+      // 将 MenuBarView 挂载到编辑器视图的上方  
+      menuBarView.mount();
+    },
     getInitialDoc (schema) {
       if (this.content){
         return schema.nodeFromJSON(this.content)

src/utils/model/prosemirror/menu.js

@@ -3,6 +3,33 @@ import {Plugin} from "prosemirror-state"
 import {toggleMark, setBlockType, wrapIn} from "prosemirror-commands"
 import {schema} from "prosemirror-schema-basic"
 
+// 自定义 MenuBarView 类  
+class MenuBarView {  
+  constructor(editorView, options) {  
+    this.editorView = editorView;  
+    this.options = options;  
+    this.menuItems = []; // 存储所有的 MenuView 实例  
+  }  
+  
+  addMenuItem(menuItem) {  
+    this.menuItems.push(menuItem);  
+  }  
+  
+  render() {  
+    const element = document.createElement('div');  
+    element.classList.add('menu-bar');  
+    for (const menuItem of this.menuItems) {  
+      const menuElement = menuItem.render();  
+      element.appendChild(menuElement);  
+    }  
+    return element;  
+  }  
+  
+  mount() {  
+    const dom = this.render();  
+    this.editorView.dom.parentNode.insertBefore(dom, this.editorView.dom);  
+  }  
+}
 export class MenuView {
     constructor(items, editorView) {
       this.items = items
@@ -33,7 +60,7 @@ export class MenuView {
     destroy() { this.dom.remove() }
 }
 
-export function menuPlugin(items) {
+export function menuPlugin(items,editorView) {
     return new Plugin({
       view(editorView) {
         let menuView = new MenuView(items, editorView)
@@ -61,17 +88,39 @@ export function icon(text, name) {
   export const common = {
     methods:{
         didCreate(val){
-          console.log(val)
-            this.editor = val
-            this.plugins = menuPlugin([
+            var menu = 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)
+            console.log(menu)
+            return menu
         },
     }
     
-}
+}
+export function addMenu(editorView){
+  const menuBarView = new MenuBarView(editorView, { /* options */ });  
+  // const menuItem1 = new MenuView({ label: 'Item 1' });  
+  // const menuItem2 = new MenuView({ label: 'Item 2' });  
+  // menuBarView.addMenuItem(menuItem1);  
+  // menuBarView.addMenuItem(menuItem2);  
+  var menu = 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")}
+    ],editorView)
+    console.log(menu)
+    menuBarView.addMenuItem(menu);
+    for(var i =0;i<menu.length;i++){
+      console.log(1)
+      menuBarView.addMenuItem(menu[i]);
+    }
+     
+  // 将 MenuBarView 挂载到编辑器视图的上方  
+  menuBarView.mount();
+}