layui使用富文本已经使用第三方插件Kz.layedit来优化layui的富文本

最新推荐文章于 2022-02-23 10:23:20 发布

源码plus

最新推荐文章于 2022-02-23 10:23:20 发布

阅读量3.3k

点赞数

分类专栏： layui前端框架的使用文章标签： layui css html

本文链接：https://blog.youkuaiyun.com/qq_38310446/article/details/103635481

版权

layui前端框架的使用专栏收录该内容

5 篇文章

订阅专栏

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 style="width: 1000px;height: 700px;margin: 0px auto;">
    <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" style="display: none;">
                <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 style="height: 150px;resize: none;" 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">
                <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" style="display: none;"></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 = upload.render({
            elem: '#uploadImage'
            , url: '/upload/layuiUploadOne'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#showImage').attr('src', result); //图片链接（base64）
                });
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                $("#activeLogo").val(res.data.src);
                //上传成功
                return layer.msg('图片上传成功！');
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });


        //自定义日期格式
        var myDate = new Date();
        laydate.render({
            elem: '#startTime',
            type: 'datetime'
        });
        laydate.render({
            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: 'http://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',//表格
                'customlink'//自定义链接
                , 'fullScreen',//全屏
                'preview'//预览
            ]
        });
        var index = layedit.build('demo', {
            height: 300 //设置编辑器高度，
        });//建立编辑器
        //将编辑器内容同步到textarea中
        layedit.sync(index);
        form.verify({
            content: function (value) {
                return layedit.sync(index);
            }
        });

        form.on('submit(addActive)', function (data) {
            console.log(data.field);//当前容器的全部表单字段，名值对形式：{name: value}
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });
</script>

效果图：