美文网首页
## 关于最近使用layui框架,其中富文本遇到的问题进行记录。

## 关于最近使用layui框架,其中富文本遇到的问题进行记录。

作者: lao老麻 | 来源:发表于2020-07-28 16:22 被阅读0次

    先附上layui富文本链接:layui富文本
    layui富文本的工具比较少,所以再附上layui富文本扩展链接:kz.layedit 富文本编辑器拓展 (本人在项目中用到的扩展)

    1. 建立编辑器(这个就不在这多做说的,文档里看看就可以成功创建一个编辑器)
    2. 富文本图片的上传(layui富文本要求后台返回的固定格式:👇)
    {
      "code": 0 //0表示成功,其它失败
      ,"msg": "" //提示信息 //一般上传失败后返回
      ,"data": {
        "src": "图片路径"
        ,"title": "图片名称" //可选
      }
    }
    

    上传图片的时候接口好像只能是普通图片接口,不能是Base64的接口。自己试了试Base64的发现好像不行,报错。

    1. layui富文本的回显问题,当富文本保存了内容后下次再通过编辑进入的时候,显示富文本的内容,附上我的代码 :👇
     form.val("dataColumn", dataFrm); //赋值表单的
                                /* 赋值编辑器 */
                                $("#con").html(`
                                 <textarea
                                  id="demokk"
                                  name="content"
                                  lay-verify="content"
                                   placeholder="简介"
                                  style="display: none;"
                                   >${dataFrm.content}</textarea>
                                
                                `);
                                var myFuIndex = layedit.build("demokk", {
                                  tool: [
                                    "html",
                                    "code",
                                    "strong",
                                    "italic",
                                    "underline",
                                    "del",
                                    "addhr",
                                    "|",
                                    "fontFomatt",
                                    "colorpicker",
                                    "face",
                                    "|",
                                    "left",
                                    "center",
                                    "right",
                                    "|",
                                    "link",
                                    "unlink",
                                    "images",
                                    "image_alt",
                                    "anchors",
                                    "|",
                                    "table",
                                    "fullScreen",
                                  ],
                                }); //建立编辑器
                                form.verify({
                                  content: function (value) {
                                    return layedit.sync(myFuIndex);
                                  },
                                });
    

    一定要在赋值后再去建立一遍编辑器,否则就无法去显示出原来的内容。
    4.layui富文本源码功能html, 这个功能我是在上面提到的扩展组件中找到的,在使用扩展组件的时候只要下载下来把你的layui.js替换掉就行。
    (如果报ace的错误的话,只要把你下载下来的扩展组件里面的Content文件夹移到你的layui文件夹下,然后再在引layui.js的地方再引一个ace.js文件就可以。)
    5.关于layui富文本样式被格式化的问题。
    (格式化样式j:当从其他富文本复制过来的内容粘贴到layui的富文本上的时候,底层会自动把style,link,script这些标签都过滤掉)
    解决方法:找到layui文件夹下的layedit.js文件,找到下面的代码:👇

     d = function (t) { var i = this; i.document; t.find("*[style]").each(function () { var t = this.style.textAlign; this.removeAttribute("style"), e(this).css({ "text-align": t || "" }) }), t.find("script,link").remove() },
    

    将其删除,就可以关闭过滤样式问题。(**

    建议如果没有这个需求的话不要去删除,目前自己还没有发现删除会发生哪些bug

    。**)

    相关文章

      网友评论

          本文标题:## 关于最近使用layui框架,其中富文本遇到的问题进行记录。

          本文链接:https://www.haomeiwen.com/subject/vvofrktx.html