A good start

I asked this question "Codemirror - Use on multiple textareas?" a few years ago with a good answer. However, it still takes an ID as parameter. IDs are unique.

Find textarea by class instead of ID

When having multiple textareas, some with HTML and some with CSS on the same page, it would be nice to add a class instead of an ID.

Example

<p>Some content</p>

<textarea class="my_codemirror_html">
</textarea>

<p>Some content</p>

<textarea class="my_codemirror_html">
</textarea>'

If I can use jQuery for it, it's fine. I use that anyway on the page.

Update 2012-02-21 - Almost there

I found this post on jsFiddle. The only thing missing is that I can't make it work on textareas.

A good start

I asked this question "Codemirror - Use on multiple textareas?" a few years ago with a good answer. However, it still takes an ID as parameter. IDs are unique.

Find textarea by class instead of ID

When having multiple textareas, some with HTML and some with CSS on the same page, it would be nice to add a class instead of an ID.

Example

<p>Some content</p>

<textarea class="my_codemirror_html">
</textarea>

<p>Some content</p>

<textarea class="my_codemirror_html">
</textarea>'

If I can use jQuery for it, it's fine. I use that anyway on the page.

Update 2012-02-21 - Almost there

I found this post on jsFiddle. The only thing missing is that I can't make it work on textareas.

• javascript
• jquery
• textarea
• codemirror

• You can do that yes. Your selector would be: textarea.my_codemirror_html { } – Undefined Commented Feb 21, 2012 at 9:20

3 Answers 3

This will be an easier solution with less complexity.

$('.my_codemirror_html').each(function(index, elem){
      CodeMirror.fromTextArea(elem, {/*options*/});
});

I solved it by adding an ID with jQuery to all textareas.

jQuery(document).ready(function($) {
            var code_type = '';
            $('.code-html').each(function(index) {
                $(this).attr('id', 'code-' + index);
                CodeMirror.fromTextArea(document.getElementById('code-' + index), {
                        mode: "text/html",
                        lineNumbers: true,
                        tabMode: "indent"
                    }
                );

            });
        });

All javascript version:

var codemirrorInstance = [];
var foundtextareasarr = document.getElementsByClassName('classForTextareas');
for(var i = 0; foundtextareasarr[i]; ++i) { 
  codemirrorInstance[i] = CodeMirror.fromTextArea(foundtextareasarr[i], {
    lineNumbers: true,
    mode: "add-your-mode-here"     
  });
}

The code above will find all textareas by class and convert them into individual codemirror instances using only javascript and not jQuery.