CKEditor 4 и модифицированный HTML - PullRequest
0 голосов
/ 08 мая 2020

Работая с Uikit, я пытаюсь вставить следующий код в CKEditor, чтобы получить красивое слайд-шоу:

<div uk-slideshow="autoplay: true">
                <div class="uk-position-relative uk-visible-toggle" tabindex="-1">

                    <ul class="uk-slideshow-items">
                        <li>
                            <img src="xxx.jpg" alt="" uk-cover>
                            <div class="uk-position-bottom uk-overlay uk-overlay-default uk-text-center">1</div>
                        </li>
                        <li>
                            <img src="xxx.jpg" alt="" uk-cover>
                            <div class="uk-position-bottom uk-overlay uk-overlay-default uk-text-center">2</div>
                        </li>
                        <li>
                            <img src="xxx.jpg" alt="" uk-cover>
                            <div class="uk-position-bottom uk-overlay uk-overlay-default uk-text-center">3</div>
                        </li>
                    </ul>

                    <a class="uk-position-center-left uk-position-small uk-hidden-hover uk-slidenav-large" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
                    <a class="uk-position-center-right uk-position-small uk-hidden-hover uk-slidenav-large" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

                </div>
                <ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin"></ul>
            </div>

Я знаю, что этот код работает нормально, поскольку я взял его из документации и попробовал в пустая html страница. Однако в CKEditor он преобразуется как:

<div uk-slideshow="autoplay: true">
<div class="uk-position-relative uk-visible-toggle" tabindex="-1">
<ul class="uk-slideshow-items">
    <li><img alt="" src="xxx.jpg" uk-cover="" />
    <div class="uk-position-bottom uk-overlay uk-overlay-default uk-text-center">1</div>
    </li>
    <li><img alt="" src="xxx.jpg" uk-cover="" />
    <div class="uk-position-bottom uk-overlay uk-overlay-default uk-text-center">2</div>
    </li>
    <li><img alt="" src="xxx.jpg" uk-cover="" />
    <div class="uk-position-bottom uk-overlay uk-overlay-default uk-text-center">3</div>
    </li>
</ul>
</div>
<ul class="uk-slideshow-nav uk-dotnav uk-flex-center uk-margin">
</ul>
</div>

<a class="uk-position-center-left uk-position-small uk-hidden-hover uk-slidenav-large" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
<a class="uk-position-center-right uk-position-small uk-hidden-hover uk-slidenav-large" href="#" uk-slidenav-next uk-slideshow-item="next"></a>

удаляется.

Как рекомендовано, я попытался отключить ACF, выполнив config.allowedContent = true; но мой оригинал HTML, вставленный в источник, продолжает изменяться редактором.

Как я могу это решить?

...