UEditor 是百度公司推出的一款富文本编辑器,功能十分强大
引用
<script src="https://cdn.jsdelivr.net/gh/tianlunvip/vendor@master/ueditor/ueditor.config.js"></script>
<script src="https://cdn.jsdelivr.net/gh/tianlunvip/vendor@master/ueditor/ueditor.all.min.js"></script>
演示
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>
最好使用 textarea
作为编辑器的容器
<textarea id="container" name="content">内容</textarea>
对编辑器的操作最好在编辑器 ready
之后再做
ue.ready(function(){
//设置编辑器的内容
ue.setContent('hello');
//获取html内容,返回: <p>hello</p>
var html = ue.getContent();
//获取纯文本内容,返回: hello
var txt = ue.getContentTxt();
});
自适应宽度、高度
代码参考全屏模式代码
resize : function(w, h){
// w = $("#container").innerWidth();
// h = $("#container").innerHeight();
var self = ue;
uiUtils = baidu.editor.ui.uiUtils;
// 可以使用目标容器 $("#container") 尺寸代替
var vpRect = uiUtils.getViewportRect();
console.log(vpRect.width + " " + w);
self.iframe.parentNode.style.width = '';
self.ui.getDom().style.cssText = 'border:0;position:absolute;left:0;top:' + (self.options.topOffset || 0) + 'px;width:' + vpRect.width + 'px;height:' + vpRect.height + 'px;z-index:' + (self.ui.getDom().style.zIndex * 1 + 100);
uiUtils.setViewportOffset(self.ui.getDom(), { left:0, top:self.options.topOffset || 0 });
self.setHeight(vpRect.height - self.ui.getDom('toolbarbox').offsetHeight - self.ui.getDom('bottombar').offsetHeight - (self.options.topOffset || 0),true);
},
设置宽度自适应还有种简单方法
$("#container .edui-editor").css('width', '100%');
ue.iframe.parentNode.style.width = '';
自定义插件
考虑到大家的功能基本上都会扩展一个UI和这个UI做的事情,所以UEditor提供了registerUI这个接口,可以让开发者动态的注入扩展的内容。
UE.registerUI('uiname', function(editor, uiname) {
//do something
}, [index, [editorId]]);
uiname: 新添加的UI的名字,可以是1个或者多个 “uiname1 uiname2 uiname3”
function: 是实际你要做的事情,这里提供两个参数,editor 是编辑器实例,如果你有多个编辑器实例,那每个编辑器实例化后,都会调用这个 function,并且把 editor 传进来, uiname 为ui起的名字,如果前边添加的是多个UI,这里function 会被调用多次,并且将每一个ui名字传递进来。如果函数返回了一个 UI 实例,那这个UI实例就会被默认加到工具栏上。当然也可以不返回任何 UI。比如希望监控 selectionchange 事件,在某些场景下弹出浮层,这时就不需要返回任何UI。
index: 是你想放到 toolbar 的那个位置,默认是放到最后
editorId: 当你的页面上有多个编辑器实例时,你想将这个ui扩展到那个编辑器实例上,这里的editorId是给你编辑器初始化时,传入的id,默认是每个实例都会加入你的扩展
添加按钮
UE.registerUI('button', function(editor, uiName) {
//注册按钮执行时的command命令,使用命令默认就会带有回退操作
editor.registerCommand(uiName, {
execCommand: function() {
alert('execCommand:' + uiName)
}
});
//创建一个button
var btn = new UE.ui.Button({
//按钮的名字
name: uiName,
//提示
title: uiName,
//添加额外样式,指定icon图标,这里默认使用一个重复的icon
cssRules: 'background-position: -500px 0;',
//点击时执行的命令
onclick: function() {
//这里可以不用执行命令,做你自己的操作也可
editor.execCommand(uiName);
}
});
//当点到编辑内容上时,按钮要做的状态反射
editor.addListener('selectionchange', function() {
var state = editor.queryCommandState(uiName);
if (state == -1) {
btn.setDisabled(true);
btn.setChecked(false);
} else {
btn.setDisabled(false);
btn.setChecked(state);
}
});
//因为你是添加button,所以需要返回这个button
return btn;
});