1
0

addCustomizeButton.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. UE.registerUI('button',function(editor,uiName){
  2. //注册按钮执行时的command命令,使用命令默认就会带有回退操作
  3. editor.registerCommand(uiName,{
  4. execCommand:function(){
  5. alert('execCommand:' + uiName)
  6. }
  7. });
  8. //创建一个button
  9. var btn = new UE.ui.Button({
  10. //按钮的名字
  11. name:uiName,
  12. //提示
  13. title:uiName,
  14. //需要添加的额外样式,指定icon图标,这里默认使用一个重复的icon
  15. cssRules :'background-position: -500px 0;',
  16. //点击时执行的命令
  17. onclick:function () {
  18. //这里可以不用执行命令,做你自己的操作也可
  19. editor.execCommand(uiName);
  20. }
  21. });
  22. //当点到编辑内容上时,按钮要做的状态反射
  23. editor.addListener('selectionchange', function () {
  24. var state = editor.queryCommandState(uiName);
  25. if (state == -1) {
  26. btn.setDisabled(true);
  27. btn.setChecked(false);
  28. } else {
  29. btn.setDisabled(false);
  30. btn.setChecked(state);
  31. }
  32. });
  33. //因为你是添加button,所以需要返回这个button
  34. return btn;
  35. }/*index 指定添加到工具栏上的那个位置,默认时追加到最后,editorId 指定这个UI是那个编辑器实例上的,默认是页面上所有的编辑器都会添加这个按钮*/);
  36. //自定义引用样式例子
  37. UE.registerUI('myblockquote',function(editor,uiName){
  38. editor.registerCommand(uiName,{
  39. execCommand:function(){
  40. this.execCommand('blockquote',{
  41. "style":"border-left: 3px solid #E5E6E1; margin-left: 0px; padding-left: 5px; line-height:36px;"
  42. });
  43. }
  44. });
  45. var btn = new UE.ui.Button({
  46. name:uiName,
  47. title:'自定义引用',
  48. cssRules :"background-position: -220px 0;",
  49. onclick:function () {
  50. editor.execCommand(uiName);
  51. }
  52. });
  53. editor.addListener('selectionchange', function () {
  54. console.log(this);
  55. var state = editor.queryCommandState('blockquote');
  56. if (state == -1) {
  57. btn.setDisabled(true);
  58. btn.setChecked(false);
  59. } else {
  60. btn.setDisabled(false);
  61. btn.setChecked(state);
  62. }
  63. });
  64. return btn;
  65. });