- 使用
- 基础方法
- 编辑器基本设置
- 自定义工具Bar
- 插入图片接口
- 下版更新预告

-

#  富文本编辑器文档 - layui.layedit

国内外有许多优秀、强大的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以外的全部浏览器。

<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提供了相当精简的方法，如下：

方法名 | 描述
--- | ---
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

通过下述方式可自定义编辑器的工具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 - 在每一个细节中，用心与你沟通