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

<div style="width:100%;"><textarea id="txtaContentGuDing" style="display: none;"></textarea>
</div>
<div id="hdContentGuDing" style="display: none;"><%=strTemplContentGuDing %></div>//赋值的时候后台取到的值临时放在这里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', //接口urltype: '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赋值结束（固定备注）
});

原参考代码

<script type="text/javascript">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;//普通图片上传var uploadInst = upload.render({elem: '#uploadImage', url: '/upload/layuiUploadOne', before: function (obj) {//预读本地文件示例，不支持ie8obj.preview(function (index, file, result) {$('#showImage').attr('src', result); //图片链接（base64）});}, done: function (res) {//如果上传失败if (res.code > 0) {return layer.msg('上传失败');}$("#activeLogo").val(res.data.src);//上传成功return layer.msg('图片上传成功！');}, error: function () {//演示失败状态，并实现重传var demoText = $('#demoText');demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');demoText.find('.demo-reload').on('click', function () {uploadInst.upload();});}});//自定义日期格式var myDate = new Date();laydate.render({elem: '#startTime',type: 'datetime'});laydate.render({elem: '#overTime',type: 'datetime'});//上传图片layedit.set({uploadImage: {url: '/upload/layuiUploadOne', type: 'post' //默认post},devmode: true//是否自动同步到textarea, autoSync: true//内容改变监听事件, onchange: function (content) {console.log(content);}//插入代码设置 --hide:false 等同于不配置codeConfig, codeConfig: {hide: true,  //是否隐藏编码语言选择框default: 'javascript', //hide为true时的默认语言格式encode: true //是否转义, class: 'layui-code' //默认样式}, facePath: 'http://knifez.gitee.io/kz.layedit/Content/Layui-KnifeZ/', devmode: true, videoAttr: ' preload="none" ', tool: ['html', //显示富文本源码'undo', //撤销'redo',//重做'code', //代码'strong',//加粗'italic', //斜体'underline', //下划线'del', //删除线'addhr', //水平线'|','removeformat', //清楚文字样式'fontFomatt',//段落格式'fontfamily',//字体'fontSize', //字体大小'fontBackColor',//字体背景色'colorpicker',//字体颜色'face',//表情'|','left', //左对齐'center', //居中'right', //右对齐'|',
//              'link', //链接
//              'unlink', //清除链接
//              'images', //多图上传'image_alt', //图片alt
//              'video',//视频
//              'attachment',//插入附件
//              'anchors'//添加锚点, '|', 'table',//表格'customlink'//自定义链接, 'fullScreen',//全屏'preview'//预览]});var index = layedit.build('demo', {height: 300 //设置编辑器高度，});//建立编辑器//将编辑器内容同步到textarea中layedit.sync(index);form.verify({content: function (value) {return layedit.sync(index);}});form.on('submit(addActive)', function (data) {console.log(data.field);//当前容器的全部表单字段，名值对形式：{name: value}return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。});});
</script>

转自：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积分