我正在尝试插入wp_editor()
使用AJAX将其转换为前端的页面。我现在的代码插入了wp\\U编辑器元素和所需的JavaScript和CSS文件,但没有我最初在中使用的设置wp_editor()
创建此TinyMCE元素时使用。
How do I pass the $settings
set in PHP into the dynamically created TinyMCE instance?
我发现一个老问题似乎可以回答我的问题,但我不理解它是如何工作的,代码给出了一个PHP折旧错误。
Load tinyMCE / wp_editor() via AJAX
<人力资源>
PHP
function insert_wp_editor_callback() {
// Empty variable
$html = \'\';
// Define the editor settings
$content = \'\';
$editor_id = \'frontend_wp_editor\';
$settings = array(
\'media_buttons\' => false,
\'textarea_rows\' => 1,
\'quicktags\' => false,
\'tinymce\' => array(
\'toolbar1\' => \'bold,italic,undo,redo\',
\'statusbar\' => false,
\'resize\' => \'both\',
\'paste_as_text\' => true
)
);
// Hack to put wp_editor inside variable
ob_start();
wp_editor($content, $editor_id, $settings);
$html .= ob_get_contents();
ob_end_clean();
// Get the necessary scripts to launch tinymce
$baseurl = includes_url( \'js/tinymce\' );
$cssurl = includes_url(\'css/\');
global $tinymce_version, $concatenate_scripts, $compress_scripts;
$version = \'ver=\' . $tinymce_version;
$css = $cssurl . \'editor.css\';
$compressed = $compress_scripts && $concatenate_scripts && isset($_SERVER[\'HTTP_ACCEPT_ENCODING\'])
&& false !== stripos($_SERVER[\'HTTP_ACCEPT_ENCODING\'], \'gzip\');
if ( $compressed ) {
$html .= "<script type=\'text/javascript\' src=\'{$baseurl}/wp-tinymce.php?c=1&$version\'></script>\\n";
} else {
$html .= "<script type=\'text/javascript\' src=\'{$baseurl}/tinymce.min.js?$version\'></script>\\n";
$html .= "<script type=\'text/javascript\' src=\'{$baseurl}/plugins/compat3x/plugin.min.js?$version\'></script>\\n";
}
add_action( \'wp_print_footer_scripts\', array( \'_WP_Editors\', \'editor_js\' ), 50 );
add_action( \'wp_print_footer_scripts\', array( \'_WP_Editors\', \'enqueue_scripts\' ), 1 );
wp_register_style(\'tinymce_css\', $css);
wp_enqueue_style(\'tinymce_css\');
// Send data
wp_send_json_success($html);
wp_die();
} add_action( \'wp_ajax_insert_wp_editor_callback\', \'insert_wp_editor_callback\' );
add_action( \'wp_ajax_nopriv_insert_wp_editor_callback\', \'insert_wp_editor_callback\' );
<小时>
JavaScript
$(\'#insert_wp_editor\').on(\'click\', function() {
// Data to send to function
var data = {
\'action\': \'insert_wp_editor_callback\'
};
$.ajax({
url: ajaxURL,
type: \'POST\',
data: data,
success: function(response) {
if ( response.success === true ) {
// Replace element with editor
$(\'#editor-placeholder\').replaceWith(response.data);
// Init TinyMCE
tinymce.init({
selector: \'#frontend_wp_editor\'
});
}
}
});
});
最合适的回答,由SO网友:Swen 整理而成
所以,在做了更多的挖掘之后,我回答了自己的问题,可以说是“连接点”。关于StackOverflow和StackExchange这个主题,有很多零碎的信息,但没有一个真正回答了我的问题。
下面是加载wp_editor
前端带有AJAX的实例,including 提供给的设置wp_editor
.
我想可能有更好的解决方案,因为现在我不得不打电话wp_print_footer_scripts()
, 这可能会添加一些不必要的东西,但不会(在我的情况下)。
<小时>
PHP
function insert_wp_editor_callback() {
$html = \'\';
// Define the editor settings
$content = \'\';
$editor_id = \'frontend_wp_editor\';
$settings = array(
\'media_buttons\' => false,
\'textarea_rows\' => 1,
\'quicktags\' => false,
\'tinymce\' => array(
\'toolbar1\' => \'bold,italic,undo,redo\',
\'statusbar\' => false,
\'resize\' => \'both\',
\'paste_as_text\' => true
)
);
// Grab content to put inside a variable
ob_start();
// Create the editor
wp_editor($content, $editor_id, $settings);
// IMPORTANT
// Adding the required scripts, styles, and wp_editor configuration
_WP_Editors::enqueue_scripts();
_WP_Editors::editor_js();
print_footer_scripts();
$html .= ob_get_contents();
ob_end_clean();
// Send everything to JavaScript function
wp_send_json_success($html);
wp_die();
} add_action( \'wp_ajax_insert_wp_editor_callback\', \'insert_wp_editor_callback\' );
add_action( \'wp_ajax_nopriv_insert_wp_editor_callback\', \'insert_wp_editor_callback\' );