以前的旧的富文本的代码修改后样式会变

很早之前使用的是CKeditor，一个古老的富文本编辑器吧。因为中途一直会出现修改带吗时候变得格式错乱，所以那时候发布文章，最好就一次性到位。基本不敢怎么修改。

我网站重构之后，把富文本编辑器升级成了wangeditor。这次我亲自体验一下修改代码块，看会不会保持之前的样式。

下面是代码

首次保存

二次保存还是会变~~~，以后再想个办法解决吧

<!--如果想使用其他的editor 推荐Simditor   -->
<script src="__STATIC__/wangEditor/wangEditor.min.js"></script>
<script type="text/javascript">

    $(function (){

        const E = window.wangEditor
        const  editor = new E('#editor')
        // 或者 var editor = new E( document.getElementById('editor') )
        // 设置编辑区域高度为 500px
        console.log(editor.config);
        editor.config.height = 800
        editor.config.zIndex = 500

        // 配置服务器端地址
        editor.config.uploadFileName = 'file';
        editor.config.uploadImgServer = "{:url('Upload/wang_editor_upload')}";
        editor.create()
        E.fullscreen.init('#editor');
    });



    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
            elem: '#test999' //绑定元素
            ,url: "{:url('Upload/uploadword')}" //上传接口
            ,accept: "file"
            ,done: function(res){
                //上传完毕回调
                console.log(res.array)
                editor.txt.html(res.array[0]) // 重新设置编辑器内容
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    layui.use(['form'], function(){
        var form = layui.form;
        //文章提交保存
        form.on('submit(info)', function(data){
            var val = editor.txt.html()
			data.field.info = val;
            console.log(data.field);
            var url = "{:url('article/save')}";
            $.post(url,data.field,function (e) {
                if(e.code ==200){
                    success(e.msg);
                    setTimeout("location.reload()",2000);
                }else {
                    error(e.msg);
                }
            })
            return false;
        });
        form.on('submit(draft)', function(data){
            var temp = data.field;
            temp.status = 2; //草稿
            var val = editor.txt.html()
            temp.info = val;
            console.log(temp);
            var url = "{:url('article/save')}";
            $.post(url,temp,function (e) {
                if(e.code ==200){
                    success(e.msg);
                    setTimeout("location.reload()",2000);
                }else {
                    error(e.msg);
                }
            })

        });

        //ajax获取分类数据
        function getCate(pid,name,id){
            var url = "{:url('article/get_cate')}";
            $.post(url,{pid:pid},function (e) {
                //console.log(e)
                var html="";
                var data = e.data;
                html += '<select name="cate_id" id="'+name+'_id" lay-filter="'+id+'" lay-verify="required">';
                html += '<option value="">请选择</option>';
                for (var i = 0;i<data.length;i++){
                    html += "<option  value='"+data[i].id+"'>"+data[i].name+"</option>";
                }
                if(data.length > 0){
                    $("#"+id).html(html);
                }else {
                    $("#"+id).children().remove();
                }
                html += '</select>';
                form.render();
            })

        };
        getCate(0,'cate_id','cate1');

        //目前系统无三级分类，故二级即可实现需求
        form.on('select(cate1)', function(data){
            //console.log(data.elem); //得到select原始DOM对象
            //console.log(data.value); //得到被选中的值
            //console.log(data.othis); //得到美化后的DOM对象
            getCate(data.value,"cate_id",'cate2')
        });
    });



</script>

第二段代码

 //目前系统无三级分类，故二级即可实现需求
            form.on('select(cate1)', function(data){
                //console.log(data.elem); //得到select原始DOM对象
                //console.log(data.value); //得到被选中的值
                //console.log(data.othis); //得到美化后的DOM对象
                getCate(data.value,"cate_id",'cate2')
            });