Layui超实用10篇技术解决方案：https://blog.csdn.net/libusi001/article/details/100065911
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
一、Layui富文本框layedit
<form class="layui-form" action="" lay-filter="example">
<input type="text" name="id" style="display: none">
<div class="layui-form-item">
<label class="layui-form-label">xx标题</label>
<div class="layui-input-block">
<input type="text" name="title" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">xx简介</label>
<textarea id="vulnerabilityIntroduction" name="vulnerabilityIntroduction" style="display: none;"></textarea>
</div>
<div class="layui-form-item">
<label class="layui-form-label">xx公告</label>
<textarea id="vulnerabilityAnnouncement" name="vulnerabilityAnnouncement" style="display: none;"></textarea>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="submit" style="display: none">立即提交</button>
</div>
</div>
</form>二、建立编辑器
1、建立编辑器方法layedit.build(id, options)
<textarea id="demo" style="display: none;"></textarea>
<script>
layui.use('layedit', function(){
var layedit = layui.layedit;
//建立编辑器
layedit.build('demo', {
height: 180 //设置编辑器高度
});
});
</script>2、编辑器常用参数options，可提供支持的参数如下表
| 属性 | 类型 | 描述 |
|---|---|---|
| tool | Array | 重新定制编辑器工具栏，如： tool: ['link', 'unlink', 'face'] |
| hideTool | Array | 不显示编辑器工具栏，一般用于隐藏默认配置的工具bar |
| height | Number | 设定编辑器的初始高度 |
| uploadImage | Object | 设定图片上传接口，如：uploadImage: {url: '/upload/', type: 'post'} |
三、Layui富文本常用方法
| 方法名 | 描述 |
|---|---|
| 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： 同上 |
四、其他用法
1、自定义工具Bar
（1）示例
layedit.build('id', {
tool: ['left', 'center', 'right', '|', 'face']
}); （2）可选bar
tool: [
'strong' //加粗
,'italic' //斜体
,'underline' //下划线
,'del' //删除线
,'|' //分割线
,'left' //左对齐
,'center' //居中对齐
,'right' //右对齐
,'link' //超链接
,'unlink' //清除链接
,'face' //表情
,'image' //插入图片
,'help' //帮助
]2、插入图片接口
（1）代码
layedit.set({
uploadImage: {
url: '' //接口url
,type: '' //默认post
}
});
//注意：layedit.set 一定要放在 build 前面，否则配置全局接口将无效。
layedit.build('demo'); //建立编辑器（2）注意事项
LayEdit并不提供服务端的图片接受，但你需要在图片上传成功后对LayEdit返回如下格式的JSON信息：
layui.code
{
"code": 0 //0表示成功，其它失败
,"msg": "" //提示信息 //一般上传失败后返回
,"data": {
"src": "图片路径"
,"title": "图片名称" //可选
}
}五、实际应用
1、建立编辑器
layui.use(['form', 'layedit', 'laydate'], function () {
var form = layui.form
, layer = layui.layer
, layedit = layui.layedit
, laydate = layui.laydate;
var aa = layedit.build('vulnerabilityIntroduction', {
height: 300
});
var bb = layedit.build('vulnerabilityAnnouncement', {
height: 300
});2、监听提交
//监听提交
form.on('submit(demo1)', function (data) {
//新属性赋值
var vulnerabilityIntroduction = layedit.getContent(aa);
var vulnerabilityAnnouncement = layedit.getContent(bb);
var bean = data.field;
bean.vulnerabilityIntroduction = vulnerabilityIntroduction;
bean.vulnerabilityAnnouncement = vulnerabilityAnnouncement;
$.ajax({
async: false,
type: "POST",
url: ctxPath + 'demo/add',
data: bean,
success: function (result) {
layer.alert("新增成功");
if (result.code === 0) {
layer.alert("新增成功");
}
}
});
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
parent.$('.layui-laypage-btn').click();
});
有用请点赞，养成良好习惯！
疑问、交流、鼓励请留言！
