如何使用Java脚本创建WP编辑器

时间:2017-07-25 作者:1naveengiri

我试图创建一些重复的字段,为此,我想创建一个具有唯一ID的新wp编辑器。

所以我的问题是有没有办法wp_editor 使用任何js?与我们使用的相同<?php wp_editor() ?> WordPress功能。

我试过使用

tinyMCE .init( { mode : "exact" , elements : "accordion_icon_description_"+response.success.item_count });
但它打印的是非常基本的编辑器,我认为这与WordPress post内容字段编辑器不同

3 个回复
最合适的回答,由SO网友:kero 整理而成

幸亏Jacob Peattie\'s comment 我只能用JS来回答这个问题。实际上,我们做了一些类似的事情,但在4.8之前,并没有这么容易,所以我们使用了wp_editor() 最后但是现在,你可以这么做了using wp.editor object in JavaScript. 有3个主要功能

  1. wp.editor.initialize = function( id, settings ) {
其中id

用于编辑器的文本区域的HTML id。必须符合jQuery。无括号、特殊字符等。

settings 是一个对象

{
    tinymce: {
        // tinymce settings
    },
    quicktags: {
        buttons: \'..\'
    }
}
用这些TinyMCE settings. 而不是3个对象中的任何一个(settings 它本身tinymcequicktags) 您可以使用true 使用默认值。

  1. wp.editor.remove = function( id ) {
是不言而喻的。删除通过创建的任何编辑器实例wp.editor.initialize.

  1. wp.editor.getContent = function( id ) {
好吧,获取通过以下方式创建的任何编辑器的内容wp.editor.initialize.

用法可能是这样的

var countEditors = 0;
$(document).on(\'click\', \'button#addEditor\', function() {
    var editorId = \'editor-\' + countEditors;
    // add editor in HTML as <textarea> with id editorId
    // give it class wp-editor
    wp.editor.initialize(editorId, true);
    countEditors++;
});
$(document).on(\'click\', \'button.removeEditor\', function() {
   // assuming editor is under the same parent
   var editorId = $(this).parent().find(\'.wp-editor\');
   wp.editor.remove(editorId);
});
由于内容将自动发布,因此本例中不需要该内容。但你可以通过wp.editor.getContent( editorId )

SO网友:Bjorn

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)

  • 注意:以上代码示例未经过充分测试,可能包含一些错误。我在我的应用程序中完全可以使用它。这纯粹是为了让你走。

    SO网友:Antonio Novak

    您需要使用wp_enqueue_editor(); 首先输出编辑器脚本、样式表和默认设置。你可以在这里找到记录wp_enqueue_editor()

    您需要从函数中删除true,如下所示:wp.editor.initialize(editorId);

    结束

    相关推荐

    WP_EDITOR前面的按钮插入链接不起作用

    我在前端显示了一个wp\\u编辑器,在最近的wp更新之前,一切都很顺利。现在,“插入/编辑链接”由于Javascript错误而无法工作:Uncaught TypeError: Cannot set property \'tempHide\' of undefined 此错误仅出现在前端。后端运行正常。我已经在StackExchange和Google上找到了它。也许我没有使用正确的关键字,但我找不到有同样问题的人。。。有人有主意吗?