|  在技术加营销的道路上越走越远
温馨提示
我是弹窗内容
当前位置:首页 > 大前端开发 > 百度Ueditor采坑 - 内容中含有html代码时会被浏览器渲染
百度Ueditor采坑 - 内容中含有html代码时会被浏览器渲染

百度Ueditor采坑 - 内容中含有html代码时会被浏览器渲染

日期:2022-01-26 浏览量:1361 原创作者:湖八爷
刚刚在写文章的时候,内容中含有一些html代码,编辑时还是正常的,保存到MySQL数据中的时候也是正常的,但是当我查看和再次编辑的时候,发现文章内容中的html代码都被过滤了。右键审查元素,发现代码还在,很明显,这是被浏览器渲染了。

为什么会出现这种情况呢?我查看了很多文档,想了很多办法,反复调试,最后发现是自己埋得一个坑。

这个坑就在于当初给Ueditor选择容器的时候,我使用了textarea元素,而非官方文档给出的script元素解决方案。


以下是我埋坑时写的代码:

<textarea class="input_box_editor" name="content" id="container"></textarea>
<script type="text/javascript" src="ueditor.config.js"></script>
<script type="text/javascript" src="ueditor.all.js"></script>
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script>


以下是官方给出的demo代码:

<script id="container" name="content" type="text/plain">这里写你的初始化内容</script>
<script type="text/javascript" src="ueditor.config.js"></script>
<script type="text/javascript" src="ueditor.all.js"></script>
<script type="text/javascript">
    var ue = UE.getEditor('container');
</script>


对比一下上面两段代码,除了使用的容器元素不同外,没有其他的区别。

当时我为啥要用textarea元素当Ueditor的容器?具体的原因,我也想不起来了,可能是当时觉得用textarea元素,还是用div元素,还是用script元素都没什么区别吧!

但实际上他们是有区别的,具体的区别好像是textarea元素会在提交数据的时候自动对里面的html文本进行一次特殊字符转义。