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

	

<%=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积分