文人 发表于 2013-1-4 02:45:40

百度编辑器自定义插件弹出层与右键自定义

<div id="cnblogs_post_body">在做自定义插件时,需要先配置如下信息。
toolbars,labelMap,数据集合,在editor_config.js文件中,命名最好能大小写一样。
iframeUrlMap,btnCmds,dialogBtns,数据集合,在editorui.js文件中,与editor_config.js文件命名一样。
iframeUrlMap参数为,dialogs中已经写好的html页面,它会如iframe一样,加载进去,也就是寻找到这个html页面的路径。
btnCmds参数为,工具栏上定义的按钮。
dialogBtns参数为,点击工具栏上定义按钮,能弹出iframeUrlMap参数中传入路径的html页面。
而功能逻辑,则写在dialgs文件的html页面中。
此外还需要另外配置一个js文件,来启用命令,
baidu.editor.commands[] = function(){}
iframe中的逻辑处理之后的参数,需要调用dialog.onok = function(){...}来传入。
editor.execCommand("toolbars自定义参数的名字",code.value,language);
这里传入的是到baidu.editor.commands[] = function(){}这个所在的插件内。
自此一个自定义插件,就完成了。
右键自定义:(看个图)

http://pic002.cnblogs.com/images/2012/363780/2012061920231772.jpg
http://pic002.cnblogs.com/images/2012/363780/2012061920241731.jpg

点击它出现如此的功能窗口,如何做呢?如同配置插件一样。
首先是toolbars,labelMap数据集合,其次是iframeUrlMap,dialogBtns数据集合。
然后需要如此配置命名,编写一个新的js文件,在editor_api.js文件中引入。
接着:

<div class="cnblogs_code">UE.commands['xwdoer'] = {    execCommand : function( cmdName) {      var me = this,            enterTag = me.options.enterTag,            range = me.selection.getRange();    }};
页: [1]
查看完整版本: 百度编辑器自定义插件弹出层与右键自定义