layui使用富文本已经使用第三方插件Kz.layedit来优化layui的富文本

官方提供的编辑器功能太少

没有字体颜色，不能传图片，视频等扩展

官方文档说的很清楚，简易的富文本使用layui提供的的确十分方便，但是缺少的元素很多。像什么标题，元素，等简单的都没有。小编我当初页为此苦恼啊。临时换富文本，成本太高了。幸好发现了大牛在layedit基础上改编的富文本；

1.根据官方文档提供的layedit


   layui.use('layedit', function(){
        var layedit = layui.layedit;
        /**
         *layedit的上传图片
         */
        layedit.set({
            uploadImage: {
                url:  '/upload/layuiUploadOne' //接口url
                ,type: 'post' //默认post
            }
        });
        layedit.build('demo', {
            height: 500 //设置编辑器高度
        });
 
    });

大概效果如下富文本编辑器- 在线演示 - Layui


"width:100%;">
	"txtaContentGuDing"</span> style=<span class="hljs-string">"display: none;"</span>>

"hdContentGuDing" style="display: none;"><%=strTemplContentGuDing %>
//赋值的时候后台取到的值临时放在这里
layui.use(['form', 'layedit', 'upload', 'laydate'], function () {
var form = layui.form;
var layedit = layui.layedit;
var laydate = layui.laydate;
var $ = layui.$;
var upload = layui.upload;
layedit.set({
uploadImage: {
url: '/layeditUPIMG.ashx', //接口url
type: 'post' //默认post
}
});
//layedit配置开始（固定备注）
//layedit.set一定要放在 layedit.build 前面，否则配置全局接口将无效。
indexsGuDing = layedit.build('txtaContentGuDing', {//'html', 'code',
tool: ['colorpicker', 'fontBackColor', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontfomatt', 'colorpicker', 'face', '|', 'left', 'center', 'right', '|', 'link', 'unlink'],
height: 300, // 设置编辑器高度
});
//layedit配置结束（固定备注）
//layedit赋值开始（固定备注）
var strContentGuDing = $("#hdContentGuDing").html(); //这里用DIV来临时存值，是因为内容有图片，所以不能用hidden控件
if (strContentGuDing != "") {
layedit.setContent(indexsGuDing, strContentGuDing, false);//flag是true，是追加模式，flag是false，赋值模式
}
//layedit赋值结束（固定备注）
});

原参考代码

转自：layui使用富文本已经使用第三方插件Kz.layedit来优化layui的富文本_layui-knifez_源码plus的博客-CSDN博客

GIT源代码Kz.layedit: 对layui.layedit的拓展，基于layui v2.4.3.增加了HTML源码模式、插入table、批量上传图片、图片插入、超链接插入功能优化、视频插入功能、全屏功能、段落、字体颜色、背景色设置、锚点设置等功能。 Kz.layedit包资源地址：https://download.csdn.net/download/wybshyy/88314305

0积分