The officially provided editor has too few functions
No font color, cannot upload pictures, videos and other extensions
The official documentation makes it very clear that simple rich text using layui is indeed very convenient, but there are many missing elements. There are no simple titles, elements, etc. Editor, I was troubled by this at first. The cost of temporarily switching to rich text is too high. Fortunately, I discovered the rich text adapted by Daniel based on layedit;
1. According to layedit provided by official documents
layui.use('layedit', function(){
var layedit = layui.layedit;
/**
*layedit的上传图片
*/
layedit.set({
uploadImage: {
url: '/upload/layuiUploadOne' //接口url
,type: 'post' //默认post
}
});
layedit.build('demo', {
height: 500 //设置编辑器高度
});
});The approximate effect is as follows Rich text editor - online demonstration - 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', //接口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赋值结束（固定备注）
});Original reference code
<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) {
//预读本地文件示例，不支持ie8
obj.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>Reprinted from: layui uses rich text and has used the third-party plug-in Kz.layedit to optimize layui's rich text_layui-knifez_source plus's blog-CSDN blog
GIT source code Kz.layedit: An expansion of layui.layedit, based on layui v2.4.3. Added HTML source code mode, table insertion, batch upload of pictures, picture insertion, hyperlink insertion function optimization, video insertion function, full screen function, paragraph , font color, background color setting, anchor point setting and other functions. Kz.layedit package resource address: https://download.csdn.net/download/wybshyy/88314305
0 points