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

by

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!

Leave a Comment