WP 5.3.2
目前正在使用Ajax页面加载构建插件,需要从动态加载的多个WP编辑器中获取数据。
注意:下面的示例适用于wp管理区域,如果您想将其用于前端,则可能需要扩展。
1、确保编辑器脚本已加载:
add_action( \'admin_enqueue_scripts\', \'load_admin_scripts\');
function load_admin_scripts() {
// Do NOT load it on every admin page, create some logic to only load on your pages
wp_enqueue_editor();
}
2。使用Ajax(PHP)获取编辑器文本区域:
function your_ajax_get_editor_callback() {
// Note: every editor needs its own unique name and id
return \'<textarea name="my-wp-editor" id="my-wp-editor" rows="12" class="myprefix-wpeditor">The value from database here :-)</textarea>\';
}
3。使用Ajax JS脚本加载和删除Ajax成功回调上的WP编辑器。
我仍然在使用所有可用的tinymce插件,请参阅tinymce文档,并注意WP已经重命名了其中一些插件。检查wp-includes/js/tinymce/plugins
. 在下面的示例中,我添加了fullscreen
, 一个默认关闭的便捷插件。
var active_editors = [];
function ajax_succes_callback() {
remove_active_editors();
init_editors();
}
function remove_active_editors() {
$.each( active_editors, function( i, editor_id ) {
wp.editor.remove(editor_id);
}
active_editors = [];
}
function init_editors() {
$.each( $(\'.myprefix-wpeditor\'), function( i, editor ) {
var editor_id = $(editor).attr(\'id\');
wp.editor.initialize(
editor_id,
{
tinymce: {
wpautop: true,
plugins : \'charmap colorpicker compat3x directionality fullscreen hr image lists media paste tabfocus textcolor wordpress wpautoresize wpdialogs wpeditimage wpemoji wpgallery wplink wptextpattern wpview\',
toolbar1: \'bold italic underline strikethrough | bullist numlist | blockquote hr wp_more | alignleft aligncenter alignright | link unlink | fullscreen | wp_adv\',
toolbar2: \'formatselect alignjustify forecolor | pastetext removeformat charmap | outdent indent | undo redo | wp_help\'
},
quicktags: true,
mediaButtons: true,
}
);
// Save id for removal later on
active_editors.push(editor_id);
});
}
4。使用以下工具从每个编辑器获取内容:
function get_editor_content() {
// NOTE: in my app the code below is inside a fields iteration (loop)
var editor_id = $(field).attr(\'id\');
var mce_editor = tinymce.get(editor_id);
if(mce_editor) {
val = wp.editor.getContent(editor_id); // Visual tab is active
} else {
val = $(\'#\'+editor_id).val(); // HTML tab is active
}
}
<小时>
Pointers:
<使用
wp.editor.initialize(editor_id_here)
在干净的
<textarea>
, 不使用
wp_editor()
用于html输出确保使用删除编辑器
wp.editor.remove(editor_id)
如果它不再存在于dom中。如果不这样做,当您第二次加载编辑器(动态)时,编辑器初始化将失败
获取编辑器内容对于每个选项卡都是不同的(视觉/HTML)
注意:以上代码示例未经过充分测试,可能包含一些错误。我在我的应用程序中完全可以使用它。这纯粹是为了让你走。