Правильный способ применения пользовательских CSS в редакторе TinyMCE

Question

Я интегрировал экземпляр TinyMCE ver 4.9.9 в свою текстовую область с идентификатором #mytextarea. Он применяется, и вот снимок экрана, представленный:

Код, использованный для инициализации редактора:

tinymce.init({
    selector: "#mytextarea",
    height: 300,
    statusbar: false,
    menubar: false,
    plugins: "link lists placeholder",
    toolbar: "undo redo | bold italic underline | bullist numlist | link"
});

HTML:

<form method="post" action="form.php">
    <table align="center" border="0" width="50%">
        <tr>
            <th><label for="mytextarea">Content:</label></th>
            <td><textarea name="mytextarea" id="mytextarea"></textarea></td>
        </tr>
    </table>
</form>

Теперь я хочу изменить внешний вид этого редактора, например убрать тень с рамки и применить цвет границы по своему выбору, чтобы он мог сочетаться с моим сайтом тема и цветовая схема.

Я не знаю точно, как сделать это свойство в соответствии с их официальными документами. Чтобы выполнить мои требования, я добавил content_css: "css/style.css" к tinymce.init({...});. Мой код становится:

tinymce.init({
    selector: "#mytextarea",
    height: 300,
    statusbar: false,
    menubar: false,
    plugins: "link lists placeholder",
    toolbar: "undo redo | bold italic underline | bullist numlist | link",
    content_css: "css/style.css"
});

Но я не знаю, что делать в моем style.css. Должен ли я применять свой пользовательский CSS к классам редактора TinyMCE, как этот

.mce-tinymce {
    box-shadow:none;
}

Но даже после применения выше ничего не произошло. box-shadow не удаляется из редактора.

Поэтому я пошел к своему основному файлу, в котором я написал выше код TinyMCE, и написал свой пользовательский CSS как:

<style type="text/css">
.mce-tinymce {
    box-shadow:none !important;
}
</style>

и это сработало для меня.

Вы можете видеть, что box-shadow сейчас нет.

Так может кто-нибудь, пожалуйста, предложите Как правильно и точно применить пользовательский CSS к экземпляру редактора TinyMCE? Мой второй подход правильный или неправильный? Если это неправильно, то как отлавливать классы редактора, применять наши CSS и куда их писать?

Answer 1

Чтобы ответить на ваш вопрос, нам сначала нужно узнать, как сам TinyMCE отображается на странице и что на самом деле влияет content_css.

Если вы используете инструменты разработчика своего браузера для проверки страницы после появления TinyMCE вы увидите, что TinyMCE отображает себя как последовательность div элементов и одного iframe.

. menubar, toolbar(s) и statusbar все отображаются как вложенная группа из div элементов на странице, где вы вызываете TinyMCE. Прямоугольник, в котором вы фактически вводите содержимое, - iframe.

Если вы хотите вставить CSS в iframe, чтобы он влиял на контент, который вы видите в TinyMCE, вам нужно использовать content_css настройка. Это добавляет CSS, который вы предоставляете в iframe.

По умолчанию внешний вид самого редактора (например, menubar, toolbar(s) и statusbar) обрабатывается оболочкой TinyMCE. Если вы хотите повлиять на внешний вид редактора menubar, toolbar(s) и statusbar, вы можете (а) изменить файл skin.css вашей кожи или (б) сделать то, что вы сделали, и добавить свой собственный CSS на главную страницу, чтобы переопределить настройки в skin.css. Ни то, ни другое не является правильным или неправильным, и они оба достигнут конечного результата, которого вы хотите достичь sh.