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

创建自定义编辑器：


代码如下:

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

赞 (0)

相关推荐

  • 百度编辑器 如何获取光标位置与不同帧内的节点

    百度编辑器 如何获取光标位置与不同帧内的节点

    var range = editor.selection.getRange();var td = domUtils.findParentByTagName( range.startContainer, 'td', true ); 当我们console.log(domUtils)的时候,可以在控制台中,看见很多domUtils下的方法,这些方法都是用于操作节点的,findParentByTagName()顾名思义,获取的是节点,当我们的光标在编辑器内容处,而我们要获取相应内容外层节点的id以及各种

  • 百度编辑器从Json对象中取值，完成初次渲染，在编辑器内画表格

    第一次做企业级应用,感觉一点:对逻辑必须要非常明确,而且有了很多与之前不一样的概念. 在百度编辑器中,如何完成从服务器取值,来渲染出表格?这里需要先console.log(editor);在官方API中已经告诉我们写入的方法是setContent(),这里只要能传入我们最终拼好的的字符串,即可以在初始化中,绘制出我们想要的任何节点. 再send()完成之后,onreadystatechange = function(){},先上一段AJAX的代码.这段AJAX是消除游览器兼容,从尼古拉斯的书中学

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

    创建自定义编辑器: 复制代码 代码如下: //引入editor_config.js,editor_api.js,ueditor.css文件,然后在body中创建编辑器实例与父容器 <div id="myEditor"></div> <script type="text/javascript"> var editorOption = { toolbars:[['FullScreen', 'Source', 'Undo', 'Redo

  • destoon二次开发常用数据库操作

    destoon在初始化系统后系统会自动连接数据库,并将数据库操作对象保存在$db.对于数据库操作方法请参考include/db_mysql.class.php函数原型,下面对常用数据库操作举例说明. 1.执行SQL语句 $db->query("INSERT INTO `{$DT_PRE}table` (`xxx`) VALUES ('yyy')"); $db->query("UPDATE `{$DT_PRE}table` SET `xxx`='yyy' WHERE

  • 9个PHP开发常用功能函数小结

    1. 函数的任意数目的参数 你可能知道PHP允许你定义一个默认参数的函数.但你可能并不知道PHP还允许你定义一个完全任意的参数的函数 下面是一个示例向你展示了默认参数的函数: 复制代码 代码如下: // 两个默认参数的函数 function foo($arg1 = '', $arg2 = '') { echo "arg1: $arg1\n"; echo "arg2: $arg2\n"; } foo('hello','world'); /* 输出: arg1: hel

  • 正则表达式常用元字符整理小结

    正则表达式元字符和普通字符: 根据正则表达式语法规则,正则表达式的匹配模式是由一系列的字符构成的. 一.普通字符: 大多数的字符仅能够描述它们本身,这些字符称作普通字符,例如所有的字母和数字. 也就是说普通字符只能够匹配字符串中与它们相同的字符. 二.元字符: 由于普通字符只能匹配与自身相同的字符,那么正则表达式的灵活性和强大的匹配功能就不能够完全展现,于是正则表达式中还规定了一系列的特殊字符,这些特殊字符不是按照字符的直接量进行匹配的,而是具有特殊的语义, 例如下面如下字符: ^ $ . *

  • JS开发常用工具函数(小结)

    1.isStatic:检测数据是不是除了symbol外的原始数据 function isStatic(value) { return( typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean' || typeof value === 'undefined' || value === null ) } 2.isPrimitive:检测数据是不是原始数据 function isPrimit

  • javascript 开发之百度地图使用到的js函数整理

     javascript 开发之百度地图使用到的js函数整理 接项目用到的地图,客户要求用百度地图,没办法只好用百度地图,这里总结一下,写的一些函数,注释比较详细! //创建和初始化地图函数: function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地图添加控件 addMarker();//向地图中添加marker } //创建地图函数: function createMap(){ var m

  • Linux全网最全面常用命令整理(附实例)

    Linux全网最全面常用命令整理(附实例)

    目录 一.基本命令 1.1 关机和重启 1.2 帮助命令 二.目录操作命令 2.1 目录切换 cd 2.2 目录查看 ls [-al] 2.3 目录操作[增,删,改,查] 2.3.1 创建目录[增] mkdir 2.3.2 删除目录或文件[删]rm 2.3.3 目录修改[改]mv 和 cp 2.3.4 搜索目录[查]find 三.文件操作命令 3.1 文件操作[增,删,改,查] 3.1.1 新建文件[增]touch 3.1.2 删除文件 [删] rm 3.1.3 修改文件[改] vi或vim 3

  • UCenter Home二次开发指南

    前言本文将就UCH二次开发这个核心主题,以各种实现的代码为主,辅助部分说明概略的讲解如何针对UCH进行二次开发.过段时间UCH就开源了,准备到时候再详细的写篇UCH机制分析. 顺便说下,这篇文件写在大约两周以前,但是一直没有时间整理发布,今天听说UCH会在最近一段时间开源,到时候再发反而对大家帮助不大,所以决定不再整理,虽然文中一些说明还不详细,但是已经基本成文. 数据调用这里的数据调用是使用UCenter Home内置的数据调用,在后台的"高级应用"里有"数据调用"

  • redis常用命令整理

    一.key 相关: (1)redis允许模糊查询 key(keys *) 有3个通配符 *.?.[] (2)randomkey:返回随机key (3)type key:返回key存储的类型 (4)exists key:判断某个key是否存在 (5)del key:删除key FLUSHALL: 删除所有key(慎用) 二.数据操作: Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及 zset(sorted set:有序集合). 1.stri

  • 基于Python的Jenkins的二次开发操作

    背景 最近我们在整一个云执行的平台,底层用的是Jenkins来做执行引擎,方便的把我们的脚本做一个统一的调度. Jenkins确实是一个非常方便的框架,它提供了一整套的RESTful的API,可以非常方便的做二次开发,而且提供了一个python的库,操作起来就更加方便了. 常用的Jenkins概念 我们在使用Jenkins的时候,一般看到的都是Jenkins的View. 也就是说我们看到的基本上都是一些视图. 每一个构建的内容,无论是执行用例,跑脚本,还是打包编译发布,都是一个job. 每一个j

随机推荐