将html编辑器添加到插件设置页面

时间:2017-03-27 作者:pressword

我正在使用register\\u settings()api创建插件设置页面。

我怎样才能创建一个html编辑器(wordpress默认编辑器会很棒),而不仅仅是一个文本区域。

这是我正在使用的代码的一个示例:

add_action( \'admin_menu\', \'pw_add_admin_menu\' );
add_action( \'admin_init\', \'pw_settings_init\' );


function pw_add_admin_menu(  ) { 

    add_menu_page( \'wpset\', \'wpset\', \'manage_options\', \'pset\', \'pw_options_page\' );

}


function pw_settings_init(  ) { 

    register_setting( \'pluginPage\', \'pw_settings\' );

    add_settings_section(
        \'pw_pluginPage_section\', 
        __( \'Live Credentials\', \'pw\' ), 
        \'pw_settings_section_callback\', 
        \'pluginPage\'
    );
    add_settings_field( 
        \'pw_textarea_intro\', 
        __( \'Header Intro Text\', \'pw\' ), 
        \'pw_textarea_intro_render\', 
        \'pluginPage\', 
        \'pw_pluginPage_section\' 
    );
}

function pw_textarea_intro_render(  ) { 

    $options = get_option( \'pw_settings\' );
    ?>
    <textarea cols=\'40\' rows=\'5\' name=\'pw_settings[pw_textarea_intro]\'> 
        <?php echo $options[\'pw_textarea_intro\']; ?>
    </textarea>
    <?php

}
我已经将代码简化为一个字段,但还有更多字段。

这是为我呈现文本区域,但我无法格式化文本,它会在我输入设置页面的任何文本之前和之后不断添加额外的选项卡。

add_action( \'admin_menu\', \'pw_add_admin_menu\' );
add_action( \'admin_init\', \'pw_settings_init\' );


function pw_add_admin_menu(  ) { 

    add_menu_page( \'wpset\', \'wpset\', \'manage_options\', \'pset\', \'pw_options_page\' );

}


function pw_settings_init(  ) { 

    register_setting( \'pluginPage\', \'pw_settings\' );

    add_settings_section(
        \'pw_pluginPage_section\', 
        __( \'Live Credentials\', \'pw\' ), 
        \'pw_settings_section_callback\', 
        \'pluginPage\'
    );
    add_settings_field( 
        \'pw_textarea_intro\', 
        __( \'Header Intro Text\', \'pw\' ), 
        \'pw_textarea_intro_render\', 
        \'pluginPage\', 
        \'pw_pluginPage_section\' 
    );
    add_settings_field( 
        \'pw_intro\', 
        __( \'Intro\', \'pw\' ), 
        \'pw_intro_render\', 
        \'pluginPage\', 
        \'pw_pluginPage_section\' 
    );
}

function pw_textarea_intro_render(  ) { 

    $options = get_option( \'pw_settings\' );
    ?>
    <textarea cols=\'40\' rows=\'5\' name=\'pw_settings[pw_textarea_intro]\'> 
        <?php echo $options[\'pw_textarea_intro\']; ?>
    </textarea>
    <?php

}

function pw_intro_render() {
    $options = get_option( \'pw_settings\' );
    echo wp_editor( $options[\'pw_intro\'], \'pw_intro\', array(\'textarea_name\' => \'pw_intro\', \'media_buttons\' => false)  );
}
我按照Dave的建议添加了新代码(谢谢!)现在它加载了wp编辑器,但当我单击save提交更改时,它不会保存wp\\U编辑器的内容。有什么想法吗?

2 个回复
最合适的回答,由SO网友:Dave Romsey 整理而成

这里是原始代码的更新版本,它解决了保存问题。

WP编辑器内的内容未保存的原因是textarea_name 参数传递给wp_editor().

这是错误的:

 \'textarea_name\' => \'pw_intro\',
应该是这样的:

 \'textarea_name\' => \'pw_settings[pw_intro]\',
我还从wp_editor(), 修复了文本区域周围的额外空格等。

完整代码示例:

add_action( \'admin_menu\', \'pw_add_admin_menu\' );
add_action( \'admin_init\', \'pw_settings_init\' );
function pw_add_admin_menu(  ) { 
    add_menu_page( \'wpset\', \'wpset\', \'manage_options\', \'pset\', \'pw_options_page\' );
}

function pw_settings_init(  ) { 
    register_setting( \'pluginPage\', \'pw_settings\' );

    add_settings_section(
            \'pw_pluginPage_section\', 
            __( \'Live Credentials\', \'pw\' ), 
            \'pw_settings_section_callback\', 
            \'pluginPage\'
    );

    add_settings_field( 
            \'pw_textarea_intro\', 
            __( \'Header Intro Text\', \'pw\' ), 
            \'pw_textarea_intro_render\', 
            \'pluginPage\', 
            \'pw_pluginPage_section\' 
    );

    add_settings_field( 
            \'pw_intro\', 
            __( \'Intro\', \'pw\' ), 
            \'pw_intro_render\', 
            \'pluginPage\', 
            \'pw_pluginPage_section\' 
    );
}

function pw_textarea_intro_render(  ) { 
    $options = get_option( \'pw_settings\', array() );

?><textarea cols=\'40\' rows=\'5\' name=\'pw_settings[pw_textarea_intro]\'><?php echo isset( $options[\'pw_textarea_intro\'] ) ?  $options[\'pw_textarea_intro\'] : false; ?></textarea><?php
}

function pw_intro_render() {
    $options = get_option( \'pw_settings\', array() );
    $content = isset( $options[\'pw_intro\'] ) ?  $options[\'pw_intro\'] : false;
    wp_editor( $content, \'pw_intro\', array( 
        \'textarea_name\' => \'pw_settings[pw_intro]\',
        \'media_buttons\' => false,
    ) );
}

// section content cb
function pw_settings_section_callback() {
    echo \'<p>Section Introduction.</p>\';
}

SO网友:Mark Kaplun

总是总是总是转义输出(好吧,有些罕见的情况下你不应该这样做,但经验法则是转义)。对于textarea 您需要对内容进行html转义

<textarea><?php echo esc_html(get_option(\'my option\')?></textarea>

在起点和终点之间留有空间textarea 标记和实际输出也没有帮助,可能会在实际“内容”周围添加一些空格

相关推荐