使用编辑器将 wordpress 表单呈现为 ajax 响应无法正常工作

Question

在我的 wordpress 项目中，我尝试创建具有不同字段的自定义主题选项。但是当我尝试使用带有文本编辑器的 ajax 加载表单时遇到问题。呈现的编辑器带有样式和 javascript 问题，即文本颜色变为白色，编辑器按钮不可见，文本和视觉切换也不起作用。我想我需要运行一些 javascript 或者我错过了一些可以在呈现的 html 中调用的 js 文件，我附上了带有此消息的屏幕截图，我的呈现 html 代码如下，此表单在管理区域中被重新命名为内部 html

<form id="bgntheme_option_form" action="#" method="post">
  <ul>
    <li class="li-first">
      <div class="option-field">Home Page Header</div>
      <div class="option-value">
        <?php
            $settings = array( 'textarea_name' => 'bgntheme_home_header' );         
            wp_editor( $content, $editor_id, $settings );        
        ?>
        <p class="field-info">Header textarea for homepage.</p>
      </div>
      <div class="clear-both"></div>
    </li>
    <li class="update-form">
      <button id="bgntheme_submit" name="general-settings-submit" value="Update-General" >Update</button>      
    </li>
  </ul>
</form>

Answer 1

我遇到了你的问题，我解决了。 在您的 javascript 文件中的回调函数中添加以下代码：

quicktags({id : 'your_editor_id'});
tinymce.execCommand( 'mceAddEditor', false, 'your_editor_id' );

听到就是一个例子：

$.ajax({
        url: data.ajax_url,
        type: 'post',
        datatype: 'json',
        success : function (response) {
            $('.row').append(String(response));
            quicktags({id : 'your_editor_id'});
            tinymce.execCommand( 'mceAddEditor', false, 'your_editor_id' );
            }
        });

Answer 2

您必须在您的ajax成功方法中添加以下sn-p：

tinymce.execCommand('mceRemoveEditor', true, 'your_editor_id' );
tinymce.execCommand('mceAddEditor', true, 'your_editor_id' );

请将your_editor_id 替换为编辑器ID。

更新

你可以试试这个：

1) HTML

<ul>
<li class="li-first">
  <div class="option-field">Home Page Header</div>
  <div class="option-value">
    <?php
       $settings = array('media_buttons' => false, 'textarea_name' => 'bgntheme_home_header' );         
        wp_editor( '', 'my_editor', $settings );        
    ?>
    <p class="field-info">Header textarea for homepage.</p>
  </div>
  <div class="clear-both"></div>
</li>
<li class="update-form">
  <button id="bgntheme_submit" name="general-settings-submit" value="Update-General" >Update</button>      
</li>

2) JS

success : function( response ) { 
        jQuery('#content-wrapper-inner').html(response); 
        jQuery('#content-wrapper-inner').fadeIn("slow",function‌​() {   
            tinymce.execCommand('mceRemoveEditor', true, 'my_editor' ); 
            tinymce.execCommand('mceAddEditor', true, 'my_editor' ); 
        }); 
 }