Php Wordpress：在TinyMCE iframe中添加事件

我已经在Wordpress中添加了一些div包装器样式，但是当我在页面中使用它们时，不可能在页面中添加它们下面的内容。CSS:after在div内部创建可选区域，但在div之后创建可选区域不起作用

在my functions.php中，我有：

  function my_mce_before_init( $settings ) {
    $style_formats = array(
        array(
            'title' => 'Box Two Columns',
            'block' => 'div',
            'classes' => 'twocolbox',
            'wrapper' => true
        ),
        array(
            'title' => 'Image with Caption',
            'block' => 'div',
            'classes' => 'img_caption',
            'wrapper' => true
        ),
        array(
            'title' => 'Gallery Horizontal',
            'block' => 'div',
            'classes' => 'scroller horizontal',
            'wrapper' => true
        )
    );

    $settings['style_formats'] = json_encode( $style_formats );
    return $settings;

}
add_filter('tiny_mce_before_init', 'my_mce_before_init');
add_editor_style();

有没有办法在我定义的div样式之后使用execCommand添加一些html？要在后面添加空段落标记之类的内容并带有清晰的浮动吗

我试过：

tinyMCE.execCommand('mceInsertContent',false,'Hello world!!');" 

MCE编辑中断

。。。 试过了，但车太多了： 在editor-styles.css中：

#tinyMCE:after {
 content: "    ";
 clear:both;
 width: 4em; height:4em;
}

请注意，您可能需要清除“缓存”并按住shift键重新加载按钮，才能在Wordpress中查看对editor-styles.css的任何更改

还在做这个。找到一个线程：

在初始化之前，我尝试将此线程中的代码添加到我的\u mce\u中，但结果失败了

。。。。 还尝试加载jQuery脚本，但目标路径在TinyMCE iframe上无法工作。以下选择器均不起作用：

jQuery(document).ready(function($) {

    $("#tinyMCE").find("div").after('<p style="width:100%; clear:both; height:1em;">&nbsp; 6789</p>');
     $("div").css("color","red");

    $("#content_ifr").contents().find("div").after('<p style="width:100%; clear:both; height:1em;">&nbsp; 6789</p>');
    $("#content_ifr").contents().find("#tinymce p").css("color","red");

    $("#wp-content-editor-container").find("textarea").css("color","red");
    $("iframe").contents().find("p").css("color","red");

    $('#content_ifr').load(function(){
        $('#content_ifr').contents().find('p').css("color","red");
    });
 });

jQuery（文档）.ready（函数（$）{
$（“tinyMCE”）.find（“div”）.after（“
6789
”）；
$（“div”）.css（“颜色”、“红色”）；
$（“#content_ifr”）.contents（）.find（“div”）.after（“
”）；
$（“#content_ifr”）.contents（）.find（“#tinymce p”）.css（“颜色”、“红色”）；
$（“#wp内容编辑器容器”）.find（“textarea”）.css（“颜色”、“红色”）；
$（“iframe”）.contents（）.find（“p”）.css（“颜色”、“红色”）；
$（'#content_ifr'）.load（函数（）{
$（'content'ifr'）.contents（）.find（'p'）.css（“颜色”、“红色”）；
});
});

您可以使用tinymce配置选项content\u css添加html伪元素。 在那里可以定义后面的元素。试试看

更新：

初始化tinymce时，将设置参数设置为以下值（在

tinymce.init（{…}

内）

---

您好Thariama，css:after在MCE中创建可选区域时遇到了很多问题。如果我知道如何将其放入functions.php或如何让我的jquery以MCE iframe为目标，则setContent可能会起作用。当ed是tinymce编辑器对象时，您可以使用$（“#”+ed.id+“#ifr”）以编辑器iframe为目标。我尝试加载jquery脚本并使用：$（“#content_ifr”）.contents（）.find（'p'）.css（“color”，“red”）；如果我更改为文档加载事件，可能会发生什么？你是说目标不是问题所在，所以一定是加载顺序？jQuery（document）.ready（函数（$）无法工作，因为此时还没有编辑器实例就绪（也没有创建iframe）。要使其正常工作，您应该使用onInitHandler和tinymce配置参数设置（将您的代码放在该处理程序中！）这是我不理解的部分-如何以及在何处放置onInitHandler。

...
theme: "advanced",   // example param
setup : function(ed) {
    ed.onInit.add(function(ed, evt) {
        $("#content_ifr").contents().find("p").css("color","red");

        // other approach  
        //$(ed.getBody()).find('p').css("color","red");
    });
},
cleanup: true,      // example param
...