官方提供的编辑器功能太少
没有字体颜色,不能传图片,视频等扩展
官方文档说的很清楚,简易的富文本使用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', //接口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赋值结束(固定备注)
});
原参考代码
<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>
转自: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积分