layedit富文本编辑器详解

一、功能介绍

layedit是一款基于layui框架的富文本编辑器，适用于后台管理系统、博客编辑等场景，提供了很多实用的功能，包括但不限于：

字体、字号、颜色设置加粗、斜体、下划线、删除线等文字样式设置图片、链接、表格、列表插入源代码、全屏、撤销、重做等操作自定义工具栏

二、使用方法

使用layedit非常简单，只需要引入layui和layedit的脚本文件，然后在需要使用编辑器的地方添加一个textarea元素即可：




 
   
   layedit富文本编辑器

三、工具栏定制

layedit默认提供的工具栏可以满足常规需求，但如果需要添加、删除、修改工具栏的按钮，就需要使用定制功能。

首先，在layedit.build()中传入一个配置对象，配置项包括：

tool: 工具栏数组 height: 编辑区域高度 uploadImage: 图片上传接口 hideTool: 隐藏工具栏 devmode: 开发者模式（查看html源码）

然后在tool中定义需要的按钮，示例代码如下：


layui.use('layedit', function(){
   var layedit = layui.layedit;
   //自定义工具栏
   layedit.build('content', {
     tool: [
       'strong', 'italic', 'underline', 'del', '|',
       'color', 'link', 'image', 'blockquote', '|',
       'table', 'face', 'code', '|', 'left', 'center', 'right'
     ]
   });
});

上述代码定义了一个包含18个按钮的工具栏，可根据自己的需要修改。

四、图片上传

layedit提供了图片上传功能，只需要在layedit.build()中定义uploadImage参数，接口返回值格式如下：


{
  "code": 0,
  "msg": "",
  "data": {
    "src": ""
  }
}

其中code为0表示上传成功，data.src为图片的线上地址。

示例代码：


layedit.build('content', {
   uploadImage: {
     url: '/upload/image',
     type: 'post'
   }
});

五、事件监听

layedit提供了多个事件供开发者监听。

tool(elem, edit): 工具栏被点击时触发 ready(index): 加载完毕时触发 change(index): 内容改变时触发 face(index): 表情被点击时触发 insert(html): 插入内容后触发

示例代码：


layui.use('layedit', function(){
   var layedit = layui.layedit;
   layedit.build('content', {
     tool: [
       'strong', 'italic', 'underline', 'del', '|',
       'color', 'link', 'image', 'blockquote', '|',
       'table', 'face', 'code', '|', 'left', 'center', 'right'
     ],
     uploadImage: {
       url: '/upload/image',
       type: 'post'
     },
     //监听事件
     tool: function(elem, edit){
       console.log(elem); //工具栏元素
       console.log(edit); //编辑器实例
     },
     ready: function(index){
       console.log(index); //编辑器索引
     },
     change: function(index){
       console.log(index);
     },
     face: function(index){
       console.log(index);
     },
     insert: function(html){
       console.log(html);
     }
   });
});