一、功能介绍
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);
}
});
});
原创文章，作者：OUXRZ，如若转载，请注明出处：https://www.506064.com/n/369320.html
微信扫一扫 
支付宝扫一扫 