再谈Java web项目 关于layui 富文本（文本编辑器）的应用

我们通常在做Web项目时好始终绕不开文本编辑器，比如我们做产品描述，再比如做添加或编辑新闻等。如果没有了它就好比" 说相声的基本功少了一门：说"。为什么呢？因为Web最大的好处在于它的表现形式可以是多样式的，可以是图片，也可以是文字，也可以是视频，当然也可以是N个元素的各种组合。

PS:页面丑的一B

实现
HTML 部分

<div class="layui-form-item">
        <div class="layui-input-block">
            <label class="layui-form-label ">产品描述</label>
            <textarea id="layeditDemo"></textarea>
        </div>
    </div>

JS 富文本处理部分 我使用的是前面介绍过的LayUI 富文本插件 下载

JS处理部分

<script>
    layui.use(['layedit', 'form', 'layer','upload'], function () {
        var layedit = layui.layedit,
            upload = layui.upload,
            form = layui.form,
            $ = layui.jquery,
            layer = layui.layer;
        //文本编辑器
        layedit.set({
            //暴露layupload参数设置接口 --详细查看layupload参数说明
            uploadImage: {
                url: '/uploadFile',
                accept: 'image',
                acceptMime: 'image/*',
                exts: 'jpg|png|gif|bmp',
                size: 1024 * 10,
                data: {
                    name: "测试参数",
                    age: 99
                }
                , done: function (data) {
                    //console.log(data);
                }
            },
            uploadVideo: {
                url: 'your url',
                accept: 'video',
                acceptMime: 'video/*',
                exts: 'mp4|flv|avi|rm|rmvb',
                size: 1024 * 10 * 2,
                done: function (data) {
                    console.log(data);
                }
            }
            , uploadFiles: {
                url: 'your url',
                accept: 'file',
                acceptMime: 'file/*',
                size: '20480',
                autoInsert: true, //自动插入编辑器设置
                done: function (data) {
                    console.log(data);
                }
            }
            //右键删除图片/视频时的回调参数，post到后台删除服务器文件等操作，
            //传递参数：
            //图片： imgpath --图片路径
            //视频： filepath --视频路径 imgpath --封面路径
            //附件： filepath --附件路径
            , calldel: {
                url: 'your url',
                done: function (data) {
                    console.log(data);
                }
            }
            , rightBtn: {
                type: "layBtn",//default|layBtn|custom  浏览器默认/layedit右键面板/自定义菜单 default和layBtn无需配置customEvent
                customEvent: function (targetName, event) {
                    //根据tagName分类型设置
                    switch (targetName) {
                        case "img":
                            alert("this is img");
                            break;
                        default:
                            alert("hello world");
                            break;
                    };
                    //或者直接统一设定
                    //alert("all in one");
                }
            }
            //测试参数
            , backDelImg: true
            //开发者模式 --默认为false
            , devmode: true
            //是否自动同步到textarea
            , autoSync: true
            //内容改变监听事件
            , onchange: function (content) {

                console.log(content);
                //console.log()
            }
            //插入代码设置 --hide:false 等同于不配置codeConfig
            , codeConfig: {
                hide: true,  //是否隐藏编码语言选择框
                default: 'javascript', //hide为true时的默认语言格式
                encode: true //是否转义
                , class: 'layui-code' //默认样式
            }
            //新增iframe外置样式和js
            , quote: {
                style: ['Content/css.css'],
                //js: ['/Content/Layui-KnifeZ/lay/modules/jquery.js']
            }
            //自定义样式-暂只支持video添加
            //, customTheme: {
            //    video: {
            //        title: ['原版', 'custom_1', 'custom_2']
            //        , content: ['', 'theme1', 'theme2']
            //        , preview: ['', '/images/prive.jpg', '/images/prive2.jpg']
            //    }
            //}
            //插入自定义链接
            , customlink: {
                title: '插入layui官网'
                , href: 'https://www.layui.com'
                , onmouseup: ''
            }
            , facePath: 'http://knifez.gitee.io/kz.layedit/Content/Layui-KnifeZ/'
            , devmode: true
            , videoAttr: ' preload="none" '
            //预览样式设置，等同layer的offset和area规则，暂时只支持offset ,area两个参数
            //默认为 offset:['r'],area:['50%','100%']
            //, previewAttr: {
            //    offset: 'r'
            //    ,area:['50%','100%']
            //}
            , 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', 'video', 'attachment', 'anchors'
                , '|'
                , 'table', 'customlink'
                , 'fullScreen', 'preview'
            ]
            , height: '500px'
        });
        var ieditor = layedit.build('layeditDemo');
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#test1'
            ,url: '/uploadFile'
            ,auto: true
            ,exts: 'jpg|png|jif'
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    layer.msg('上传失败');
                }
                //上传成功
                console.log(res)
                $("#productImage").val(res.data.src)
                layer.msg('上传成功');
            }
        });

        //监听提交
        form.on('submit(saveBtn)',function(data){
            var datas=data.field;//获取数据信息
            datas.rem=layedit.getContent(ieditor)
            console.log(datas);
            //调用添加方法
            addUserSubmit(datas,index);
        });

        /**
         * 添加提交操作
         */
        function addUserSubmit(data,index){
            $.ajax({
                url:"Product/addProduct",
                type:"POST",
                contentType:"application/json",
                data:JSON.stringify(data),
                success:function(result){
                    if(result.code==200){
                        layer.msg("添加成功",{
                            icon:6,
                            time:500
                        },function(){
                            parent.window.location.reload();//重新页面
                            var iframeIndex = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(iframeIndex);
                        });

                    }else{
                        layer.msg("添加失败");
                    }
                }
            })
            return false;
        };
    });

</script>

效果：

这里只涉及存，当需要编辑赋值需要如下处理

layedit.setContent(index, content, flag);
//flag是true，是追加模式，
//flag是false，赋值模式

因为我用的是thymeleaf 这个组件思路如下：
在JS中让thymeleaf 生效（目的当然是为了取值）

至此 关于富文本控制就OK了

假设我需要把存在数据库里的富文本内容显示出来怎么做呢？很简单

<div class="layui-colla-item">
        <h2 class="layui-colla-title">产品描述</h2>
        <div class="layui-colla-content layui-show">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <td th:utext="${product.rem}"></td>
                    </div>
                </div>
            </div>
        </div>
    </div>