Как загрузить wp_editor () через AJAX / jQuery

22

У меня есть тема, которая специально разработана и действительно сложна. Одна из вещей, которые у меня есть, это несколько областей контента, где пользователи могут указывать контент для определенных вкладок. Я загружаю несколько экземпляров редактора WordPress через wp_editor()функцию. Работает отлично. (Это все на стороне администратора, в типе поста "Страница")

Однако я начал вносить некоторые улучшения, в том числе возможность динамически добавлять / удалять вкладки (раньше я загружал 6 редакторов на странице). Пользователи могут иметь 1-7 вкладок.

Когда пользователи добавляют вкладку, она должна добавить экземпляр редактора на страницу. Однако, что бы я ни пытался, я не могу заставить его загружаться и отображаться правильно.

Вот две вещи, которые я пробовал до сих пор:

  1. Создайте php-файл с включенной начальной загрузкой администратора, а затем загрузите редактор с помощью wp_editor(). Затем я делаю jQuery $.loadдля вызова страницы и включаю полученный HTML-код в область, которая должна отображаться. Однако это не работает, так как кнопки форматирования редакторов исчезают (стоит отметить, что при перетягивании страницы вверх редактор отображается и работает отлично)
  2. Загрузите редактор на странице, внутри скрытого элемента div, а затем, после добавления вкладки, используйте jquery, чтобы переместить ее на место. Это загружает редактор в такт, но вы не можете использовать любую из кнопок редактора (они отображаются, но ничего не делают), и вы не можете поместить курсор в текстовую область (любопытно, однако, что переход в режим HTML позволяет печатать и немного взаимодействовать с кнопками режима HTML)

Итак, вопрос в том, кому-нибудь повезло, добавив редакторов через вызовы AJAX? Любой совет?

Аарон Вагнер
источник
Вы пытались сделать вызов Ajax через admin-ajax.php? Если не сделать функцию с вашим кодом, то вызовите его черезadmin-ajax.php
Sisir
Помогает ли это предложение ? Если так, то это не вопрос WordPress. :)
fuxia
@Sisir, если я правильно читаю ваше предложение, значит, оно не сработало. Я использовал это для вызова формы Ajax: $('#sph-tabs-section-tab'+newTab).load('/wp-admin/admin-ajax.php?action=sph_add_editor');а затем добавил функцию, которая возвращает wp_editor(). Он вызывается без проблем, но все равно возвращает только редактор без кнопок. (точно такие же результаты, как в пункте 1 в ОП)
Аарон Вагнер
После инициализации TinyMCE нельзя перемещать в DOM. Вы должны удалить его, перейти в DOM и инициализировать снова. Аналогичный код, но для комментариев внешнего интерфейса здесь, в моем блоге: techytalk.info/… Форма комментариев перемещается, когда пользователь нажимает ответить / отменить ответ.

Ответы:

7

Чтобы отобразить ярлыки быстрого доступа, вам необходимо создать их экземпляр в обработчике ajax oncomplete.

quicktags({id : 'editorcontentid'});

Мой обработчик успеха ajax выглядит так;

success: function(data, textStatus, XMLHttpRequest){
            //append editor to dom
            $('#container').append($(data).html());
            //init quicktags
            quicktags({id : 'editorcontentid'});
            //init tinymce
            tinymce.init(tinyMCEPreInit.mceInit['editorcontentid']);
        }

Мне удалось заставить редактор загружаться, сначала вызвав статическую функцию, которая создает редактор и кэширует его как переменную. Я запускаю метод создания редактора на init. Похоже, что WordPress включает все необходимые скрипты.

Важно, чтобы при создании вашего экземпляра редактора, чтобы вы установили его на использование tinymce, таким образом также заполнялся файл tinymce js.

Дейл Саттлер
источник
4

После борьбы с этим, нашел решение, которое работает, в обратном вызове после добавления нового элемента:

tinymce.execCommand( 'mceAddEditor', true, element.id );

Странно, что внутри кодекса нет документации.

Горан Яковлевич
источник
1
tinymce - это внешний ресурс, поэтому я думаю, что они могут подумать, что собственные документы tinymce покрывают его - tinymce.com/docs - но довольно скудно на примерах ... Также вы должны включить сценарии tincemce, чтобы этот ответ работал! (самый простой способ - вывести один фиктивный PHP wp_editor()с tinymceустановленным аргументом arg true:-)
jave.web
спасибо, приятель ... это работает и для меня - после возвращения данных из ajax я просто инициализирую это ...;)
Sagive SEO
3

Наконец, рабочее решение:

добавить действие в WordPress, скажем My_Action_Name(также обратите внимание, текстовое ID My_TextAreaID_22):

add_action('wp_ajax_My_Action_Name', function(){
    wp_editor( $_POST['default_text'], 'My_TextAreaID_22',      $settings = array( 'tinymce'=>true, 'textarea_name'=>'name77', 'wpautop' =>false,   'media_buttons' => true ,   'teeny' => false, 'quicktags'=>true, )   );    exit;
});

Теперь, в Dashboard, выполните эту функцию (обратите внимание, с использованием My_TextAreaID_22и My_Action_Name):

function start_Ajax_request() { 
    My_New_Global_Settings =  tinyMCEPreInit.mceInit.content;       // Get default Wordpress SETTINGS  ( I cant confirm, but if you will need to change target ID, then add this line:  My_New_Global_Settings.selector = "My_TextAreaID_22";   )
    jQuery.post(ajaxurl,
        { action: "My_Action_Name",     default_text: "Hello World"}, 
        function(response,status){ 
            tinymce.init(My_New_Global_Settings); 
            tinyMCE.execCommand('mceAddEditor', false, "My_TextAreaID_22"); 
            quicktags({id : "My_TextAreaID_22"});
            // tinyMCE.execCommand( 'mceAddEditor', true, element.id );
        }
    );

}   
start_Ajax_request();     // < ---- EXECUTE
T.Todua
источник
2

Вам нужно снова вызвать редактор init после добавления вашего ajax textarea, я сделал это так:

$.fn.tinymce_textareas = function(){
  tinyMCE.init({
    skin : "wp_theme"
    // other options here
  });
};

Затем вызовите вашу функцию после вашего AJAX, например так:

$('#my_new_textarea_container').html(response).tinymce_textareas();
Шахар
источник
2
Пожалуйста, объясните, как это работает? Это не работает. Я попробовал это.
Ахмед Фуад
После добавления содержимого ajax, которое содержит текстовую область, которую я хочу для tinyMCE on ( response), вызовите функцию tinymce_textareas, которая инициализирует tinyMCE для новых текстовых областей.
Шахар
1

Полезное решение от @toscho на github . Он построил этот хороший результат и для вопроса здесь, см. Его ответ для более подробной информации.

bueltge
источник
Это требует библиотеки для использования - T5 ... не решение только для WP
cale_b
0

Используйте этот код, надеюсь, он поможет:

wp_editor( '', 'custom_editor_id' );
\_WP_Editors::enqueue_scripts();
print_footer_scripts();
\_WP_Editors::editor_js();

Более подробную информацию можно найти здесь .

Дилип Кумар Авастхи
источник
Пожалуйста, поделитесь суть, как этот код может помочь, а затем добавьте ссылку для более подробной информации. Ответы, содержащие только ссылки, становятся недействительными, если ссылка не работает - надеюсь, вы понимаете. :)
Mayeenul Islam
Эта ссылка сейчас не работает, и у меня нет контекста за ответом. (Одна из многих причин, почему ответы «просто ссылка» плохие)
Судар
Это работает, но есть некоторые проблемы, когда вы выбираете текст или визуал, он создает дубликаты текстовых областей в редакторе
Johan Pretorius
0

Мне это удалось:

  1. Для начала вам нужно вызвать wp_editor на главной странице, откуда вы вызываете ajax. Но вы должны обернуть его в скрытый div:

    <div style="display:none">
    <?php
    wp_editor( '', 'unique_id', array(
        'media_buttons' => false,
        'textarea_rows' => 10,
        'teeny' => true,
    ) );
    ?>
    </div>

Идентификатор должен быть случайным и уникальным. Настройки должны совпадать с настройками в вашем редакторе ajax.

  1. Во-вторых, вам нужно вызвать это в ответ Ajax:

wp_editor( '', '[set id as you need]', array(the same settings as in the main page) ); _WP_Editors::editor_js(); //this print editor init code

Тим Матц
источник
0

Это будет работать на страницах администратора.

Чтобы добавить новый wp-редактор в контейнер с помощью JS AJAX:

1) Создайте функцию wp_ajax в functions.php для возврата wp_editor

2) Создайте скрипт jQuery для запроса нового текстового редактора и добавьте его в контейнер, для этого случая, при нажатии кнопки

PHP-файл

function yourprefix_get_text_editor() {
    $content = ""; // Empty because is a new editor
    $editor_id = $_POST["text_editor_id"]; // Random ID from AJAX JS call
    $textarea_name = $_POST["textarea_name"]; // Name from JS file
    $settings = array(
        'textarea_name' => $textarea_name
    );
    wp_editor($content, $editor_id, $settings);
    wp_die(); // Mandatory wp_die
}
add_action('wp_ajax_yourprefix_get_text_editor', 'yourprefix_get_text_editor');

JS Script (jsfile.js)

jQuery(function($) {
$("someelement").click(function(e) { // To Add an Editor from a button click
    var target = themeajax.ajax_url; // Passed from wp_localize_script
    var editor_id = "editorid"; // Generate this dynamically
    var textarea_name = "textareaname" // Generate this as you need
    var data = {
        'action': 'yourprefix_get_text_editor',
        'text_editor_id': editor_id,
        'textarea_name': textarea_name
    }
    $.post(target, data, function(response) {
        container.append(response); // Use your logic to get the container where you want to append the editor
        tinymce.execCommand('mceAddEditor', false, editor_id);
        quicktags({id : editor_id});
    });
}
});

Сценарии постановки вызова:

function yourprefix_admin_scripts($hook) {
    wp_enqueue_script('your-slug', get_stylesheet_directory_uri() . '/path/to/jsfile.js', array('jquery'), null, true);
    wp_localize_script('your-slug', 'themeajax', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
}
add_action('admin_enqueue_scripts', 'yourprefix_admin_scripts');
Исаак Леви Феликс Салинас
источник