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;
});
});
结果就是这样啦
扫描下方二维码,关注本人公众号:
__中国好码农
猜你喜欢
在 Laravel 中集成 Swoole 实现 WebSocket 服务器
阅读 2467基于 LaravelS 扩展包把 Swoole 集成到 Laravel 项目来实现 WebSocket 服务器,以便与客户端进行 WebSocket 通信从而实现广播功能。
Swoole 实现长连接
阅读 2537Swoole 实现长连接,心跳
Resultful API规范
阅读 817什么是resultful
基于 Swoole 实现简单的 WebSocket 服务器及客户端
阅读 1327基于 Swoole 实现简单的 WebSocket 服务器及客户端
Swoole 扩展安装与使用入门
阅读 1916Swoole从入门到实战
Laravel邮箱推送
阅读 1954Laravel发送邮件
Laravel验证码
阅读 722Composer生成Laravel验证码
LaravelS基于Swoole实现高性能 HTTP 服务器
阅读 1783LaravelS基于Swoole 配置nginx等