一、功能介绍
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); } }); });