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;
});
