版本: 1.4
过程
仔细阅读 github 仓库 readme, 起手一个 demo
阅读开发文档 , 基本插件开发如下：
<script type=”text/javascript” charset=”utf-8″ src=”ueditor.config.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”ueditor.all.min.js”> </script>
<!– 建议手动加在语言，避免在 ie 下有时因为加载语言失败导致编辑器加载失败 –>
<!– 这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文 –>
<script type=”text/javascript” charset=”utf-8″ src=”lang/zh-cn/zh-cn.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”quote.js”> </script>
新建 js
UE.registerUI(‘quote’, function (editor, uiName) {
var btn = new UE.ui.Button({
// 按钮的名字
name: uiName,
// 提示
title: uiName,
// 需要添加的额外样式，指定 icon 图标，这里默认使用一个重复的 icon
cssRules: ‘background-position: -500px 0;’,
// 点击时执行的命令
onclick: function () {
// 这里可以不用执行命令, 做你自己的操作也可
editor.execCommand(‘inserthtml’, ‘<span> 哈哈哈哈哈哈 </span>’)
}
});
// 因为你是添加 button, 所以需要返回这个 button
return btn;
})
开发 API 等查看文档
查看插件市场, 阅读其他作者的插件源码
表单生成器插件
记录
生成弹窗
var dialog = new UE.ui.Dialog({
iframeUrl: editor.options.UEDITOR_HOME_URL + ‘dialogs/popup.html’, // url
name: ‘popup’,
editor: editor,
title: ‘ 写入批注 ’, // iframe title
cssRules: “width:600px;height:260px;”, // iframe 宽高
buttons: [
{
className: ‘edui-okbutton’,
label: ‘ 确定 ’,
onclick: function () {
dialog.close(true);
editor.execCommand(‘html’);
}
},
{
className: ‘edui-cancelbutton’,
label: ‘ 取消 ’,
onclick: function () {
dialog.close(false);
}
}]
})
dialog.render(); // 渲染
dialog.open(); // 打开
弹出
var popup = new baidu.editor.ui.Popup({
editor: this,
content: ”,
className: ‘edui-bubble’,
_edittext: function () {
baidu.editor.plugins[thePlugins].editdom = popup.anchorEl;
me.execCommand(thePlugins);
this.hide();
},
_delete: function () {
if (window.confirm(‘ 确认删除该控件吗？’)) {
baidu.editor.dom.domUtils.remove(this.anchorEl, false);
}
this.hide();
}
})
popup.render();
$$ 含义
<nobr> 文本框: <span onclick=$$._edittext() class=”edui-clickable”> 编辑 </span> <
中的 $$ 含义?
全局查找得知:
baidu.$$ = window[baidu.guid] = window[baidu.guid] || {global:{}};
注册插件形式开发
之前 registerUI 注册 UI 开发, 为了实现更复杂的效果，使用 plugins 注册
UE.plugins[‘quote’] = function() {
var me = this,thePlugins = ‘quote’;
me.commands[thePlugins] = {
execCommand: function () {
}
}
}
生成弹窗后的值如何获取判断？
在弹窗所属的 html 中，已经全局暴露了一个 dialog 对象，就是之前 new 的 new UE.ui.Dialog.dialog 有一些钩子和方法:
var oNode = null, thePlugins = ‘quote’;
window.onload = function () {
if (UE.plugins[thePlugins].editdom) {
oNode = UE.plugins[thePlugins].editdom;
var gValue = oNode.getAttribute(‘value’).replace(/"/g, “\””);
gValue = gValue == null ? ” : gValue;
$G(‘orgvalue’).value = gValue;
}
}
dialog.oncancel = function () {
if (UE.plugins[thePlugins].editdom) {
delete UE.plugins[thePlugins].editdom;
}
}
dialog.onok = function () {
if($G(‘orgvalue’).value.trim() == ”) {
alert(‘ 请输入批注内容 ’)
return false;
}
var gValue=$G(‘orgvalue’).value.replace(/\”/g,”"”);
}
需要引入百度的工具文件
<script type=”text/javascript” src=”../dialogs/internal.js”></script>
类似 $G 都是工具文件里定义的封装函数
解除 html 规则过滤
div 会被解析成 p 标签，顺带 style script 也被屏蔽了。
ueditor.all.js 搜索 allowDivTransToP 设置为 false
addInputRule 方法中的 style script 的 case 注释掉
直接更改了 ueditor.all.js 中的源码，相当不友好，只是目前没找到其他搞法
替换选中的字符串
UE.editor 上并没有修改选中字符串的方法。
range.deleteContents(); 删除选区的内容
range.insertNode(); 新增 node 节点 可以是 TextNode ElementNode fragment
var range = UE.getEditor(‘editor’).selection.getRange();
range.select();
var node = document.createTextNode(‘ 你说你想要逃 ’);
ue.selection.getRange().deleteContents().insertNode(node)