3

Wordpress に div ラッパー スタイルをいくつか追加しましたが、それらをページで使用すると、ページ内でそれらの下にコンテンツを追加できません。CSS:after は div 内で動作して選択可能領域を作成しますが、div の後に選択可能領域を作成することはできません。

私の 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();

ここで execCommand を使用して、定義した div スタイルの後にいくつかの html を追加する方法はありますか? クリアフロートで後で空の段落タグのようなものを追加するには?

私は試した：

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

MCE エディタが壊れます。

...これを試しましたが、バグが多すぎます: editor-styles.css:

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

Wordpress で editor-styles.css への変更を確認するには、キャッシュをクリアし、Shift-Reload ボタンが必要になる場合があることに注意してください。

...

まだこれに取り組んでいます。スレッドを見つけました: 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");
    });
 });
4

1 に答える 1

2

tinymce構成オプションcontent_cssを使用してhtml疑似要素を追加できます。そこで、after要素を定義できます。試してみる！

アップデート：

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
...
于 2012-07-16T07:47:46.727 に答える