如何定位TinyMCE编辑器的样式

时间:2013-05-16 11:22:54

标签: javascript jquery css tinymce

我觉得有点傻问这个问题。我只是试图瞄准整个TinyMCE编辑器,所以我可以应用一些风格;例如,在它周围应用10px的填充。

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

我希望定位整个TinyMCE编辑器,恰好是#mce_9。但是,#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>

1 个答案:

答案 0 :(得分:0)

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