plugin development - Use CodeMirror editor for both CSS and HTML on the same page

admin管理员组

文章数量:1277903

I am trying to load the CodeMirror editor to be used in a plugin backend. Some textareas are for HTML and some are for CSS. I am quite new to WP development, so pardon my ignorance, but doing this:

    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');
    }

I only get the one that is last declared, here CSS. How can I get both?

This is my js:

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

And HTML:

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

And also, is it not possible to .initzialie() several textareas with a shared class in one go? Do I have to call each one by id?

I am trying to load the CodeMirror editor to be used in a plugin backend. Some textareas are for HTML and some are for CSS. I am quite new to WP development, so pardon my ignorance, but doing this:

    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');
    }

I only get the one that is last declared, here CSS. How can I get both?

This is my js:

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

And HTML:

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

And also, is it not possible to .initzialie() several textareas with a shared class in one go? Do I have to call each one by id?

• plugin-development

Share Improve this question edited Oct 6, 2019 at 11:37 user3459805 asked Oct 6, 2019 at 7:13 user3459805user3459805 3133 bronze badges

Add a comment  | 

4 Answers 4

Sorted by: Reset to default 1

I just ran into this exact issue and with a tiny bit of tweaking it should work, what you have is 90% of the way there.

I've tweaked your code slightly so it should now work.

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);
});

Before I got the above working, I tried exactly the same as you did with running wp_localize_script twice. But $joermo_html_code['ce_html'] & $joermo_css_code['ce_css'] can be switched to an array and then you only need to run localize once. So in my example it became $joermo_code['ce_html'] & $joermo_code['ce_css'].

Hope this helps!

This approach might be easier to read. wp.codeEditor.initialize must be used for both, just passed the desired setting.

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' );

JS

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

None of the above worked for me. But i found a solution.

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);

Now both work like a charm. :)

Another way to do this without an additional JS file:

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 )
            )
        );
    }
}

本文标签： plugin developmentUse CodeMirror editor for both CSS and HTML on the same page