只有几行的 CodeMirror 才会显示，直到有东西触发重绘

发布于 2024-12-09 19:15:33 字数 363 浏览 0 评论 0原文

CodeMirror 似乎工作得非常好，除非我在文本区域中只有几行（3 或更少）代码。当发生这种情况时，文本区域是空白的，直到我（A）在文本区域中按回车键或（B）执行一些导致浏览器重新绘制的操作（例如调整大小）。当超过 3 行时，它们在页面的第一次渲染时显示得很好。

我在这里没有做任何花哨的事情：

var editor = CodeMirror.fromTextArea(document.getElementById('html'), {
    mode: 'text/html',
    tabMode: 'indent',
    lineNumbers: true
});

只是想知道是否还有其他人遇到过这个问题。

原文

CodeMirror seems to be working really well except when I have only a few (3 or less) lines of code in the textarea. When that happens, the textarea is blank until I (A) hit enter in the textarea or (B) do something that causes the browser to repaint (like resizing). When there are more than 3 lines, they show up just fine on first render of the page.

I'm not doing anything fancy here:

var editor = CodeMirror.fromTextArea(document.getElementById('html'), {
    mode: 'text/html',
    tabMode: 'indent',
    lineNumbers: true
});

Just wondering if anyone else has had this issue.

分享到QQ

分享到微博

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

发布评论

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

婴鹅 2024-12-16 19:15:33

创建CodeMirror实例后使用refresh方法... editor.refresh()
当我尝试在 dijit.Dialog 中插入编辑器时，当我还处于隐藏状态时，就发生了这种情况。它对我有用。

回复收藏 0 原文

勿忘心安 2024-12-16 19:15:33

我使用 0 到 2 行代码以几种不同的方式设置了一个在 Chrome 中没有问题的场景。

我直接链接到 codemirror 来获取包含内容。

你有最新版本吗？

您遇到什么环境问题？

也许是浏览器特定的问题？

<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>

<textarea id='someID1'></textarea>

<textarea id='someID2'>
    <table><tr><td>The wheels on the bus go round and round.</td></tr>
    </table>
</textarea>

<script>
    var editor = CodeMirror.fromTextArea(document.getElementById('someID1'), {
        mode: 'text/html',
        tabMode: 'indent',
        lineNumbers: true
    });

    CodeMirror.fromTextArea(document.getElementById('someID2'), {
        mode: 'text/html',
        tabMode: 'indent',
        lineNumbers: true
    });
</script>

I setup a scenario which had no issue in Chrome using 0 to 2 lines of code a couple of different ways.

I directly linked to codemirror for the includes.

Do you have latest version?

What environment are you having issue with?

Perhaps is it browser specific issue?

<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/addon/fold/foldcode.js"></script>
<script src="http://codemirror.net/addon/fold/foldgutter.js"></script>
<script src="http://codemirror.net/addon/fold/brace-fold.js"></script>
<script src="http://codemirror.net/addon/fold/xml-fold.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/xml/xml.js"></script>

<textarea id='someID1'></textarea>

<textarea id='someID2'>
    <table><tr><td>The wheels on the bus go round and round.</td></tr>
    </table>
</textarea>

<script>
    var editor = CodeMirror.fromTextArea(document.getElementById('someID1'), {
        mode: 'text/html',
        tabMode: 'indent',
        lineNumbers: true
    });

    CodeMirror.fromTextArea(document.getElementById('someID2'), {
        mode: 'text/html',
        tabMode: 'indent',
        lineNumbers: true
    });
</script>

回复收藏 0 原文

~没有更多了~