自定义菜单

配置菜单

编辑器创建之前

editor.config.menus

使用 editor.config.menus 定义显示哪些菜单和菜单的顺序。

  1. <div id="div1">
  2. <p>欢迎使用 wangEditor 编辑器</p>
  3. </div>
  4. <!-- 引入 wangEditor.min.js -->
  5. <script type="text/javascript">
  6. const E = window.wangEditor
  7. const editor = new E('#div1')
  8. // 配置菜单栏,删减菜单,调整顺序
  9. editor.config.menus = [
  10. 'bold',
  11. 'head',
  12. 'link',
  13. 'italic',
  14. 'underline'
  15. ]
  16. editor.create()
  17. </script>

editor.config.excludeMenus

使用 editor.config.excludeMenus 当只需剔除少数菜单的时候,直接设置不需要的菜单

  1. <div id="div1">
  2. <p>欢迎使用 wangEditor 编辑器</p>
  3. </div>
  4. <!-- 引入 wangEditor.min.js -->
  5. <script type="text/javascript">
  6. const E = window.wangEditor
  7. const editor = new E('#div1')
  8. // 配置菜单栏,设置不需要的菜单
  9. editor.config.excludeMenus = [
  10. 'emoticon',
  11. 'video'
  12. ]
  13. editor.create()
  14. </script>

【注意】不要同时使用 editor.config.menuseditor.config.excludeMenus,以免引起冲突和混乱。

所有菜单

默认情况下会显示所有的菜单,配置如下:

  1. // 默认情况下,显示所有菜单
  2. editor.config.menus = [
  3. 'head',
  4. 'bold',
  5. 'fontSize',
  6. 'fontName',
  7. 'italic',
  8. 'underline',
  9. 'strikeThrough',
  10. 'indent',
  11. 'lineHeight',
  12. 'foreColor',
  13. 'backColor',
  14. 'link',
  15. 'list',
  16. 'todo',
  17. 'justify',
  18. 'quote',
  19. 'emoticon',
  20. 'image',
  21. 'video',
  22. 'table',
  23. 'code',
  24. 'splitLine',
  25. 'undo',
  26. 'redo',
  27. ]