如何用额外的标记包装主tinyMCE编辑器的内容

时间：2016-11-29 作者：And Finally

我在WP 4.6上，它有tinyMCE 4。我需要使我的post editor可视化选项卡的内容更加WYSIWYG。我正在使用将包含前端样式的CSS文件附加到编辑器add_editor_style. 但是为了使编辑器的内容具有许多这样的样式，我还需要将它们包装在几个HTML标记中，这些标记是带有特定类的div。

tinyMCE文档比以前好了一点，但要想弄清楚如何在tinyMCE初始化时获取内容并将其打包，仍然是一场噩梦。我正在尝试此测试，以将字符串附加到内容：

tinymce.init({
    selector: \'textarea#content.wp-editor-area\',
    setup   : function(ed) {
        ed.on(\'BeforeSetContent\', function(event) {
            event.content += \'????????????????????????????????????????\';
        });
    }
});
但这似乎并不是在选择主post编辑器的tinyMCE实例。我找不到有关selector, 甚至是否有必要。有人能给我指出正确的方向吗？

1 个回复
SO网友:Dave Romsey

就个人而言，我通常只使用一个类来设置放置在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;
    }
}

标签： javascript   tinymce   html   wysiwyg   post-editor   小码农  

相关推荐

如何使HTML选择选项可搜索

有什么简单的方法可以修改源代码并使选择选项在产品页面中搜索属性？就像我打字的时候，它暗示了价值。<div id="product_attributes" class="panel wc-metaboxes-wrapper hidden"> <div class="toolbar toolbar-top"> <span class="expand-close">