在项目中引入富文本编辑器UEditor

在项目中引入富文本编辑器UEditor

什么是UEditor?

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。UEdito下载：下载地址

UEditor使用方法：

第一步：

下载解压，把解压的utf8-php目录复制到项目目录中（一般在public目录下）

第二步：

在html页面引入三个文件，修改src,引入正确的资源路径。

<script type="text/javascript" src="ueditor/ueditor.config.js"></script> 
<script type="text/javascript" src="ueditor/ueditor.all.min.js"></script> 
<script type="text/javascript" src="ueditor/lang/zh-cn/zh-cn.js"></script>

第三步

在html页面，添加一个容器，用于载入富文本编辑器。

<textarea  name="goods_intro" id="goods_intro" style="width: 800px;height: 400"></textarea>

第四步

在js中加入下面一句代码

//将富文本编辑器嵌入到id=goods_intro元素里面
var ue = UE.getEditor('goods_intro');

最后

如果要生成精简富文本编辑器，则需要修改配置文件：ueditor.config.js，中的toolbars配置,里面的toolbars选项是配置工具栏上面显示的内容的，一般不需要修改，如果想修改，则通过如下方式修改（在第四部=步定义ue时顺便给定第二个参数）；

UE.getEditor('goods_intro',{
	toolbars: [[
            'fullscreen', 'source', '|', 'undo', 'redo', '|',
            'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
            'rowspacingtop', 'rowspacingbottom', 'lineheight', '|',
            'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',
            'directionalityltr', 'directionalityrtl', 'indent'
        ]]
});