您的位置:

layedit富文本编辑器详解

一、功能介绍

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

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

二、使用方法

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

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <title>layedit富文本编辑器</title>
   <link rel="stylesheet" href="layui/css/layui.css">
   <script src="layui/layui.js"></script>
 </head>
 <body>
   <textarea id="content" name="content"></textarea>
   <script>
     layui.use('layedit', function(){
       var layedit = layui.layedit;
       layedit.build('content');
     });
   </script>
 </body>
</html>

三、工具栏定制

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": "http://cdn.xxx.com/abc.jpg"
  }
}

其中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);
     }
   });
});