custom-menu-2.js 1.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. // 插入特殊符合,菜单插件
  2. (function (E, $) {
  3. // 用 createMenu 方法创建菜单
  4. E.createMenu(function (check) {
  5. // 定义菜单id,不要和其他菜单id重复。编辑器自带的所有菜单id,可通过『参数配置-自定义菜单』一节查看
  6. var menuId = 'symbol';
  7. // check将检查菜单配置(『参数配置-自定义菜单』一节描述)中是否该菜单id,如果没有,则忽略下面的代码。
  8. if (!check(menuId)) {
  9. return;
  10. }
  11. // this 指向 editor 对象自身
  12. var editor = this;
  13. // 创建 menu 对象
  14. var menu = new E.Menu({
  15. editor: editor, // 编辑器对象
  16. id: menuId, // 菜单id
  17. title: '符号', // 菜单标题
  18. // 正常状态和选中装下的dom对象,样式需要自定义
  19. $domNormal: $('<a href="#" tabindex="-1"><i class="wangeditor-menu-img-omega"></i></a>'),
  20. $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="wangeditor-menu-img-omega"></i></a>')
  21. });
  22. // 要插入的符号(可自行添加)
  23. var symbols = ['∑', '√', '∫', '∏', '≠', '♂', '♀']
  24. // panel 内容
  25. var $container = $('<div></div>');
  26. $.each(symbols, function (k, value) {
  27. $container.append('<a href="#" style="display:inline-block;margin:5px;">' + value + '</a>');
  28. });
  29. // 插入符号的事件
  30. $container.on('click', 'a', function (e) {
  31. var $a = $(e.currentTarget);
  32. var s = $a.text();
  33. // 执行插入的命令
  34. editor.command(e, 'insertHtml', s);
  35. });
  36. // 添加panel
  37. menu.dropPanel = new E.DropPanel(editor, menu, {
  38. $content: $container,
  39. width: 350
  40. });
  41. // 增加到editor对象中
  42. editor.menus[menuId] = menu;
  43. });
  44. })(window.wangEditor, window.jQuery);