版本: 1.4
过程
<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;
})
记录
生成弹窗
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)
老实说:这个ueditor API比官网的全太多了,官网没有记录的API方法,这儿都能查到
使用命令来使用,因为命令可以有撤回和前进操作
命令名称必须是小写!!!
me.commands['quoteupdate'] = {
execCommand: function (str) {
console.log(str)
var range = this.selection.getRange();
range.select();
var node = document.createTextNode('你说你想要逃');
this.selection.getRange().deleteContents().insertNode(node)
}
}
排序右侧的批注信息,使其不重叠,再次渲染
// obj: 排序的json对象, key: 排序的key值
function sort(obj, key) {
var arr = []
for (var item in obj) {
var current = obj[item]
if (arr.length === 0 && current[key]) {
arr.push(current)
} else {
var pos = arr.length - 1
var index = 0;
while (pos >= 0) {
if (arr[pos][key] < current[key]) {
arr.splice(pos + 1, 0, current)
break;
} else {
if (pos == 0)
arr.splice(pos, 0, current)
}
pos--;
}
}
}
return arr;
}
function changeAndCalculator(store) {
// 调用排序函数
var arr = sort(store, 'top')
html = '<ul id="orgQuote" contenteditable="false" style="' + stylee + '">'
arr.forEach(function (v, i) {
var style = []
style.push('margin: 10px 0; padding: 10px; border: 1px solid #eee;')
style.push('background: linear-gradient(0deg, #fafafa, #f8f8f8);')
if (i == 0 || (i > 0 && v.top - 45 > arr[i - 1].top)) {
style.push('position: absolute; top:' + v.top + 'px;transition: all 1s;')
} else {
v.top = arr[i - 1].top + 45
style.push('position: absolute; top:' + v.top + 'px;transition: all 1s;')
}
html += '<div style="' + style.join('') + '">' + v.value + '</div>'
})
html += '</ul>'
UE.getEditor('editor').setContent(html + olddom)
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。