load wordpress wp_editor динамически (ajax)

Question

Это ответ/решение, а не вопрос, но там могут быть некоторые ошибки, даже я пробовал на своем dev env.

Недавно я попытался использовать wp_editor в виджетах/меню, после некоторого поиска я не нашел полного решения, как я хочу.

Я хотел бы поделиться мое решение в ниже после того, как я копаться в коде РГ по часам:

Answer 1

Там может быть взлом участие, однако, я пытался свести их к минимуму.

Чтобы wp_editor может работать в динамическом HTML (что означает без перезагрузки страницы, JS изменяет структуру страницы), существуют две основные проблемы, необходимо позаботиться:

1. TinyMCE
2. qucik-теги

Для [TinyMCE]:

а. нужно сбросить пользовательский интерфейс правильно

• решение [удалить экземпляр MCE] -> [получить правильные параметры MCE] -> [повторно инициализировать новый экземпляр MCE]

• в JS код (идентификатор означает текстовой идентификатор):

  tinymce.execCommand('mceRemoveEditor', true, id); 
  var init = tinymce.extend({}, tinyMCEPreInit.mceInit[ id ]); 
  try { tinymce.init(init); } catch(e){} 
  

б. нужны записи данных обратно в текстовое поле, прежде чем отправить

• решение [привязывать нажмите на кнопку] -> по submt :: [выключить MCE] -> [включить отправить]

• в JS код:

  jq('textarea[id="' + id + '"]').closest('form').find('input[type="submit"]').click(function(){ 
      if(getUserSetting('editor') == 'tmce'){ 
       var id = mce.find('textarea').attr('id'); 
       tinymce.execCommand('mceRemoveEditor', false, id); 
       tinymce.execCommand('mceAddEditor', false, id); 
      } 
      return true; 
  }); 
  

Для [Quick] теги:

а. Re-INIT теги

• [Получить настройки] -> [Настройка событий мыши] -> [повторно инициализации QTags]

б. Перейдите на соответствующую вкладку (вкладка MCE или быстрой вкладки тегов)

• [переключатель для текущего режима вкладок]

• как выше в JS код:

  if (typeof(QTags) == 'function') { 
      jq('[id="wp-' + id + '-wrap"]').unbind('onmousedown'); 
      jq('[id="wp-' + id + '-wrap"]').bind('onmousedown', function(){ 
       wpActiveEditor = id; 
      }); 
      QTags(tinyMCEPreInit.qtInit[ id ]); 
      QTags._buttonsInit(); 
      switchEditors.switchto(jq('textarea[id="' + id + '"]').closest('.widget-mce').find('.wp-switch-editor.switch-' + (getUserSetting('editor') == 'html' ? 'html' : 'tmce'))[0]); 
  } 
  

Кроме того, пожалуйста, помните, если вы используете ajax, каждый раз после возврата mce UI, вам нужно повторно выполнить [сброс mce UI] и [Qtags] в js. легкий раствор с помощью JS код в проводке обратно HTML, и обнаружить в PHP из:

$isAjax = defined('DOING_AJAX') && DOING_AJAX == true);

О настройках по умолчанию в Js значение:

1. MCE: tinyMCEPreInit.mceInit

2. qtags: tinyMCEPreInit.qtInit

Если вы попытаетесь использовать настройку по умолчанию для режима виджетов, вам нужно найти настройки по умолчанию.

Чтобы получить виджет шаблона, в JS код:

function getTemplateWidgetId(id){ 
     var form = jQuery('textarea[id="' + id + '"]').closest('form'); 
     var id_base = form.find('input[name="id_base"]').val(); 
     var widget_id = form.find('input[name="widget-id"]').val(); 
     return id.replace(widget_id, id_base + '-__i__'); 
} 

Таким образом, вы можете получить настройки с помощью:

1. для MCE:

   var init; 
   if(typeof tinyMCEPreInit.mceInit[ id ] == 'undefined'){ 
       init = tinyMCEPreInit.mceInit[ id ] = tinymce.extend({}, tinyMCEPreInit.mceInit[ getTemplateWidgetId(id) ]); 
   }else{ 
       init = tinyMCEPreInit.mceInit[ id ]; 
   } 
   

2. Для Qtags:

   var qInit; 
   if(typeof tinyMCEPreInit.qtInit[ id ] == 'undefined'){ 
       qInit = tinyMCEPreInit.qtInit[ id ] = jq.extend({}, tinyMCEPreInit.qtInit[ getTemplateWidgetId(id) ]); 
       qInit['id'] = id; 
   }else{ 
       qInit = tinyMCEPreInit.qtInit[ id ]; 
   } 
   

Для полного образца кода, пожалуйста, проверьте: https://github.com/hezachary/wordpress-wysiwyg-widget/blob/master/widget_wp_editor.class.php

Если кто-то хочет использовать wp_editor в меню ходьбы для администратора, принцип должен быть таким же.

Если у вас есть вопросы или лучше, пожалуйста, прокомментируйте, спасибо.

Answer 2

Я столкнулся с подобной проблемой. Я решил проблему с помощью следующей
1. Добавлена ​​следующий фильтр, чтобы открыть редактор всегда в визуальном режиме на главной странице

add_filter('wp_default_editor', create_function('', 'return "tinymce";')); 

2. В содержание Ajax используется следующее для редактора

wp_editor($content, "editor_ajax", array('textarea_name'=>"content_ajax",'quicktags' => array('buttons' => 'strong,em,link,block,del,ins,img,ul,ol,li,code,close'))); 

3. В содержание Ajax добавлено следующее JS код

<script src="<?php bloginfo('home')?>/wp-includes/js/quicktags.min.js"</script> 
<script> 
jQuery(document).ready(function(){ 

    ed_id = "editor_ajax"; 
    quicktags({id : ed_id,buttons:"strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,dfw"}); 
    tinyMCE.execCommand('mceAddEditor', false, fullId); 

}); 
</script> 

Answer 3

Рабочий раствор:

P.S. вы бы спросили у WP.SE: https://wordpress.stackexchange.com/a/192132/33667

---

добавить действие в 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; 
}); 

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

function start_Ajax_request() { 
    Alert("I have started"); 
    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){ 
      Alert("I have Finished"); 
      tinymce.init(My_New_Global_Settings); 
      tinyMCE.execCommand('mceAddEditor', false, "My_TextAreaID_22"); 
      quicktags({id : "My_TextAreaID_22"}); 
     } 
    ); 

} 
start_Ajax_request();  // < ---- EXECUTE