Ueditor是百度开发的一款免费使用的富文本编辑器。
先前就一直使用Ueditor,觉得功能挺多的,而且还给出了详细的文档,供二次开发。
但Ueditor已经出新的版本(和先前版本很不相同),网上很多的教程还都是旧的。使得在开发时,老被误导。
引用Ueditor
引入js文件
<script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script> //配置文件
<script type="text/javascript" charset="utf-8" src="ueditor.all.js"> </script> //需要进行二次开发,请使用该文件。
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script> //中文语言
html代码
<textarea id="editor"></textarea>
实例化编辑器
<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>
ueditor.config.js文件简单分析
配置ueditor富文本编辑器所在位置
在ueditor.config.js文件中,有一个变量URL
原文为:
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
建议修改成Ueditor所在目录,很多时候,是因为这个URL配置的问题,使得Ueditor加载失败。
配置工具栏(全文搜索以下关键字)
toolbars:
删除或修改相应单词位置,就可修改工具栏。
当然也可以在初始化页面中,自定义工具栏的工具。
serverUrl:
服务器统一请求接口路径
Ueditor有相应的php文件提供文件上传接口,但是对于网站来说,这是不安全的。建议网站开发者,根据这里的配置,自行修改上传接口。
elementPathEnabled:
显示元素路径,默认是显示
将这里的配置打开,改为false,就可以去除富文本编辑器底部的元素路径
一般编辑器是不会出现“文字统计”,但在Ueditor中出现了这个,而且还不能通过配置去除。那么只能通过控制css文件来实现了。直接display:none; //^_^
Ueditor二次开发
首先添加按钮
在ueditor.config.js的toolbars添加工具命名,再添加中文注释
如:
toolbars:[['fristdirectory']],
labelMap:{ 'fristdirectory':'二次开发'},
在ueditor.all.js文件中添加触发命令
var btnCmds = ['fristdirectory'];
在ueditor.css文件中,以如下格式添加css代码
.edui-for-fristdirectory .edui-icon{
background:url("../images/icons.png") -755px -80px no-repeat !important;
60px !important;
height:20px !important;
}
执行命令代码
baidu.editor.commands['fristdirectory'] = { execCommand : function() {
//当你点击按钮时编辑区域已经失去了焦点,如果直接用getText将不会得到内容,所以要在选回来,然后取得内容
var range = UE.getEditor('editor').selection.getRange();
range.select();
var $text = UE.getEditor('editor').selection.getText();
UE.getEditor('editor').execCommand('insertHtml', "<b>$text</b>");
}
};
上面的例子将选中区域文字加粗