codemirror 可以按类查找文本区域吗?

发布于 2025-01-07 18:26:25 字数 761 浏览 0 评论 0原文

一个好的开始

我问了这个问题“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。唯一缺少的是我无法让它在文本区域上工作。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

轻拂→两袖风尘 2025-01-14 18:26:25

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

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

This will be an easier solution with less complexity.

$('.my_codemirror_html').each(function(index, elem){
      CodeMirror.fromTextArea(elem, {/*options*/});
});
随遇而安 2025-01-14 18:26:25

我通过使用 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"
                    }
                );

            });
        });

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

            });
        });
小巷里的女流氓 2025-01-14 18:26:25

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

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文