## 关于最近使用layui框架,其中富文本遇到的问题进行记录。
2020-07-28 本文已影响0人
lao老麻
先附上layui富文本链接:layui富文本
layui富文本的工具比较少,所以再附上layui富文本扩展链接:kz.layedit 富文本编辑器拓展 (本人在项目中用到的扩展)
- 建立编辑器(这个就不在这多做说的,文档里看看就可以成功创建一个编辑器)
- 富文本图片的上传(layui富文本要求后台返回的固定格式:👇)
{
"code": 0 //0表示成功,其它失败
,"msg": "" //提示信息 //一般上传失败后返回
,"data": {
"src": "图片路径"
,"title": "图片名称" //可选
}
}
上传图片的时候接口好像只能是普通图片接口,不能是Base64的接口。自己试了试Base64的发现好像不行,报错。
- 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
。**)