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

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

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

我希望针对整个TinyMCE编辑器，它恰好是#mce#U 9#然而，mce_9是TinyMCE创建的一个ID，我不想让CSS“知道”将自动分配什么ID。TinyMCE的body_id和body_类属性允许我针对内部iframe，而不是整个编辑器

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

应用TinyMCE之前的HTML

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

<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>

呜呜呜呜

应用TinyMCE后的HTML

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

<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>

....
呜呜呜呜

假设任何人都可以有两个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>

....
呜呜呜呜
....
呜呜呜呜
#内容2.mce tinymce{
填充：10px；
}

你最好在TinyMCE论坛上问这个问题，他们真的很棒！！不管怎样，您是否尝试过在

#content

元素中添加填充？@BenCarey。我只希望针对编辑器（

#mce#u 9

），而不是可能位于

#content

中的其他元素。在这种情况下，请在每个tinyMCE？@BenCarey周围放置一个容器。再次感谢你，本，但我必须相信还有更好的方法。我还可以使用jQuery来定位原始元素

#frontContent

，找到它的前一个同级元素，它恰好是

#mce_9

，对它应用一个ID，等等，但这似乎也是错误的。我实际上在页面上有两个TinyMCE编辑器，但我只想为其中一个添加填充。使用class

mce tinymce

如何区分两者？除非我可以针对某个给定编辑器的父级，但我不知道如何操作。假设ID是

content

和

content2

则使用

#content.mce timmce{padding:10px；}

或

#content2.mce timmce{padding:10px；}

为第二个编辑器应用css。是的，我知道如何将tinymce

包装在另一个

中。似乎很难相信这是应该做的。换个主题怎么样？也许。。。我没有任何主题方面的经验，但我愿意尝试。或者使用另一个可以工作的div解决方案。我认为可能有一些内置方法可以向整个编辑器添加ID，但我似乎找不到它。