kindeditor修复会替换script内容的问题

阅读时长 5 分钟读完

在前端开发中,我们经常需要使用富文本编辑器,而KindEditor是一款非常优秀的富文本编辑器。然而,有时候我们会遇到一个问题:当我们输入含有 <script> 标签的代码时,KindEditor会将其替换成 &lt;script&gt;,导致代码无法正常执行。

问题原因

这个问题的根本原因在于浏览器对于 <script> 标签的保护机制。为了防止跨站脚本攻击(XSS),浏览器会自动将 <script> 标签里面的内容进行转义,从而避免恶意代码被执行。而KindEditor作为富文本编辑器也会对用户输入的内容进行过滤和转义,以确保安全性。

解决方案

要解决这个问题,我们需要在KindEditor中修改相关的配置,允许用户输入带有 <script> 标签的代码,并且不进行转义。具体实现步骤如下:

第一步:修改配置文件

找到KindEditor的配置文件 config.js,并将其中的 items 数组中的 source 元素改为以下代码:

-- -------------------- ---- -------
--------------- ------------ ----------------- ------------ ------------- ----- ------ -
    --- ---- - ------------
    -- --------------------------- -- - -- ------------------------------- -- -- -
        --------------------------------
        ------ ------
    -
    --- -------- - --------------------------------------- ----------------
        ---------------------------- - -----
        ------------------------------- - -----
        ----------- ----- -----
    --------------------
    --- ------ - -------------------
        ----------------------- - ---
        ------------------------- - ----
        ---------------
        --------------
        ----------
            ----------
            -------------- --- -
                ----------------
            -
        --
        --------
            ----------
            -------------- --- -
                --- ------ - -----------------------
                -- ------- --- --- -
                    -----------------
                    -------
                -
                ------------------------
                ----------------
            -
        -
    ---
-- 

这个修改将禁止KindEditor转义 <script> 标签,同时当用户输入带有脚本标签的内容时,将弹出提示框进行警告。

第二步:引入JS文件

在页面中引入下面的JS文件即可:

第三步:使用KindEditor

只需要简单地在页面中创建一个textarea,并使用如下代码初始化KindEditor即可:

-- -------------------- ---- -------
--------- ----------- --------------------------
------- -----------------------
    -----------------------------
        ------ -------
        ------- --------
        -----------------
        -------
            --------- ---- ------- ------- ---- ---------- ----------- ------ ------- --------
            ------------- ------------ ---- -------------- ---------------- ---------------
            -------------- -------------------- ---------------------- --------- ---------- ------------
            -------------- ------------ -------------- ------------ ---- ------------- ----
            -------------- ----------- ----------- ---- ------------ -------------- -------
            --------- ------------ ---------------- ------------- --------------- ---- --------
            ------------- -------- -------- ------------- -------- ----- ------------ -----------

- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------
纠错
反馈