codemirror可以按类查找文本区域

Can codemirror find textareas by class?

本文关键字：查找 文本 区域 codemirror      更新时间：2023-09-26

一个良好的开端

几年前，我问了一个问题"Codemirror-在多个文本区域上使用？"，得到了一个很好的答案。但是，它仍然将ID作为参数。ID是唯一的。

按类别而不是ID查找文本区域

当在同一页面上有多个文本区域时，有些带有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上找到了这个帖子。唯一缺少的是我无法让它在文本区域工作。

这将是一个更简单的解决方案，复杂性更低。

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

我通过在所有文本区域添加一个带有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"
                    }
                );
            });
        });

所有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将它们转换为单独的代码镜像实例。

相关文章：