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

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› 综合其他›网页编辑器

原作者: [db:作者] 来自: [db:来源] 收藏邀请

创建自定义编辑器：

 
//引入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对象，都可以点出我们在首页中定义的扩展方法。