将自定义CSS应用于TinyMCE编辑器的正确方法

Question

我在我的ID为#mytextarea的文本区域中集成了TinyMCE 4.9.9版实例。它正在被应用，这是以下屏幕截图：

用于初始化编辑器的代码是：

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现在不见了。

所以有人可以建议我将TinyMCE编辑器实例应用自定义CSS的正确方法吗？我的第二种方法是对还是错？如果是错误的，那么如何捕获编辑器的类，应用我们自己的CSS以及在哪里编写它们？

我将TinyMCE 4.9.9版实例集成到ID为#mytextarea的文本区域中。它正在被应用，这是以下屏幕截图：用于初始化编辑器的代码是：tinymce.init（{...

Answer 1

为了回答您的问题，我们首先需要知道TinyMCE本身如何呈现到页面上以及content_css的实际影响。