自定义调用CodeMirror编辑器

淮城一只猫 · · 224次浏览 ·

前言

在制作WP Editor.md插件中,我有个选项是配置JSON数据的表单框,如果直接在Textarea表单显示可能不容易看出来错误问题。所以一直在寻找更好的方法,大概前段时间看到WP更新支持CodeMirror外部调用,搜索相关资料甚是稀缺,相比文档还未完善,那今日花点时间去解决它吧。

踩坑

在老早之前有个用户发布帖子利用CodeMirror编辑主题或者插件内容得到广大好评以及支持,所以WP官方采纳他的方法。大概在WP 4.9.5版本之后,CodeMirror对外开发的Api逐渐完善,正好利用它完善选项框的显示。

其实引入CodeMirror非常简单,第一就是引入CodeMirror的资源,第二就是加入Textarea Dom ID对象或者jQuery ID对象渲染编辑器即可。

但WP都帮你封装好了,至于CodeMirror配置参数无需关心太多,你只需要引入下面代码即可使用:

add_action( 'admin_enqueue_scripts', 'myCodeMirror' );
function myCodeMirror() {

    wp_enqueue_script( 'code-editor' );
    wp_enqueue_style( 'code-editor' );

    // 编辑器内容类型
    settings = wp_enqueue_code_editor( array( 'type' => 'application/json' ) );      // 系统禁用CodeMirror     if ( false === settings ) {
        return;
    }

    wp_add_inline_script(
        'code-editor',
        sprintf(
            'jQuery( function() { wp.codeEditor.initialize( "myTextareaID", %s ); } );',//myTextareaID为Textarea ID
            wp_json_encode( $settings )
        )
    );

    wp_add_inline_script(
        'wp-codemirror',
        'window.CodeMirror = wp.CodeMirror;'
    );

}

你只需要注意配置内容类型,我这用的是'type' => 'application/json',更多类型请查看WordPress开发文档,其次就是注意myTextareaID为Textarea DOM ID对象,具体信息请参考wordpress\wp-admin\js\code-editor.js第265行。

参考

Code Editing Improvements in WordPress 4.9


淮城一只猫

永远年轻,永远热泪盈眶

1 个评论

今日新闻 · 2018年8月10日 - 上午1:04

文章不错非常喜欢

发表评论

电子邮件地址不会被公开。 必填项已用*标注

我不是机器人*