codemirror可以按类查找textareas吗?

时间:2012-02-21 09:17:55

标签: javascript jquery textarea codemirror

一个好的开始

几年前我问了这个问题“Codemirror - Use on multiple textareas?”并给出了一个很好的答案。但是,它仍然需要ID作为参数。 ID是唯一的。

按类而不是ID

查找textarea

当有多个textareas时,有些带有HTML,有些带有CSS在同一页面上,最好添加一个类而不是ID。

示例

<p>Some content</p>

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

<p>Some content</p>

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

如果我可以使用jQuery,那很好。我还是在页面上使用它。

更新2012-02-21 - 差不多

我在jsFiddle找到了这篇文章。唯一缺少的是我无法在textareas上工作。

3 个答案:

答案 0 :(得分:10)

这将是一个更容易解决方案,复杂性

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

答案 1 :(得分:6)

我通过向所有textareas添加带有jQuery的ID来解决它。

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

            });
        });

答案 2 :(得分:0)

所有javascript版本:

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

上面的代码将按类查找所有文本区域,并仅使用javascript而不使用jQuery将它们转换为单独的codemirror实例。