如何创建多个编辑器?

时间:2017-05-10 作者:Amiyar

我想为我的自定义帖子类型创建多个编辑器packages 职位。这是一个3天的套餐,我想为每天添加描述,如第1天、第2天和第3天。对于5天的包,应该有5个这样的编辑器。

1 个回复
SO网友:LWS-Mo

如前所述,您应该为此使用自定义元数据库。

您可以使用类似ACF的插件创建这些元数据库,也可以自己编写。

您的场景/设置最适合创建一个可重复的metabox,其中包含一个自定义WYSIWYG编辑器字段。这样您就可以为每个帖子创建不同数量的字段。

如果你想使用/构建这样的东西,我也会推荐一个现有的插件!要自己构建它,您至少需要对JS有很好的了解。

此外,由于WP使用tinyMCE,它使用iframe,因此您将遇到一些浏览器限制,需要找到一些解决方法。

如果你想走那条路线,你可以阅读这张出发的核心票。已经为此提供了一个补丁,所以当它包含在core中时,创建可重复/可排序的WYSIWIG编辑器应该“更简单”。https://core.trac.wordpress.org/ticket/19173

因此,最简单的解决方案是为您的packages 岗位类型。(或一个具有多个编辑器的元盒。)

使用以下代码,您可以使用编辑器创建一(1)个新的元盒。您可以调整代码以显示更多元框:

add_action(\'admin_init\', \'prfx_add_meta_box\', 1);
function prfx_add_meta_box() {

    // add one new metabox on the \'packages\' edit screen
    add_meta_box( 
        \'prfx_first-metabox\', // ID of the metabox
        \'My First Editor\', // title of the metabox
        \'prfx_metabox_callback\', // callback function, see below
        \'packages\', // <--- your post-type slug
        \'normal\', // context
        \'default\' // priority
    );
}
使用此函数,我们可以向packages posttype。

Codex链接:https://developer.wordpress.org/reference/functions/add_meta_box/

要创建WP使用的tinyMCE编辑器的新实例,可以使用wp_editor 作用这个函数将为您创建一个新的编辑器,所以您只需要指定一些参数。

Codex链接:https://codex.wordpress.org/Function_Reference/wp_editor

function prfx_metabox_callback() {
    global $post;

    // get value of our custom field
    $first_field = get_post_meta($post->ID, \'my-first-field-name\', true);

    // create a nonce for secure saving
    wp_nonce_field( \'prfx_first_nonce\', \'prfx_first_nonce\' );

    // check if our custom field has content
    if( $first_field ) {
        // if it has content, set the $content so we can display it as value in the field
        $content = $first_field;
    } else {
        // if it has no content, just return an empty value
        $content = \'\';
    }

    // create a new instance of the WYSIWYG editor
    wp_editor( $content, \'first_custom_editor\' , array(
        \'wpautop\'       => true,
        \'textarea_name\' => \'my-first-field-name\', // this is the \'name\' attribute of our field
        \'textarea_rows\' => 10,
    ) ); 

}
此外,还需要添加保存功能来保存将在新的自定义编辑器中输入的内容。

Codex链接:https://codex.wordpress.org/Function_Reference/update_post_meta

add_action(\'save_post\', \'prfx_save_meta_box\');
function prfx_save_meta_box($post_id) {

    // check our nonce
    if ( ! isset( $_POST[\'prfx_first_nonce\'] ) ||
    ! wp_verify_nonce( $_POST[\'prfx_first_nonce\'], \'prfx_first_nonce\' ) )
        return;

    // check for autosave
    if (defined(\'DOING_AUTOSAVE\') && DOING_AUTOSAVE)
        return;

    // check if user has rights
    if (!current_user_can(\'edit_post\', $post_id))
        return;

    // check if content exists in our custom field
    if ( isset( $_POST[\'my-first-field-name\'] ) ) {
        $contents = $_POST[\'my-first-field-name\'];

        // if content exists than update the meta value
        update_post_meta( $post_id, \'my-first-field-name\', $contents );
    }
}

结束