Layui富文本视频等多功能
使用Layui时想让富文本多功能怎么办,首先去下载一个layedit扩展文件或直接点击此处下载,根据说明替换layedit.js,直接调用就会出现效果,注意,编辑器中点击html会出错,那是因为少引入了一个ace,js,需要扩展文件中的Content/ace/ace.js,把Content文件夹粘贴到项目中layui目录下,然后在调用的界面引入ace.js即可。
结果可以参考本人另一个博客的富文本。 从下载的 kz.layedit 富文本编辑器拓展 引入这两个js(libs/layui/layui.js,libs/layui/lay/modules/Content/ace/ace.js)
上代码:
layui.use(['util','form','laydate','layedit', 'laypage', 'layer', 'table', 'carousel', 'upload','element', 'slider'], function(){
let laydate = layui.laydate //日期
,laypage = layui.laypage //分页
,layer = layui.layer //弹层
,table = layui.table //表格
,carousel = layui.carousel //轮播
,upload = layui.upload //上传
,element = layui.element //元素操作
,slider = layui.slider //滑块
,layedit=layui.layedit//富文本
let form = layui.form;
let editIndex = layedit.build('comment_content',{
tool: [
'html', 'code', 'strong', 'italic', 'underline', 'del', 'addhr', '|', 'fontFomatt', 'colorpicker', 'face'
, '|', 'left', 'center', 'right', '|', 'link', 'unlink', 'image_alt', 'video', 'anchors'
, '|', 'fullScreen'
],
uploadImage: {
url: '{{URL("admin/imgs")}}' //图片
,type: 'post', //默认post
success:function(res){
console.log(res);
}
},uploadVideo:{//视频
url: '{{URL("admin/video")}}',
accept: 'video',
acceptMime: 'video/*',
exts: 'mp4|flv|avi|rm|rmvb'
}
}); //建立编辑器
//监听提交
form.on('submit(formDemo)', function(data){
let date=data.field;
date.pid=id;
date.content=layedit.getContent(editIndex);
date.article_id="{{$data['id']}}";
delete date.file;
if(date.content=="回复{{$user['nickname']}}:"){
layer.msg('请输入你的留言',{icon:5,time:2000}); return false;
}
$.post("{{URL('/comment')}}",date,function(res){
let code=6;
if(res.code){
code=5;
}
layer.msg(res.msg,{icon:code,time:1000},function(){
if(code==6){
window.location.reload();
}
});
})
return false;
});
});
结果就是这样啦
扫描下方二维码,关注本人公众号:
__中国好码农
猜你喜欢
Resultful API规范
阅读 1166什么是resultful
LaravelS基于Swoole实现高性能 HTTP 服务器
阅读 2169LaravelS基于Swoole 配置nginx等
基于 Swoole 实现简单的 WebSocket 服务器及客户端
阅读 1770基于 Swoole 实现简单的 WebSocket 服务器及客户端
Laravel验证码
阅读 1059Composer生成Laravel验证码
在 Laravel 中集成 Swoole 实现 WebSocket 服务器
阅读 2909基于 LaravelS 扩展包把 Swoole 集成到 Laravel 项目来实现 WebSocket 服务器,以便与客户端进行 WebSocket 通信从而实现广播功能。
抖音接入
阅读 2485PHP 接入抖音开放平台
微擎常用记录
阅读 1096微擎常用记录
黑客、后门
阅读 2062留下的网站后门,可以作什么?