首页 > 开发 > 综合 > 正文

百度编辑器二次开发常用手记整理小结

2024-07-21 02:54:00
字体:
来源:转载
供稿:网友
最近一直在做百度编辑器的二次开发,忙乎了一段时间,今天把一些常用的资料,整理出来,供以后查询
 
创建自定义编辑器: 
复制代码代码如下:

//引入editor_config.js,editor_api.js,ueditor.css文件,然后在body中创建编辑器实例与父容器 
<div id="myEditor"></div> 
<script type="text/javascript"> 
var editorOption = { 
toolbars:[['FullScreen', 'Source', 'Undo', 'Redo','Bold']], 
autoClearinitialContent:true, 
wordCount:false, 
}; 
var editor_a = new baidu.editor.ui.Editor(editorOption); 
editor_a.render( 'myEditor' ); 
</script> 

配置弹出工具按钮: 
复制代码代码如下:

//editor_config.js editorui.js文件中找到toolbars labelMap iframeUrlMap btnCmds dialogBtns 五个参数进行配置 
//toolbars:工具或下拉框参数, 
//labelMap:工具按钮提示信息 
//iframeUrlMap:弹出插件URL路径 
//btnCmds:工具按钮统一触发命令 
//dialogBtns:弹出命令 
//注册插件 []传入的是toolbars中的参数 
UE.plugins[] = function(){ 
  .... 
  execCommand:function(cmdName,myobject){ 
    .... 
  } 

配置命令工具按钮: 
复制代码代码如下:

//editor_config.js editorui.js文件中找到toolbars labelMap btnCmds 
//注册命令工具按钮 []传入的是toolbars中的参数 
UE.commands[] = function(){ 
  ..... 
  execCommand:function(){ 
    ..... 
  } 

右键按钮配置: 
复制代码代码如下:

//editor_config.js contextmenu.js文件中找到toolbars labelMap items三个参数进行配置 
//命令右键配置 
items: 

  label:"", [右键名字] 
  cmdName:"",[toolbars参数中所配置的名字] 
  exec:function(){ 
    this.execCommand("");[toolbars参数中所配置的名字] 
  } 

//注册右键按钮命令 
UE.commands[] = function(){ 
  execCommand:function(){ 
    ....... 
  } 

注:注册右键按钮命令[]中依然是toolbars参数中所配置的名字 
//插件右键配置[]传入的参数是toolbars中的参数 
items: 

  label:"", 
  cmdName:"", 
  exec:function(){ 
    if(UE.ui[]){ 
      new UE.ui[](this); 
    } 
    this.ui._dialogs['...Dialog'].open(); 
  } 

//注册右键插件 []传入的参数是toolbars中的参数 
UE.plugins[] = function(){ 
  .... 
  execCommand:function(cmdName,myobject){ 
    .... 
  } 

插件命令配置: 
复制代码代码如下:

UE.plugins[] = function(){ 
var me = this; 
  //注册鼠标和键盘事件 
me.addListener('mousedown',_mouseDownEvent); 
me.addListener('keydown',function(type,evt){...}); 
me.addListener('mouseup',function(){}); 
  //查询当前命令状态 
queryCommandState:function(cmdName){} 
  //命令执行主体 
exeCommand:function(cmdName,myobject){} 
  //获取命令执行结果 
queryCommandValue:function(cmdName){} 

插件弹出执行注册: 
复制代码代码如下:

dialog.onok = function(){ 
editor.execCommand("",""); //两个参数,功能参数,我们自己需要传入的值 
dialog.close(); 

一些操作类,实用: 
复制代码代码如下:

//editor.selection.getRange() 查询范围方法 
//editor类,此类用于初始化的一些设置,比如获取内容,设置高宽,设置编辑器内容等等。 
//domUtils类,此类用于不同帧内dom节点的操作,比如获取父节点,节点属性,文本内容等等。 
//browser类,此类用于检测游览器,比如判断IE火狐等。 
//EventBase类,此类用基础事件的注册类,比如鼠标,键盘事件等。 
//ajax类,此类用于ajax工具类。 
//暂时在工作里只用到了上述,代码的组织结构,都还木有研究。 


如何给百度编辑器editor扩展 

百度编辑器的editor对象中,是百度编辑器所有方法对象,在扩展时,只需要在首页实例中,添加方法。editor.xx = {}。 

在任何的页面中editor对象,都可以点出我们在首页中定义的扩展方法。


注:相关教程知识阅读请移步到编辑器频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表