web-dev-qa-db-ja.com

メインのtinyMCEエディタの内容を追加のタグでラップする方法

私はWP 4.6を使っています。これはtinyMCE 4です。私の投稿エディタのビジュアルタブの内容をもっとWYSIWYGにする必要があります。私はフロントエンドスタイルを含むCSSファイルをadd_editor_styleを使ってエディターに添付しています。しかし、エディタの内容をこれらのスタイルの多くに取り込むには、それらを2つのHTMLタグ（特定のクラスを持つdiv）で囲む必要もあります。

TinyMCEのドキュメントは以前よりも少し優れていますが、それでもtinyMCEが起動したときにコンテンツを取得してそれをラップする方法を見つけようとするのは悪夢です。このテストでは、コンテンツに文字列を追加します。

tinymce.init({
    selector: 'textarea#content.wp-editor-area',
    setup   : function(ed) {
        ed.on('BeforeSetContent', function(event) {
            event.content += '????????????????????????????????????????';
        });
    }
});

しかし、これはメインのポストエディタのtinyMCEインスタンスを選択しているようには見えません。私はselectorで何がサポートされているのか、そしてそれが必要であるのかどうかについての文書を見つけることができません。誰かが私を正しい方向に向けることができますか？

javascripttinymcehtmlwysiwygpost-editor
2
And Finally

個人的には、WPエディタ内に配置されたすべてのコンテンツを、justという単一のクラス、通常は以下の例で使用した.entry-contentを使用してスタイルを設定します。

フロントエンドのWPエディタからコンテンツを出力するときは、それをdiv.entry-contentで囲みます。単一のHTMLクラスを使用すると、処理が簡単になります。

style.css 

.entry-content h2 {
    color: purple;
}
/* etc ... */

私はまた、私のテーマのデフォルトスタイルシートをtinyMCEにロードするためにadd_editor_style()を使います。

function wpse247805_editor_styles() {
    // Use our existing main stylesheet for TinyMCE too.
    add_editor_style( 'style.css' );
}
add_action( 'after_setup_theme', 'wpse247805_editor_styles' );

以下のwpse247805_editor_styles_class()関数を使用します。これは単に.entry-contentクラスをtinyMCEの<body>要素に追加するものです。

/**
 * Add .entry-content to the body class of TinyMCE.
 * @param array $settings TinyMCE settings.
 * @return array TinyMCE settings.
 */
function wpse247805_editor_styles_class( $settings ) {
    $settings['body_class'] = 'entry-content';
    return $settings;
}
add_filter( 'tiny_mce_before_init', 'wpse247805_editor_styles_class' );

WPエディタ内で.entry-contentに適用されているスタイルをオーバーライドする必要があることが時々あります。私はSassを使っています、そして私はこの目的のために部分的に捧げられています。

// TinyMCE .wp-content overrides.
body#tinymce.wp-editor {

    // Override Foundation's height: 100%; because WP Editor in 4.0+ won't scroll down all of the way otherwise.
    height: auto !important;

    &.entry-content {
        margin: 16px;
    }
}
2
Dave Romsey