通过Ajax插件加载Wordpress编辑器

这是我能想到的最好的，我认为它对我来说已经足够好了。

除了快速标签，一切都在工作，没有它们我也能生活。

我从funsions.php中删除了javascript

<?
// load custom editor template 
function load_editor_template( $template )
{
    $template = plugin_dir_path( __FILE__ ) . 'template.php';
    return $template;
}
add_filter( 'template_include', 'load_editor_template' );
// load javascript 
function load_editor_scripts() {
    wp_enqueue_script( 'load_editor', plugins_url() . '/load_editor/js/load_editor.js', array(), '', true );
    wp_enqueue_script( 'jquery');
}
add_action( 'wp_enqueue_scripts', 'load_editor_scripts' );
// create new editor
function load_editor_new_editor() {
    $id      = $_POST['id'];
    $number  = $_POST['number'];
    $next    = $number + 1;
    $full_id = $id.$number;
    echo "<h1>Editor $number</h1>";
    $content = '<p>This is example content.</p>';
    wp_editor($content, $full_id, array('textarea_rows' => 3));
    // create "add new" text
    echo "<div id='add'><a onclick='"load_new_editor('editor', $next);'" href='javascript:void(0);'>Click here</a> to add another editor</div>";
    die();
}
add_action( 'wp_ajax_load_editor_new_editor', 'load_editor_new_editor' );

然后我在load_editor.js上更改了以下内容

1. 添加了快速标签功能，使标签可以正常工作而不会出错
2. 使用WordPress使用的设置调用tinymce.init

我想就是这样。

// JavaScript Document
function load_new_editor(id, number){
    // remove click to add
    jQuery('#add').remove();
    var fullId = id + number;
    var data = {
        'action': 'load_editor_new_editor',
        'number': number,
        'id': id
    };
    jQuery.post(ajaxurl, data, function(response) {
        //add new editor
        jQuery('#editor_container').append(response);
        // this is need for the tabs to work
        quicktags({id : fullId});
        // use wordpress settings
        tinymce.init({
        selector: fullId,
        theme:"modern",
        skin:"lightgray",
        language:"en",
        formats:{
                        alignleft: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                        ],
                        aligncenter: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                        ],
                        alignright: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                        ],
                        strikethrough: {inline: 'del'}
                    },
                    relative_urls:false,
                    remove_script_host:false,
                    convert_urls:false,
                    browser_spellcheck:true,
                    fix_list_elements:true,
                    entities:"38,amp,60,lt,62,gt",
                    entity_encoding:"raw",
                    keep_styles:false,
                    paste_webkit_styles:"font-weight font-style color",
                    preview_styles:"font-family font-size font-weight font-style text-decoration text-transform",
                    wpeditimage_disable_captions:false,
                    wpeditimage_html5_captions:true,
                    plugins:"charmap,hr,media,paste,tabfocus,textcolor,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpview",
                    selector:"#" + fullId,
                    resize:"vertical",
                    menubar:false,
                    wpautop:true,
                    indent:false,
                    toolbar1:"bold,italic,strikethrough,bullist,numlist,blockquote,hr,alignleft,aligncenter,alignright,link,unlink,wp_more,spellchecker,fullscreen,wp_adv",toolbar2:"formatselect,underline,alignjustify,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help",
                    toolbar3:"",
                    toolbar4:"",
                    tabfocus_elements:":prev,:next",
                    body_class:"id post-type-post post-status-publish post-format-standard",
});

        // this is needed for the editor to initiate
        tinyMCE.execCommand('mceAddEditor', false, fullId); 
    });
}

这是它工作的屏幕截图。http://screencast.com/t/Psd9IVVY

如果有人知道如何让快速标签显示出来，我很想知道。

此外，如果你发现我的代码有问题，请告诉我。

如果你想在这里下载，我已经更新了github：https://github.com/ccbgs/load_editor

（答案如下：https://wordpress.stackexchange.com/questions/51776/how-to-load-wp-editor-through-ajax-jquery/192132）


1） 在functions.php中，添加：

add_action('init','my_wpEditOUPUTT'); function my_wpEditOUPUTT(){
    if (isset($_POST['Give_me_editorrr'])){
        wp_editor( '' , 'txtrID_'.$_POST['myNumber'], $settings = array( 'editor_class'=>'my_class',     'textarea_name'=>'named_'. $_POST['myNumber'],  'tinymce'=>true , 'media_buttons' => true , 'teeny' => false,));
        exit;   
    }
}

2） 仪表板内部HTML页面：

<div id="MyPlace"></div> <a href="javascript:myLoad();">Click to load</a>
<script type="text/javascript">
startNumber = 1;
function myLoad(){ alert('wait 1 sec');
    startNumber ++;
    jQuery.post('./index.php', '&Give_me_editorrr=1&myNumber='+startNumber ,
        function(data,status){ 
            if (status == "success") {  
                document.getElementById('MyPlace').innerHTML += data; alert("Inserted!");   
                tinymce.init({ selector: 'txtrID_'+startNumber, theme:'modern',  skin:'lightgray'}); tinyMCE.execCommand('mceAddEditor', false, 'txtrID_'+startNumber);
            }
    });
}
</script>