如何保护 ckeditor 更改我的源代码？

Question

我现在正在使用 ckeditor 制作 laravel cms 系统。 但是，ckeditor可能会更改源代码，这意味着当我在Source code状态下将html复制并粘贴到ckeditor，之后，我在Source code状态下重新打开html，html已经更改。 html如下；

<section class="page-link">
    <div class="container">
        <div class="page-link__box">
            <div class="page-link__box__cont">
                <div class="page-link__box__cont__btn">
                    <a href="#philosophy">
                        <h4 class="head-h4">aaaa</h4>
                    </a>
                </div>
            </div>
            <div class="page-link__box__cont">
                <div class="page-link__box__cont__btn">
                    <a href="#greeting">
                        <h4 class="head-h4">bbbb</h4>
                    </a>
                </div>
            </div>
            <div class="page-link__box__cont">
                <div class="page-link__box__cont__btn">
                    <a href="#aboutcompany">
                        <h4 class="head-h4">cccc</h4>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

而且，ckeditor 修改如下；

<section class="page-link">
    <div class="container">
        <div class="page-link__box">
            <div class="page-link__box__cont">
                <div class="page-link__box__cont__btn">
                    <h4 class="head-h4">
                        <a href="#philosophy">aaaa</a>
                    </h4>
                </div>
            </div>
            <div class="page-link__box__cont">
                <div class="page-link__box__cont__btn">
                    <h4 class="head-h4">
                        <a href="#greeting">bbbb</a>
                    </h4>
                </div>
            </div>

            <div class="page-link__box__cont">
                <div class="page-link__box__cont__btn">
                    <h4 class="head-h4">
                        <a href="#aboutcompany">cccc</a>
                    </h4>
                </div>
            </div>
        </div>
    </div>
</section>

毕竟<h4>标签和<a>标签位置是相互改变的； 请告诉我为什么？ 如何保护 ckeditor 更改我的 html。

Answer 1

您无法保护您的代码，CKEditor 将始终接触 HTML，因为它是所见即所得的。 但是你可以做一些事情。

添加具有您需要的功能的按钮。

禁止Advanced Content Filter：

config.allowedContent = true;
config.extraAllowedContent = 'a h4';

但我不建议将 CKEditor 用于复杂的 HTML 代码。它适用于段落和简单的东西。在使用 html 和刀片模板时，您可以使用 Ace editor 而不是 CKEditor。并将从 CKEditor 接收到的简单文本内容包含到模板中。我认为，这是更好的方式。