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成功方法中：

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' ); 
        }); 
 }

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

2 个答案: