课程 L02 中引入的富文本编辑器,编辑时代码块中包含 div 标签转义出现问题
当在新建topic的时候,数据库经过前端与后端过滤后,存入数据库,sql 中 body 字段 节选问题处代码如下
<pre><code class="lang-html"><div class="same div">
<input type="text" class="same text">
<button class="same btn">查询</button>
</div><br></code></pre>
可以看到,尖括号除了 code pre 标签。其他都经过了转义处理。在 show 路由下亦是显示正常,如下图
可以看到初次编辑后,show 视图能正常的处理渲染 body 字段。
.
.
但是,在我尝试编辑它时,在 edit 路由中,富文本编辑器里显示,却是经过了渲染后的 dom 节点
经过一晚上的努力无果,网路上也找不到解决方案,求大侠出手相助。
PS.暂时得到了一个解决方案,
因为 php 输出的是经过转义的文本(这是我想要的)。
但是从 Simditor 的 getValue 方法得到的却是已经被渲染的html dom。
为此,我的解决方案就是用js 在 编辑器 处理前,再次转义。代码如下,
var s = editor.getValue();
s = s.replace(/<(button|input|div)([^>]*)>/ig, "<$1$2>");
s = s.replace(/<\/(button|input|div)>/ig, "<\/$1>");
editor.setValue(s);
因为正则基础较差,笔者暂时只能达到这种程度。希望大家得到好的解决方案,能回复一二。
推荐文章: