将CodeMirror编辑器用于同一页面上的CSS和HTML

时间：2019-10-06 作者：user3459805

我正在尝试加载CodeMirror编辑器以用于插件后端。有些文本区域用于HTML，有些用于CSS。我对WP开发非常陌生，请原谅我的无知，但这样做：

    add_action(\'admin_enqueue_scripts\', \'joermo_enqueue_scripts\');
    function joermo_enqueue_scripts($hook) {
        $joermo_html_code[\'ce_html\'] = wp_enqueue_code_editor(array(\'type\' => \'text/html\'));
        $joermo_css_code[\'ce_css\'] = wp_enqueue_code_editor(array(\'type\' => \'text/css\'));
        wp_localize_script(\'jquery\', \'joermo_html_code\', $joermo_html_code);
        wp_localize_script(\'jquery\', \'joermo_css_code\', $joermo_css_code);

        wp_enqueue_script(\'wp-theme-plugin-editor\');
        wp_enqueue_style(\'wp-codemirror\');
    }

我只得到最后声明的一个，这里是CSS。我怎样才能两者兼得？

这是我的js：

jQuery( function() {
    wp.ce_html.initialize(jQuery(\'.joermo-html-code-editor\'), joermo_html_code);
} );

和HTML：

<textarea class="joermo-html-code-editor" name="shipping_label_text">\' . $shipping_label_text . \'</textarea>

而且，这是不可能的。initzialie（）多个textareas可以一次性使用一个共享类？我必须用身份证给每个人打电话吗？

4 个回复

SO网友:Aaron Fisher

我刚刚遇到了这个确切的问题，只要稍加调整，它就会起作用，你所拥有的是90%的方式。

我对你的代码做了一些微调，现在应该可以工作了。

The PHP:

add_action(\'admin_enqueue_scripts\', \'joermo_enqueue_scripts\');
function joermo_enqueue_scripts($hook) {
    $joermo_code[\'ce_html\'] = wp_enqueue_code_editor(array(\'type\' => \'text/html\'));
    $joermo_code[\'ce_css\'] = wp_enqueue_code_editor(array(\'type\' => \'text/css\'));
    wp_localize_script(\'jquery\', \'joermo_code\', $joermo_code);

    wp_enqueue_script(\'wp-theme-plugin-editor\');
    wp_enqueue_style(\'wp-codemirror\');
}

The jQuery:

jQuery(function() {
    wp.ce_html.initialize(jQuery(\'.joermo-html-code-editor\'), joermo_code);
    wp.ce_css.initialize(jQuery(\'.joermo-css-code-editor\'), joermo_code);
});

在我完成上述工作之前，我尝试了与你一样的跑步方法wp_localize_script 两次但是$joermo_html_code[\'ce_html\'] &；$joermo_css_code[\'ce_css\'] 可以切换到阵列，然后只需运行本地化一次。所以在我的例子中$joermo_code[\'ce_html\'] &；$joermo_code[\'ce_css\'].

希望这有帮助！

SO网友:camilluskillus

以上这些都不适合我。但我找到了解决办法。

PHP：

    $cm_settings = wp_enqueue_code_editor( array( \'type\' => \'text/css\' ) );
    $cm_settings2 = wp_enqueue_code_editor( array( \'type\' => \'application/javascript\' ) );

    wp_localize_script(\'jquery\', \'cm_settings\', $cm_settings);
    wp_localize_script(\'jquery\', \'cm_settings2\', $cm_settings2);

    wp_enqueue_script(\'wp-theme-plugin-editor\');
    wp_enqueue_style(\'wp-codemirror\');

JS公司：

  wp.codeEditor.initialize($(\'#batheme_custom_css_textarea\'), cm_settings);
  wp.codeEditor.initialize($(\'#batheme_custom_js_textarea\'), cm_settings2);

现在两者都很有魅力。：）

SO网友:Marcio Duarte

无需附加JS文件即可完成此操作的另一种方法：

add_action( \'admin_enqueue_scripts\', \'my_admin_page_editor\' );

function my_admin_page_editor() {

    global $pagenow;

    if ( ( \'admin.php\' === $pagenow ) && ( \'my-options-page\' === $_GET[\'page\'] ) ) {

        $custom_css = wp_enqueue_code_editor( array( \'type\' => \'text/css\' ) );
        $header_js  = wp_enqueue_code_editor( array( \'type\' => \'application/javascript\' ) );
        $footer_js  = wp_enqueue_code_editor( array( \'type\' => \'application/javascript\' ) );

        wp_add_inline_script(
            \'code-editor\',
            sprintf(
                \'jQuery( function() {
                    wp.codeEditor.initialize( jQuery( ".my-custom-css textarea" ), %1$s );
                    wp.codeEditor.initialize( jQuery( ".my-header-scripts textarea" ), %2$s );
                    wp.codeEditor.initialize( jQuery( ".my-footer-scripts textarea" ), %3$s );
                });\',
                wp_json_encode( $custom_css ),
                wp_json_encode( $header_js ),
                wp_json_encode( $footer_js )
            )
        );
    }
}

SO网友:Twinpictures Info

这种方法可能更容易阅读。wp。代码编辑器。initialize必须同时用于这两种情况，只是通过了所需的设置。

PHP

wp_register_script(\'cm_js\', plugins_url(\'js/admin_codemirror.js\', __FILE__), array(\'jquery\'), \'0.1.0\', true);
$cm_settings = array(
    \'ce_css\' => wp_enqueue_code_editor(array(\'type\' => \'text/css\')),
    \'ce_html\' => wp_enqueue_code_editor(array(\'type\' => \'text/html\'))
);
        
wp_localize_script( \'cm_js\', \'cm_settings\', $cm_settings );
wp_enqueue_script( \'cm_js\' );
wp_enqueue_script( \'wp-theme-plugin-editor\' );
wp_enqueue_style( \'wp-codemirror\' );

wp.codeEditor.initialize($(\'#id_for_css\'), cm_settings.ce_css);
wp.codeEditor.initialize($(\'#id_for_html\'), cm_settings.ce_html);

小码农CODE

将CodeMirror编辑器用于同一页面上的CSS和HTML

相关推荐