addCustomizeCombox.js 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. UE.registerUI('combox',function(editor,uiName){
  2. //注册按钮执行时的command命令,用uiName作为command名字,使用命令默认就会带有回退操作
  3. editor.registerCommand(uiName,{
  4. execCommand:function(cmdName,value){
  5. //这里借用fontsize的命令
  6. this.execCommand('fontsize',value + 'px')
  7. },
  8. queryCommandValue:function(){
  9. //这里借用fontsize的查询命令
  10. return this.queryCommandValue('fontsize')
  11. }
  12. });
  13. //创建下拉菜单中的键值对,这里我用字体大小作为例子
  14. var items = [];
  15. for(var i= 0,ci;ci=[10, 11, 12, 14, 16, 18, 20, 24, 36][i++];){
  16. items.push({
  17. //显示的条目
  18. label:'字体:' + ci + 'px',
  19. //选中条目后的返回值
  20. value:ci,
  21. //针对每个条目进行特殊的渲染
  22. renderLabelHtml:function () {
  23. //这个是希望每个条目的字体是不同的
  24. return '<div class="edui-label %%-label" style="line-height:2;font-size:' +
  25. this.value + 'px;">' + (this.label || '') + '</div>';
  26. }
  27. });
  28. }
  29. //创建下来框
  30. var combox = new UE.ui.Combox({
  31. //需要指定当前的编辑器实例
  32. editor:editor,
  33. //添加条目
  34. items:items,
  35. //当选中时要做的事情
  36. onselect:function (t, index) {
  37. //拿到选中条目的值
  38. editor.execCommand(uiName, this.items[index].value);
  39. },
  40. //提示
  41. title:uiName,
  42. //当编辑器没有焦点时,combox默认显示的内容
  43. initValue:uiName
  44. });
  45. editor.addListener('selectionchange', function (type, causeByUi, uiReady) {
  46. if (!uiReady) {
  47. var state = editor.queryCommandState(uiName);
  48. if (state == -1) {
  49. combox.setDisabled(true);
  50. } else {
  51. combox.setDisabled(false);
  52. var value = editor.queryCommandValue(uiName);
  53. if(!value){
  54. combox.setValue(uiName);
  55. return;
  56. }
  57. //ie下从源码模式切换回来时,字体会带单引号,而且会有逗号
  58. value && (value = value.replace(/['"]/g, '').split(',')[0]);
  59. combox.setValue(value);
  60. }
  61. }
  62. });
  63. return combox;
  64. },2/*index 指定添加到工具栏上的那个位置,默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮*/);