custom-menu.js 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. // 缩进 菜单插件
  2. (function (E, $) {
  3. // 用 createMenu 方法创建菜单
  4. E.createMenu(function (check) {
  5. // 定义菜单id,不要和其他菜单id重复。编辑器自带的所有菜单id,可通过『参数配置-自定义菜单』一节查看
  6. var menuId = 'indent';
  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-indent-left"></i></a>'),
  20. $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="wangeditor-menu-img-indent-left"></i></a>')
  21. });
  22. // 菜单正常状态下,点击将触发该事件
  23. menu.clickEvent = function (e) {
  24. var elem = editor.getRangeElem();
  25. var p = editor.getSelfOrParentByName(elem, 'p');
  26. var $p;
  27. if (!p) {
  28. // 未找到 p 元素,则忽略
  29. return e.preventDefault();
  30. }
  31. $p = $(p);
  32. // 使用自定义命令
  33. function commandFn() {
  34. $p.css('text-indent', '2em');
  35. }
  36. editor.customCommand(e, commandFn);
  37. };
  38. // 菜单选中状态下,点击将触发该事件
  39. menu.clickEventSelected = function (e) {
  40. var elem = editor.getRangeElem();
  41. var p = editor.getSelfOrParentByName(elem, 'p');
  42. var $p;
  43. if (!p) {
  44. // 未找到 p 元素,则忽略
  45. return e.preventDefault();
  46. }
  47. $p = $(p);
  48. // 使用自定义命令
  49. function commandFn() {
  50. $p.css('text-indent', '0');
  51. }
  52. editor.customCommand(e, commandFn);
  53. };
  54. // 根据当前选区,自定义更新菜单的选中状态或者正常状态
  55. menu.updateSelectedEvent = function () {
  56. // 获取当前选区所在的父元素
  57. var elem = editor.getRangeElem();
  58. var p = editor.getSelfOrParentByName(elem, 'p');
  59. var $p;
  60. var indent;
  61. if (!p) {
  62. // 未找到 p 元素,则标记为未处于选中状态
  63. return false;
  64. }
  65. $p = $(p);
  66. indent = $p.css('text-indent');
  67. if (!indent || indent === '0px') {
  68. // 得到的p,text-indent 属性是 0,则标记为未处于选中状态
  69. return false;
  70. }
  71. // 找到 p 元素,并且 text-indent 不是 0,则标记为选中状态
  72. return true;
  73. };
  74. // 增加到editor对象中
  75. editor.menus[menuId] = menu;
  76. });
  77. })(window.wangEditor, window.jQuery);