我正在尝试从插件的pro版本为前端文本区域启用WordPress的tinyMCE编辑器。
我临时解决了这个问题bogus方式：
在免费版本中：
wp_editor(
$details_val, //content
\'pre-details\', //editor ID
array(\'tinymce\'=>false),
);
然后在pro版本中，使用过滤器挂钩将“tinymce”值设置为
true. 哈哈哈。。。
需要一个可行的解决方案，这是我在前端的文本区域：
<textarea class="tinymce-enabled" rows="5" cols="40" name="pre_details" id="pre-details"><?php echo $details_val; ?></textarea>
我在jQuery中尝试了以下函数：
jQuery(document).ready(function($) {
tinymce.init({
selector :"pre-details",
mode : "specific_textareas",
theme : "simple",
editor_selector :"tinymce-enabled"
});
});
文件的调用方式如下：
function pre_scripts() {
if( is_page(\'xyz\') ) {
wp_enqueue_script( \'pre-scripts\', Pre()->plugin_url() .\'/assets/js/pre-scripts.min.js\', array(\'jquery\', \'tiny_mce\'), Pre()->version, true );
}
}
add_action( \'wp_enqueue_scripts\', \'pre_scripts\' );
首先，如果我不使用
\'tiny_mce\' 依赖关系
tinymce.init() 显示未找到此类函数的错误，但我的自定义脚本已加载。但如果我加上
\'tiny_mce\' 依赖关系，我的自定义脚本甚至不会加载。但是钩子是
mentioned in dev resources.
我发现this WPSE thread, 这表明这是一个由来已久的问题。但是，这里介绍的解决方法并不能解决我的问题。
我还尝试了不同的版本：
$(function() {
$(\'textarea.tinymce-enabled\').tinymce({
mode : "specific_textareas",
theme : "simple",
});
});
以及
tinyMCE.execCommand(\'mceAddControl\', false, \'pre-details\');
但运气不好。由于该依赖关系使我的脚本出列，
或者，加载tinymce核心脚本的替代方法不符合我的脚本。
如何将WordPress的tinyMCE富文本编辑器加载到前端的文本区域，而不使用wp_editor(), 但以可插拔的方式？
最合适的回答,由SO网友:Jevuska 整理而成
如果前端不需要wp\\u编辑器，我认为可以。这里有一点不同的选项设置与您的tinymce init。我使用它时，前端没有wp\\u编辑器。
<script>
jQuery( document ).ready( function( $ ) {
tinymce.init( {
mode : "exact",
elements : \'pre-details\',
theme: "modern",
skin: "lightgray",
menubar : false,
statusbar : false,
toolbar: [
"bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | undo redo"
],
plugins : "paste",
paste_auto_cleanup_on_paste : true,
paste_postprocess : function( pl, o ) {
o.node.innerHTML = o.node.innerHTML.replace( / +/ig, " " );
}
} );
} );
</script>
获取内容
tinymce.get(\'pre-details\').getContent()
在WP功能中
wp_enqueue_scriptswp_enqueue_script( \'tinymce_js\', includes_url( \'js/tinymce/\' ) . \'wp-tinymce.php\', array( \'jquery\' ), false, true );
您可以将编辑器排队。min.css，适合您的风格。
