Search code examples
javascriptjquerytextareacodemirror

Can codemirror find textareas by class?

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.

Solution

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

            });
        });