百度编辑器调用135编辑器方法

最新推荐文章于 2024-06-27 14:43:26 发布

苏喂苏喂苏喂su

最新推荐文章于 2024-06-27 14:43:26 发布

阅读量1.4k

点赞数

分类专栏： web 文章标签：富文本编辑器

本文链接：https://blog.csdn.net/joyvonlee/article/details/102963219

版权

web 专栏收录该内容

5 篇文章

订阅专栏

一：首先在ueditor.config.js中toolbars项里增加一个135editor菜单项

 toolbars:[

['bold','italic', 'underline', 'fontborder', 'strikethrough',  '135editor','rowspacingtop', 'rowspacingbottom', 'lineheight','removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|','superscript', 'subscript' ]],

二：在ueditor文件夹里创建135editor.js

UE.registerUI('135editor',function(editor,uiName){
  var dialog = new UE.ui.Dialog({
      iframeUrl: editor.options.UEDITOR_HOME_URL+'dialogs/135editor/135EditorDialogPage.html', // 135EditorDialogPage
      cssRules:"width:"+ parseInt(document.body.clientWidth*0.9) +"px;height:"+(window.innerHeight -50)+"px;",
      editor:editor,
      name:uiName,
      title:"135编辑器"
  });
  dialog.fullscreen = false;
  dialog.draggable = false;
  var btn = new UE.ui.Button({
      name:'btn-dialog-' + uiName,       
      className:'edui-for-135editor',
      title:'135编辑器',
      onclick:function () {
          dialog.render();
          dialog.open();
      }
  });
  return btn;
},undefined);
// 修改最后的undefined参数为数字序号，比如5，可调整135编辑器按钮的顺序。默认出现在最后面

三：根据路径，在响应的位置放置135页面的文件

四：在编辑器的页面添加css样式

.edui-button.edui-for-135editor .edui-button-wrap .edui-button-body .edui-icon{
  background-image: url("http://static.135editor.com/img/icons/editor-135-icon.png") !important;
  background-size: 85%;
  background-position: center;
  background-repeat: no-repeat;
}

完成，在编辑器即可看到135的菜单图标了