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

2020-07-28  本文已影响0人  lao老麻

先附上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

。**)

上一篇下一篇

猜你喜欢

热点阅读