Wordpress:在TinyMCE iframe中添加事件 - Wordpress: add events inside TinyMCE iframe

Wordpress: add events inside TinyMCE iframe

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

在我的函数.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();

有没有一种方法可以使用execCommand在我定义的div样式之后添加一些html？要在后面添加一个类似于空段落标记的内容，并使用一个清晰的浮动？

我试过了：

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

MCE编辑器中断。

试过了，但太bug了：在editors-styles.css:

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

请注意，您可能需要清除"缓存和移位重载"按钮，以查看Wordpress中editors-styles.css的任何更改。

仍在努力。找到一个线程：通过jquery 访问tinymce iframe元素

我尝试将此线程中的代码添加到my_mce_before_init中，但它只是坏了。

还尝试加载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");
    });
 });

您可以使用tinymce配置选项content_css添加html伪元素。在那里，您可以定义后面的元素。试试看！

更新：

初始化tinymce时，将设置参数设置为以下（tinyMCE.init({...}内部）

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