custom-menu-1.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. // 行高 菜单插件
  2. (function (E, $) {
  3. // 用 createMenu 方法创建菜单
  4. E.createMenu(function (check) {
  5. // 定义菜单id,不要和其他菜单id重复。编辑器自带的所有菜单id,可通过『参数配置-自定义菜单』一节查看
  6. var menuId = 'lineheight';
  7. // check将检查菜单配置(『参数配置-自定义菜单』一节描述)中是否该菜单id,如果没有,则忽略下面的代码。
  8. if (!check(menuId)) {
  9. return;
  10. }
  11. // this 指向 editor 对象自身
  12. var editor = this;
  13. // 由于浏览器自身不支持 lineHeight 命令,因此要做一个hook
  14. editor.commandHooks.lineHeight = function (value) {
  15. var rangeElem = editor.getRangeElem();
  16. var targetElem = editor.getSelfOrParentByName(rangeElem, 'p,h1,h2,h3,h4,h5,pre');
  17. if (!targetElem) {
  18. return;
  19. }
  20. $(targetElem).css('line-height', value + '');
  21. };
  22. // 创建 menu 对象
  23. var menu = new E.Menu({
  24. editor: editor, // 编辑器对象
  25. id: menuId, // 菜单id
  26. title: '行高', // 菜单标题
  27. commandName: 'lineHeight', // 命令名称
  28. // 正常状态和选中装下的dom对象,样式需要自定义
  29. $domNormal: $('<a href="#" tabindex="-1"><i class="wangeditor-menu-img-arrows-v"></i></a>'),
  30. $domSelected: $('<a href="#" tabindex="-1" class="selected"><i class="wangeditor-menu-img-arrows-v"></i></a>')
  31. });
  32. // 数据源
  33. var data = {
  34. // 格式: 'value' : 'title'
  35. '1.0': '1.0倍',
  36. '1.5': '1.5倍',
  37. '1.8': '1.8倍',
  38. '2.0': '2.0倍',
  39. '2.5': '2.5倍',
  40. '3.0': '3.0倍'
  41. };
  42. // 为menu创建droplist对象
  43. var tpl = '<span style="line-height:{#commandValue}">{#title}</span>';
  44. menu.dropList = new E.DropList(editor, menu, {
  45. data: data, // 传入数据源
  46. tpl: tpl // 传入模板
  47. });
  48. // 增加到editor对象中
  49. editor.menus[menuId] = menu;
  50. });
  51. })(window.wangEditor, window.jQuery);