基于layui扩展版本的富文本

1. 使用网址

https://knifez.gitee.io/articles/kz.layedit/

Html代码

<div>

<textarea name="content" id="content" ></textarea>

</div>

Js代码

layui.use(['form', 'jquery','laydate','layedit','upload'], function() {

var $ = layui.$;

var form = layui.form;

var laydate = layui.laydate;

var upload = layui.upload;

var layedit = layui.layedit;

//配置富文本框支持图片插入

layedit.set({

  uploadImage: {

url: //图片上传接口url

,type: 'post' //默认post

  }

});

//富文本框创建

var contentIndex = layedit.build('content',{

tool:[

'strong', 'italic', 'underline', /* 'del', , */ 'addhr', //添加水平线

'|', 'fontFomatt', 'fontfamily', 'fontSize',, //段落格式，字体样式，字体颜色

'colorpicker', 'fontBackColor', //字体颜色，字体背景色

'face', '|', 'left', 'center', 'right', '|', 'link', 'unlink',

//'image', //原版上传图片       

//'images', //多图上传

'image_alt', //上传图片拓展

//'attachment', //上传附件

//'video', //视频上传

//'anchors', //锚点

'|', 'table', //插入表格

'customlink', //插入自定义链接

'fullScreen', //全屏

'preview' //预览

]

});

layedit.sync(contentIndex); //数据同步到表单中

});

其他细节

//设置富文本不可编辑

$("#content").next().find('iframe').contents().find('body').prop("contenteditable",false);

//设置富文本右键为网页浏览器点击类型

rightBtn: {type: "default"}

图片上传接口返回类型Json类型信息

{
"code": 0 //0表示成功，其它失败
,"msg": "" //提示信息 //一般上传失败后返回
,"data": {
"src": "图片路径"
,"title": "图片名称" //可选
}
}