4

我正在构建一个像 WordPress 页面构建器一样使用的页面构建器 - 它不需要更改我在页面中编程的任何 html（我是一名程序员并且正在使用它 - 这样我就可以轻松地修改页面并且它是更改，而不必处理 GIT 的工具）。

我之所以把它做成所见即所得的编辑器，是因为我想让一些与我一起工作的非技术人员编辑一些内容（即更改图像、修复拼写、添加内容等）。

我正在使用 bootstrap-wysihtml5（链接）。

编辑：

查看源代码后，我发现我想关闭部分 HTML Sanitizer。显然我需要一些帮助来确保我的代码是好的，但我不希望它删除类/标签/...等。

具有相同 jist 的另一个问题：link

原始问题：

我已经研究了如何做到这一点，并发现我可以使用ParserRules. 但是在写了 25 多行之后，它似乎仍然在弄乱我的 html。

现在我可以继续并继续关闭这些 parserRules，但我认为这可能不是正确的方法，因为我将继续遇到这个天才系统的怪癖。

有没有办法删除它，这样它就不会剥离 html？

原始 HTML

<form action="/contact-us/send" name="contact-form" id="contact-form" method="post">
    <table class="form-table"><tbody>
            <tr class="field">
                <td class="form-label"><label for="fullname"><span class="req"></span> Full Name</label></td>
                <td class="form-input"><input type="text" name="fullname" id="fullname"></td>
            </tr>
            <tr class="field">
                <td class="form-label"><label for="email"><span class="req"></span> Email</label></td>
                <td class="form-input"><input type="text" name="email" id="email"></td>
            </tr>
            <tr class="field">
                <td class="form-label"><label for="phone"><span class="req"></span> Phone</label></td>
                <td class="form-input"><input type="text" name="phone" id="phone"></td>
            </tr>
            <tr class="field">
                <td class="form-label"><label for="feedback"><span class="req"></span> Questions/Feedback</label></td>
                <td class="form-input"><textarea name="feedback" id="feedback"></textarea></td>
            </tr>
        </tbody></table>
</form>

当前输出 HTML

<form>
    <span>
        <span>
            <label> Full Name</label>
            <input>
        </span>
        <span>
            <label> Email</label>
            <input>
        </span>
        <span>
            <label> Phone</label>
            <input>
        </span>
        <span>
            <label> Questions/Feedback</label>
            <textarea></textarea>
        </span>
    </span>
</form>

当前的 ParserRules

        parserRules: {
            classes: {
                // (path_to_project/lib/css/wysiwyg-color.css)
                "wysiwyg-color-silver": 1,
                "wysiwyg-color-gray": 1,
                "wysiwyg-color-white": 1,
                "wysiwyg-color-maroon": 1,
                "wysiwyg-color-red": 1,
                "wysiwyg-color-purple": 1,
                "wysiwyg-color-fuchsia": 1,
                "wysiwyg-color-green": 1,
                "wysiwyg-color-lime": 1,
                "wysiwyg-color-olive": 1,
                "wysiwyg-color-yellow": 1,
                "wysiwyg-color-navy": 1,
                "wysiwyg-color-blue": 1,
                "wysiwyg-color-teal": 1,
                "wysiwyg-color-aqua": 1,
                "wysiwyg-color-orange": 1
            },
            tags: {
                "b": {},
                "i": {},
                "br": {},
                "ol": {},
                "ul": {},
                "li": {},
                "h1": {},
                "h2": {},
                "h3": {},
                "blockquote": {},
                "u": 1,
                "img": {
                    "check_attributes": {
                        "width": "numbers",
                        "alt": "alt",
                        "src": "url",
                        "height": "numbers"
                    }
                },
                "a": {
                    set_attributes: {
                        target: "_blank",
                        rel: "nofollow"
                    },
                    check_attributes: {
                        href: "url" // important to avoid XSS
                    }
                },
                "span": 1,
                "div": 1,
                // to allow save and edit files with code tag hacks
                "code": 1,
                "pre": 1,
                "label": {},
                "legend": {},
                "textarea": {},
                "html": {},
                "button": {},
                "select": {},
                "option": {},
                "iframe": {},
                "form": {},
                "head": {},
                "object": {},
                "noscript": {},
                "svg": {},
                "input": {},
                "meta": {},
                "video": {},
                "canvas": {},
                "source": {},
                "frame": {},
                "style": {},
                "xml": {},
                "param": {},
                "audio": {},
                "link": {},
                "script": {},
                "colgroup": {},
                "comment": {},
                "header": {}
            }
        },

我还试图切换它是如何删除课程的（正如这个问题所问的那样 - 不知道他在做什么......但标题很合适） - 这似乎是由ParserRules:classes; 再次，我想我需要关闭整个 ParserRules。

4

0 回答 0