Codemirror For Just One-line-textfield?

I have a one line textfield. (input type='text') I don't have a textarea. This textfield allows the user to enter small strings in a simple DSL. To give you an idea they look like

Solution 1:

Well, there is a way to make a single-line editor using rich capabilities of CodeMirror. First, you'll have to add a full-featured CodeMirror object (use a textarea).

Assume you've got var cm = CodeMirror(...). (Use value: ""). Then do

cm.setSize(200, cm.defaultTextHeight() + 2 * 4);
// 200 is the preferable width of text field in pixels,// 4 is default CM padding (which depends on the theme you're using)// now disallow adding newlines in the following simple way
cm.on("beforeChange", function(instance, change) {
    var newtext = change.text.join("").replace(/\n/g, ""); // remove ALL \n !
    change.update(change.from, change.to, [newtext]);
    returntrue;
});

// and then hide ugly horizontal scrollbar
cm.on("change", function(instance, change) {
    $(".CodeMirror-hscrollbar").css('display', 'none');
    // (!) this code is using jQuery and the selector is quite imperfect if// you're using more than one CodeMirror on your page. you're free to// change it appealing to your page structure.
});

// the following line fixes a bug I've encountered in CodeMirror 3.1
$(".CodeMirror-scroll").css('overflow', 'hidden');
// jQuery again! be careful with selector or move this to .css file

This works just fine for me.

Solution 2:

You could just run a regex on the field when somebody hits a key.

When the event happens you do a str.replace on the content of a contentEditable element which is about one line high kinda like this:

var r = /from\s+(\w+)\s+to\s+(\w+)/gi
s.replace(r, 'from <em>$1</em> to <emclass="to">$2</em>');

for that kind of approach you wouldn't need a code-editor, and you could just style your tags with these classes...

simples