Как обернуть содержимое основного редактора tinyMCE дополнительными тегами

Я на WP 4.6, у которого есть tinyMCE 4. Мне нужно сделать содержимое визуальной вкладки редактора сообщений более WYSIWYG. Я add_editor_style CSS-файл, содержащий стили переднего конца, в редактор, используя add_editor_style . Но для того, чтобы содержимое редактора использовало многие из этих стилей, мне также нужно обернуть их в пару HTML-тегов – divs с определенными классами.

Документация tinyMCE немного лучше, чем раньше, но это все еще кошмар, пытаясь понять, как захватить контент и обернуть его, когда крошечные MCE inits. Я пытаюсь этот тест добавить строку к контенту:

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

Но это не похоже на выбор экземпляра tinyMCE главного редактора сообщений. Я не могу найти документацию о том, что поддерживается для selector , и даже если это необходимо. Может кто-то указать мне верное направление?

Лично я стилю все содержимое, размещенное в редакторе WP, используя только один класс, обычно .entry-content который я использовал в приведенном ниже примере.

При выводе содержимого из редактора WP на переднем конце я завершаю его в div.entry-content . Использование одного класса HTML упрощает:

style.css

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

Я также использую add_editor_style() чтобы загрузить таблицу стилей по умолчанию моей темы в tinyMCE:

 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' ); 

Иногда я считаю необходимым переопределить стили, применяемые к .entry-content внутри редактора WP. Я использую 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; } }