Layui 中的富文本编辑器中遇到的html代码没有转换的解决方案

在使用layui中的富文本的时候常常会遇到这种情况:

html代码没有被转义,如图:

解决方案:

var HtmlUtil = {
        /*1.用浏览器内部转换器实现html转码*/
        htmlEncode:function (html){
            //1.首先动态创建一个容器标签元素,如DIV
            var temp = document.createElement ("div");
            //2.然后将要转换的字符串设置为这个元素的innerText(ie支持)或者textContent(火狐,google支持)
            (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
            //3.最后返回这个元素的innerHTML,即得到经过HTML编码转换的字符串了
            var output = temp.innerHTML;
            temp = null;
            return output;
        },
    
        /*2.用浏览器内部转换器实现html解码*/
        htmlDecode:function (text){
            //1.首先动态创建一个容器标签元素,如DIV
            var temp = document.createElement("div");
            //2.然后将要转换的字符串设置为这个元素的innerHTML(ie,火狐,google都支持)
            temp.innerHTML = text;
            //3.最后返回这个元素的innerText(ie支持)或者textContent(火狐,google支持),即得到经过HTML解码的字符串了。
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        }
    
    };

 在给编辑器内部赋值的时候:

layui.layedit.setContent(index,HtmlUtil.htmlDecode(res.data.content));

同时也解决了如何动态的给layui中的富文本赋值的方法

最后呈现的效果

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
以下是layui富文本编辑器的前后端代码示例: 前端代码: ```html <!-- 引入 layui 的样式文件 --> <link rel="stylesheet" href="//cdn.layui.com/layui/v2.5.6/css/layui.css"> <!-- 引入富文本编辑器的样式文件 --> <link rel="stylesheet" href="//cdn.layui.com/layui-v2.5.6/plugins/editor.md/css/editormd.min.css"> <!-- 引入 layui 的 JS 文件 --> <script src="//cdn.layui.com/layui/v2.5.6/layui.js"></script> <!-- 引入富文本编辑器的 JS 文件 --> <script src="//cdn.layui.com/layui-v2.5.6/plugins/editor.md/editormd.min.js"></script> <!-- 在页面创建一个 textarea 元素,用于存储富文本编辑器的内容 --> <textarea id="editor" name="content"></textarea> <script> // 创建富文本编辑器 var editor = editormd("editor", { width: "100%", height: 640, path: "//cdn.layui.com/layui-v2.5.6/plugins/editor.md/lib/", imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp"], imageUploadURL: "/upload" // 上传图片的后端接口地址 }); </script> ``` 后端代码: ```python from flask import Flask, request, jsonify from werkzeug.utils import secure_filename import os app = Flask(__name__) app.config['UPLOAD_FOLDER'] = './uploads' app.config['ALLOWED_EXTENSIONS'] = set(['jpg', 'jpeg', 'gif', 'png', 'bmp']) # 判断文件后缀是否在允许的范围内 def allowed_file(filename): return '.' in filename and \ filename.rsplit('.', 1)[1] in app.config['ALLOWED_EXTENSIONS'] # 上传图片的接口 @app.route('/upload', methods=['POST']) def upload(): file = request.files['editormd-image-file'] if file and allowed_file(file.filename): filename = secure_filename(file.filename) file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename)) return jsonify({ "success": 1, "message": "上传成功", "url": "/uploads/" + filename }) else: return jsonify({ "success": 0, "message": "上传失败" }) if __name__ == '__main__': app.run() ``` 以上代码示例前端使用了 layui富文本编辑器,在页面创建了一个 textarea 元素,用于存储编辑器的内容。后端使用了 Flask 框架,提供了一个上传图片的接口 `/upload`,接口将图片保存到服务器上的指定目录,并返回图片的 URL。在创建富文本编辑器时,设置了上传图片的后端接口地址为 `/upload`。具体实现可以根据自己的需求进行调整。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qq_35652070

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值