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

Question

我在 ID #mytextarea 的文本区域中集成了一个 TinyMCE ver 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 现在已经消失了。

那么谁能建议我将自定义 CSS 应用到 TinyMCE 编辑器实例的正确和准确的方法是什么？我的第二种方法是对还是错？如果错了那么如何捕捉编辑器的类，应用我们自己的 CSS 以及在哪里写它们？

Answer 1

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

如果您在 TinyMCE 出现后使用浏览器的开发工具检查页面，您会看到 TinyMCE 将自身呈现为一系列 div 元素和单个 iframe.

menubar、toolbar(s) 和 statusbar 在您调用 TinyMCE 的页面上都呈现为一组嵌套的 div 元素。您实际输入内容的矩形是 iframe.

如果您想将 CSS 注入 iframe 以影响您在 TinyMCE 中看到的内容，您需要使用 content_css 设置。这会将您提供的 CSS 注入 iframe。

默认情况下，编辑器本身的外观（例如 menubar、toolbar(s) 和 statusbar）由 TinyMCE 皮肤处理。如果您想影响编辑器 menubar、toolbar(s) 和 statusbar 的外观和感觉，您可以 (a) 修改皮肤的 skin.css 文件或 (b)您所做的并将您自己的 CSS 添加到主页以覆盖 skin.css 中的设置。没有对错之分，都会达到你想要的结果。

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

Proper way of applying custom CSS to TinyMCE editor

css

tinymce