js修改html frm框架内容,## 关于最近使用layui框架，其中富文本遇到的问题进行记录。...

先附上layui富文本链接：layui富文本

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

建立编辑器(这个就不在这多做说的,文档里看看就可以成功创建一个编辑器)

富文本图片的上传(layui富文本要求后台返回的固定格式：👇)

{

"code": 0 //0表示成功，其它失败

,"msg": "" //提示信息 //一般上传失败后返回

,"data": {

"src": "图片路径"

,"title": "图片名称" //可选

}

}

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

layui富文本的回显问题，当富文本保存了内容后下次再通过编辑进入的时候，显示富文本的内容，附上我的代码 ：👇

form.val("dataColumn", dataFrm); //赋值表单的

/* 赋值编辑器 */

$("#con").html(`

id="demokk"

name="content"

lay-verify="content"

placeholder="简介"

style="display: none;"

>${dataFrm.content}

`);

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

。**)