layui使⽤富⽂本已经使⽤第三⽅插件Kz.layedit来优化layui的
富⽂本
layui提供的精简的富⽂本
如果你正苦苦寻⼀款轻量的Web富⽂本编辑器，那么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提供的的确⼗分⽅便，但是缺少的元素很多。像什么标
题，元素，等简单的都没有。⼩编我当初页为此苦恼啊。临时换富⽂本，成本太⾼了。幸好发现了⼤⽜在layedit基础上改编的富⽂本；
2.使⽤第三⽅插件丰富layui的富⽂本
<!--富⽂本需要的链接-->
<link href="/Kz.layedit/Content/Layui-KnifeZ/css/layui.css" rel="stylesheet"/>
<script src="/Kz.layedit/Content/Layui-KnifeZ/layui.js"></script>
<script src="/Kz.layedit/Content/ace/ace.js"></script>
前段页⾯：
<div >
<form class="layui-form"> <!-- 提⽰：如果你不想⽤form，你可以换成div等任何⼀个普通元素 -->
<div class="layui-form-item">
<label class="layui-form-label">活动⾸图</label>
<div class="layui-input-inline">
<input id="activeLogo" type="text" name="activeLogo" >
<button type="button" class="layui-btn" id="uploadImage"><i class="layui-icon"> </i>更换图⽚</button>
<div class="layui-upload-list">
<img class="layui-upload-img" height="100px" width="100px" id="showImage">
<p id="demoText"></p>
</div>
</div>
<label class="layui-form-label">活动简介</label>
<div class="layui-input-inline">
<textarea name="introduction" placeholder="请输⼊活动简介内容"
class="layui-textarea"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">头标题1</label>
<div class="layui-input-inline">
<input type="text" name="headTitle1" lay-verify="required" placeholder="请输⼊" autocomplete="off"
class="layui-input">
</div>
<label class="layui-form-label">头标题2</label>
<div class="layui-input-inline">
<input type="text" name="headTitle2" lay-verify="required" placeholder="请输⼊" autocomplete="off"
class="layui-input">
</div>
<label class="layui-form-label">内容标题</label>
<div class="layui-input-inline">
<input type="text" name="title" lay-verify="required" placeholder="请输⼊" autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-inline">
<input type="text" id="startTime" placeholder="yyyy-MM-dd HH:mm:ss" name="startTime"
lay-verify="required" placeholder="请输⼊" autocomplete="off"
class="layui-input">
</div>
<label class="layui-form-label">结束时间</label>
<div class="layui-input-inline">
<input type="text" id="overTime" placeholder="yyyy-MM-dd HH:mm:ss" name="overTime" lay-verify="required"
placeholder="请输⼊" autocomplete="off"
class="layui-input">
</div>
<label class="layui-form-label">⼈数上限</label>
<div class="layui-input-inline">
<div class="layui-input-inline">
<input type="text" name="registrationCeilingNumber" lay-verify="required" placeholder="请输⼊"
autocomplete="off"
class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">活动内容</label>
<div class="layui-input-block">
<textarea id="demo" lay-verify="content" name="matchContent" ></textarea>
</div>
</div>
<br>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="addActive">⽴即提交</button>
</div>
</div>
<!-- 更多表单结构排版请移步⽂档左侧【页⾯元素-表单】⼀项阅览 -->
</form>
</div>
js页⾯代码：
<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 = der({
elem: '#uploadImage'
, url: '/upload/layuiUploadOne'
, before: function (obj) {
//预读本地⽂件⽰例，不⽀持ie8
obj.preview(function (index, file, result) {
$('#showImage').attr('src', result); //图⽚链接（base64）
});
}
, done: function (res) {
//如果上传失败
if (de > 0) {
return layer.msg('上传失败');
}
$("#activeLogo").val(res.data.src);
//上传成功
return layer.msg('图⽚上传成功！');
}
, error: function () {
//演⽰失败状态，并实现重传
var demoText = $('#demoText');
demoText.html('<span >上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'); demoText.find('.demo-reload').on('click', function () {
uploadInst.upload();
});
}
});
//⾃定义⽇期格式
//⾃定义⽇期格式
var myDate = new Date();
elem: '#startTime',
type: 'datetime'
});
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: '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',//表格
, 'table',//表格
'customlink'//⾃定义链接
, 'fullScreen',//全屏
'preview'//预览
]
});
var index = layedit.build('demo', {
height: 300 //设置编辑器⾼度，
});//建⽴编辑器
//将编辑器内容同步到textarea中
layedit.sync(index);
form.verify({
content: function (value) {
return layedit.sync(index);
}
});
<('submit(addActive)', function (data) {
console.log(data.field);//当前容器的全部表单字段，名值对形式：{name: value}
return false; //阻⽌表单跳转。如果需要表单跳转，去掉这段即可。
});
});
</script>
效果图：
有啥不懂得⼩伙伴们加流啦：852665736；本致⼒于⼀同进步的⼩伙伴们，⼤家⼀起交流探讨，在陌⽣的城市感受温暖；
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论