 富文本编辑器文档 - layui.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以外的全部浏览器。

<p><a href="http://www.layui.com/" target="_blank"><u>Layui</u></a>是一款由贤心个人原创的UI框架，这正是我们对高质量的承诺。尽管现在市面上有太多依托在 <em>Vue/React</em> 光环下的前端方案，但我们仍然定位现在这样一个模式，是为了呈现一个<strong>极简</strong>的解决手段，那就是无需依赖过多看似逼格的工具，直接信手即用。而恰是因为原创，有些事情远比人们想象中的那么简单，尤其是在追求尽善尽美的强迫症的引领下，我常常徘徊在轮子的制造、摧毁又重建的漩涡中，所以<a href="http://www.layui.com/" target="_blank">Layui</a>一拖再拖，从计划到现在，似乎已经接近1年。在我全职接近两个月的SOHO后，Layui的第一个版本终于发布！</p> <p style="text-align: right"><br><br>2016.10.14</p>

LayEdit提供了相当精简的方法，如下：

在建立编辑器的方法 layedit.build(id, options) 的第二个参数（options）中，允许我们对编辑器进行一些设置，如：

layedit.build('id', {
  height: 180 //设置编辑器高度
});
      

options可提供支持的参数如下表

通过下述方式可自定义编辑器的工具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的接口支持等等。

在保证功能完备的同时，也会格外注重代码的轻量性。