UEditor 是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。
1.下载编辑器
到官网下载 UEditor 最新版：[官网地址]
2、创建demo文件
解压下载的包，在解压后的目录创建 demo.html 文件，填入下面的html代码
ueditor demo
3、在浏览器打开demo.html
如果看到了下面这样的编辑器，恭喜你，初次部署成功！
demo.png
4、传入自定义的参数
编辑器有很多可自定义的参数项，在实例化的时候可以传入给编辑器：
var ue = UE.getEditor('container', {
autoHeight: true,
……
});
配置项也可以通过 ueditor.config.js 文件修改，具体请看 6
5、设置和读取编辑器的内容
var ue = UE.getContent();
//对编辑器的操作最好在编辑器ready之后再做
ue.ready(function() {
//设置编辑器的内容
ue.setContent('hello');
//获取html内容，返回: hello
var html = ue.getContent();
//获取纯文本内容，返回: hello
var txt = ue.getContentTxt();
});
6、配置项修改说明
- 方法一：修改 ueditor.config.js 里面的 toolbars ；
- 方法二：实例化编辑器的时候传入 toolbars 参数
- 简单列表：
toolbars: [
['fullscreen', 'source', 'undo', 'redo', 'bold']
]
- 多行列表
var options = {
initialFrameWidth: 766, //初化宽度（内容750）
initialFrameHeight: 400, //初化高度
focus: false, //初始化时，是否让编辑器获得焦点true或false
maximumWords: 9999, //允许的最大字符数
pasteplain: false, //是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴
catchRemoteImageEnable: true, //是否开启远程图片抓取,默认开启
//readonly : false, //编辑器初始化结束后,编辑区域是否是只读的，默认是false
topOffset:0, //浮动时工具栏距离浏览器顶部的高度,用于某些具有固定头部的页面
toolbars: [
['fullscreen', 'source', '|', 'undo', 'redo', '|',
'selectall', 'cleardoc', 'removeformat', 'formatmatch', '|',
'blockquote', 'pasteplain', '|',
'simpleupload', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'background', '|',
'link', 'unlink', 'anchor', '|',
'horizontal', 'wordimage', '|',
'inserttable', 'deletetable', 'mergecells', 'splittocells', 'charts'],
['bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
'paragraph', 'indent', '|',
'fontfamily', 'fontsize', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase']
]
};
editor = new UE.ui.Editor(options);
editor.render("goods_content"); // 指定 textarea 的 id 为 goods_content
//配置项里用竖线 '|' 代表分割线
上面的例子：
ueidtor.png
7、完整的按钮列表
toolbars: [
[
'anchor', //锚点
'undo', //撤销
'redo', //重做
'bold', //加粗
'indent', //首行缩进
'snapscreen', //截图
'italic', //斜体
'underline', //下划线
'strikethrough', //删除线
'subscript', //下标
'fontborder', //字符边框
'superscript', //上标
'formatmatch', //格式刷
'source', //源代码
'blockquote', //引用
'pasteplain', //纯文本粘贴模式
'selectall', //全选
'print', //打印
'preview', //预览
'horizontal', //分隔线
'removeformat', //清除格式
'time', //时间
'date', //日期
'unlink', //取消链接
'insertrow', //前插入行
'insertcol', //前插入列
'mergeright', //右合并单元格
'mergedown', //下合并单元格
'deleterow', //删除行
'deletecol', //删除列
'splittorows', //拆分成行
'splittocols', //拆分成列
'splittocells', //完全拆分单元格
'deletecaption', //删除表格标题
'inserttitle', //插入标题
'mergecells', //合并多个单元格
'deletetable', //删除表格
'cleardoc', //清空文档
'insertparagraphbeforetable', //"表格前插入行"
'insertcode', //代码语言
'fontfamily', //字体
'fontsize', //字号
'paragraph', //段落格式
'simpleupload', //单图上传
'insertimage', //多图上传
'edittable', //表格属性
'edittd', //单元格属性
'link', //超链接
'emotion', //表情
'spechars', //特殊字符
'searchreplace', //查询替换
'map', //Baidu地图
'gmap', //Google地图
'insertvideo', //视频
'help', //帮助
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'forecolor', //字体颜色
'backcolor', //背景色
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'fullscreen', //全屏
'directionalityltr', //从左向右输入
'directionalityrtl', //从右向左输入
'rowspacingtop', //段前距
'rowspacingbottom', //段后距
'pagebreak', //分页
'insertframe', //插入Iframe
'imagenone', //默认
'imageleft', //左浮动
'imageright', //右浮动
'attachment', //附件
'imagecenter', //居中
'wordimage', //图片转存
'lineheight', //行间距
'edittip ', //编辑提示
'customstyle', //自定义标题
'autotypeset', //自动排版
'webapp', //百度应用
'touppercase', //字母大写
'tolowercase', //字母小写
'background', //背景
'template', //模板
'scrawl', //涂鸦
'music', //音乐
'inserttable', //插入表格
'drafts', // 从草稿箱加载
'charts', // 图表
]
]
8.附录
内容编辑人员有时候偷懒，不自己编辑，而是复制粘贴，也不怎么注重细节。为了让文档在前端显示格式统一，一般需要给文档加一些自定义样式。大致如下：
//移动端css
* {margin:0;padding:0;}
body,html {
width:100%;
overflow-x:hidden;
}
a {text-decoration:none;}
.view {
padding:0 .12rem;
background-color:#fff;
/*解决app调用H5时滑动不灵敏*/
-webkit-overflow-scrolling: touch;
}
/*基础文本样式*/
.content{
padding: .1rem;
font-size: .16rem !important;
line-height: .24rem;
color: #555;
/*解决英文及数字不换行问题/
word-wrap:break-word;
overflow: hidden;
}
/*标题*/
.content h1{
margin: .2rem 0;
font-size: .2rem !important;
font-weight: 800;
text-align: center;
}
.content h2{
margin: .18rem 0 .12rem;
font-size: .18rem !important;
font-weight: 800;
}
.content h3{
margin: .16rem 0 .12rem;
font-size: .17rem !important;
}
.content p{
margin: .12rem 0;
}
/*图片显示，小图标在文字中间*/
.content p img{
margin: .15rem 0;
max-width: 100% !important;
height: auto !important;
vertical-align: middle;
}
/*引用*/
.content blockquote{
padding: .1rem .2rem;
margin: 0;
font-size: .16rem !important;
border-left: .05rem solid #eee;
}
.content blockquote p{
margin: 0;
}
/*插图*/
.content figure{
margin: .12rem 0;
font-size: .14rem !important;
}
.content figure img{
max-width: 100% !important;
}
/*插图文本*/
.content figcaption {
margin-top: .05rem;
padding: 0 .2rem;
font-weight: 400;
clear: both;
color: #999;
font-size: .12rem !important;
line-height: .2rem;
text-align: center;
display: block;
}
更多详细文档：
UEditor 官网：http://ueditor.baidu.com
UEditor API 文档：http://ueditor.baidu.com/doc
UEditor Github 地址：http://github.com/fex-team/ueditor