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;
});
});
结果就是这样啦
扫描下方二维码,关注本人公众号:
__中国好码农
猜你喜欢
抖音接入
阅读 2771PHP 接入抖音开放平台
微擎常用记录
阅读 1337微擎常用记录
Laravel邮箱推送
阅读 2604Laravel发送邮件
Swoole 实现长连接
阅读 3289Swoole 实现长连接,心跳
基于 Swoole 实现简单的 WebSocket 服务器及客户端
阅读 1937基于 Swoole 实现简单的 WebSocket 服务器及客户端
黑客、后门
阅读 2361留下的网站后门,可以作什么?
在 Laravel 中集成 Swoole 实现 WebSocket 服务器
阅读 3078基于 LaravelS 扩展包把 Swoole 集成到 Laravel 项目来实现 WebSocket 服务器,以便与客户端进行 WebSocket 通信从而实现广播功能。
PHP定时任务
阅读 2160PHP框架Laravel定时任务的实现