javascript - 如何针对 TinyMCE 编辑器进行样式设置

Question

我觉得问这个问题有点傻。我只是想以整个 TinyMCE 编辑器为目标，这样我就可以对其应用一些样式；例如，在其周围应用 10px 的填充。

我正在使用 TinyMCE 4。如果我从下面显示的 HTML 开始，TinyMCE 将创建以下 HTML。

我希望针对恰好是#mce_9 的整个 TinyMCE 编辑器。然而，#mce_9 是由 TinyMCE 创建的 ID，我不希望我的 CSS 必须“知道”将自动分配什么 ID。 TinyMCE 的 body_id 和 body_class 属性允许我定位内部 iframe，而不是整个编辑器。

tinyMCE.init({
    selector: "#frontContent",
    //body_id:"frontContentWindow"
});

应用TinyMCE之前的HTML

<div id="content">
    <div id="frontContent">BLA BLA BLA</div>
</div>

应用TinyMCE后的HTML

<div id="content">
    <div tabindex="-1" hidefocus="1" class="mce-tinymce mce-container mce-panel" id="mce_9" style="visibility: hidden; border-width: 1px; width: 600px;">
        <div class="mce-container-body mce-stack-layout" id="mce_9-body">
            ....
        </div>
    </div>
    <div id="frontContent" style="display: none;" aria-hidden="true">BLA BLA BLA</div>
</div>

Answer 1

假设任何人都可以拥有两个 TinyMCE 编辑器，那么 id 并不具体。 id是动态生成的。请使用类 mce-tinymce 而不是唯一 ID。

<div id="content">
    <div tabindex="-1" hidefocus="1" class="mce-tinymce mce-container mce-panel" id="mce_9" style="visibility: hidden; border-width: 1px; width: 600px;">
        <div class="mce-container-body mce-stack-layout" id="mce_9-body">
            ....
        </div>
    </div>
    <div id="frontContent" style="display: none;" aria-hidden="true">BLA BLA BLA</div>
</div>

<div id="content2">
    <div tabindex="-1" hidefocus="1" class="mce-tinymce mce-container mce-panel" id="mce_10" style="visibility: hidden; border-width: 1px; width: 600px;">
        <div class="mce-container-body mce-stack-layout" id="mce_10-body">
            ....
        </div>
    </div>
    <div id="frontContent2" style="display: none;" aria-hidden="true">BLA BLA BLA</div>
</div>

<style>
#content2 .mce-tinymce{
   padding:10px;
}
</style>