版本: 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)
发表回复