1

I am editing the Slightly Modded Options Framework. I am enqueuing the script in functions.interface.php. Here is the function

function of_load_only() {
    // add_action('admin_head', 'smof_admin_head');
    wp_enqueue_script("jquery-ui-core");
    wp_enqueue_script("jquery-ui-sortable");
    wp_enqueue_script("jquery-ui-slider");
    wp_enqueue_script("jquery-input-mask", ADMIN_DIR ."assets/js/jquery.maskedinput-1.2.2.js", array("jquery"), false, true);
    wp_enqueue_script("tipsy", ADMIN_DIR ."assets/js/jquery.tipsy.js", array("jquery"), false, true);

    // enqueue codemirror
    wp_enqueue_script("codemirror", ADMIN_DIR . "assets/js/codemirror/codemirror.min.js", array(), "3.15", true);

    // wp_enqueue_script('color-picker', ADMIN_DIR .'assets/js/colorpicker.js', array('jquery'));
    wp_enqueue_script("cookie", ADMIN_DIR . "assets/js/cookie.js", array("jquery"), false, true);
    wp_enqueue_script("smof", ADMIN_DIR ."assets/js/smof.js", array("jquery"), false, true);
    // Enqueue colorpicker scripts for versions below 3.5 for compatibility
    if(!wp_script_is("wp-color-picker", "registered")) {
        wp_register_script("iris", ADMIN_DIR ."assets/js/iris.min.js", array("jquery-ui-draggable", "jquery-ui-slider", "jquery-touch-punch"), false, 1);
        wp_register_script("wp-color-picker", ADMIN_DIR ."assets/js/color-picker.min.js", array("jquery", "iris"));
    }
    wp_enqueue_script("wp-color-picker");

    // Enqueue scripts for file uploader
    if(function_exists("wp_enqueue_media")) {
        wp_enqueue_media();
    }
    do_action("of_load_only_after");
}

Here is a link to the relevant source code.

The Problem

So far CodeMirror has been substantially less cumbersome to deal with than Ace. The issue I am having is that CodeMirror is initially hidden until I press a key in the editor itself. I've read the "solutions" here:

What I've Tried

Here is the code

$("#custom_css").val("/* Write code here */");
var codemirror_editor = CodeMirror.fromTextArea(document.getElementById("custom_css"), {
    lineNumbers: true,
    matchBrackets: true,
    styleActiveLine: true,
    lineWrapping: true,
    autoCloseBrackets: true,
    showTrailingSpace: true,
    indentUnit: 4,
    indentWithTabs: true,
    viewportMargin: Infinity,
    autofocus: true
});
// codemirror_editor.refresh(); // does not work even on the CodeMirror instance
// setTimeout(codemirror_editor.refresh, 0) // does not work per the CodeMirror has content but won't display until keypress solution

Here are two images that show before keypress and after keypress in the editor.

Before Keypress After Keypress

Community
  • 1
  • 1
djthoms
  • 3,026
  • 2
  • 31
  • 56
  • it [works when isolated](http://jsbin.com/utadeb/1/edit), you must have something else in your code interfering with the initiation. show some more code, what else are you doing on that page before initiation? when is code mirror injected? how is the markup? – Eliran Malka Aug 12 '13 at 09:59
  • @EliranMalka, more has been added to further identify the issue. – djthoms Aug 12 '13 at 23:17

1 Answers1

0

It was a CSS issue in admin-style.css line 422. Commented that out and it solved my woes!

djthoms
  • 3,026
  • 2
  • 31
  • 56