1

src/utils/model/prosemirror/index.js

@@ -25,46 +25,56 @@ class MenuBarView {
   
   addMenuItem(menuItem) {  
     this.menuItems.push(menuItem);  
-    if (this.dom) {  
-      this.render(); // 如果 DOM 已经存在，重新渲染  
-    }  
+    this.render();  
   }  
   
   render() {  
-    if (this.dom) {  
-      this.dom.innerHTML = ''; // 清空现有的菜单项  
-    } else {  
+    console.log(this.editorView.dom.parentNode)
+    if (!this.dom) {  
       this.dom = document.createElement('div');  
       this.dom.classList.add('menu-bar');  
       this.editorView.dom.parentNode.insertBefore(this.dom, this.editorView.dom);  
     }  
   
+    // 清空现有的菜单项  
+    this.dom.innerHTML = '';  
+  
+    // 渲染新的菜单项  
     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);  
+// 定义切换粗体、斜体和下划线的函数  
+function toggleBold() {  
+  // 实现切换粗体的逻辑  
 }  
-
+  
+function toggleItalic() {  
+  // 实现切换斜体的逻辑  
+}  
+  
+function toggleUnderline() {  
+  // 实现切换下划线的逻辑  
+}  
+  
 
 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();
-  } 
+  // 创建 MenuBarView 实例  
+const menuBarView = new MenuBarView(editorView);  
+  
+// 创建菜单项  
+const boldMenuItem = new MenuView('B', toggleBold);  
+const italicMenuItem = new MenuView('I', toggleItalic);  
+const underlineMenuItem = new MenuView('U', toggleUnderline);  
+  
+// 将菜单项添加到 MenuBarView  
+menuBarView.addMenuItem(boldMenuItem);  
+menuBarView.addMenuItem(italicMenuItem);  
+menuBarView.addMenuItem(underlineMenuItem);  
+  
+// 渲染 MenuBarView  
+menuBarView.render();
+} 

src/utils/model/prosemirror/menu.js

@@ -3,33 +3,6 @@ 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
@@ -102,25 +75,11 @@ export function icon(text, name) {
     
 }
 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([
+  let 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();
+  ])
 }