Layui富文本视频等多功能

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;
        });
    });

结果就是这样啦 file

扫描下方二维码,关注本人公众号:filefile

__中国好码农

猜你喜欢