国内外有许多优秀、强大的HTML编辑器，但普遍都有一个共性：异常地臃肿（少则几千行，多则上万行代码）、UI陈旧，并且基本都好几年没更新了。而现在，随着Layui的发布，我们有必要重新为富文本做一些新的定义。LayEdit仍旧遵循极简的设计风格，无论是UI上，还是接口使用上，都尽可能地避免一些繁杂的功能和配置。如果你正苦苦寻找一款轻量的Web富文本编辑器，那么LayEdit会是你不错的选择。
模块加载名称：layedit
跟那些过往的编辑器一样，你需要放置一个标签（一般为textarea文本域）作为编辑器的目标元素，然后调用 layedit.build('id') 即可，如下所示：
<textarea id="demo" style="display: none;"></textarea>
<script>
layui.use('layedit', function(){
var layedit = layui.layedit;
layedit.build('demo'); //建立编辑器
});
</script>
然后你会看到一个如下模样（部分工具Bar未配置出来），它跟Layui的所有存在体一样，兼容IE6/7以外的全部浏览器。
LayEdit提供了相当精简的方法，如下：
| 方法名 | 描述 |
|---|---|
| var index = layedit.build(id, options) |
用于建立编辑器的核心方法
index：即该方法返回的索引 参数 id： 实例元素（一般为textarea）的id值 参数 options：编辑器的可配置项，下文会做进一步介绍 |
| layedit.set(options) |
设置编辑器的全局属性
即上述build方法的options |
| layedit.getContent(index) |
获得编辑器的内容
参数 index： 即执行layedit.build返回的值 |
| layedit.getText(index) |
获得编辑器的纯文本内容
参数 index： 同上 |
| layedit.sync(index) |
用于同步编辑器内容到textarea（一般用于异步提交）
参数 index： 同上 |
| layedit.getSelection(index) |
获取编辑器选中的文本
参数 index： 同上 |
在建立编辑器的方法 layedit.build(id, options) 的第二个参数（options）中，允许我们对编辑器进行一些设置，如：
layedit.build('id', {
height: 180 //设置编辑器高度
});
options可提供支持的参数如下表
| 属性 | 类型 | 描述 |
|---|---|---|
| tool | Array | 重新定制编辑器工具栏，如： tool: ['link', 'unlink', 'face'] |
| hideTool | Array | 不显示编辑器工具栏，一般用于隐藏默认配置的工具bar |
| height | Number | 设定编辑器的初始高度 |
| uploadImage | Object | 设定图片上传接口，如：uploadImage: {url: '/upload/', type: 'post'} |
通过下述方式可自定义编辑器的工具Bar
layedit.build('id', {
tool: ['left', 'center', 'right', '|', 'face']
});
目前layedit可选的Bar有（顺序可以自由排列）：
tool: [
'strong' //加粗
,'italic' //斜体
,'underline' //下划线
,'del' //删除线
,'|' //分割线
,'left' //左对齐
,'center' //居中对齐
,'right' //右对齐
,'link' //超链接
,'unlink' //清除链接
,'face' //表情
,'image' //插入图片
,'help' //帮助
]
LayEdit提供了向编辑器插入图片的支持，前提是配置了 uploadImage，如：
layedit.set({
uploadImage: {
url: '' //接口url
,type: '' //默认post
}
});
//注意：layedit.set 一定要放在 build 前面，否则配置全局接口将无效。
layedit.build('demo'); //建立编辑器
也就是说LayEdit并不提供服务端的图片接受，但你需要在图片上传成功后对LayEdit返回如下格式的JSON信息：
{
"code": 0 //0表示成功，其它失败
,"msg": "" //提示信息 //一般上传失败后返回
,"data": {
"src": "图片路径"
,"title": "图片名称" //可选
}
}
也许你会觉得LayEdit的功能实在有点少吧，尤其是跟百度的UE这些重量级编辑器相比。是的，LayEdit的工具Bar还并不多，这主要是受制于Layui第一个版本的发布时间，一个功能丰富的编辑器需要较长时间的打磨，而Layui 1.0显然等不及。但我们会在后续版本视情况针对LayEdit进行功能升级，其中会包括：HTML源代码编辑、字体颜色、字体大小、字体格式、插入表格、插入列表、插入引用块、插入代码、插入附件、分割线、预览、二次开发工具Bar的接口支持等等。
在保证功能完备的同时，也会格外注重代码的轻量性。
Layui - 用心与你沟通