Codemirror编辑器在单击之前不加载内容

Question

我正在使用codemirror 2并且它工作正常,除了编辑器的设置值没有加载到编辑器中,直到我单击编辑器并且它变得集中.

我希望编辑器在不必点击的情况下显示自己的内容.有任何想法吗？

所有的codemirror演示都按预期工作,所以我想也许textarea没有集中,所以我也尝试过.

$("#editor").focus();
var editor =    CodeMirror.fromTextArea(document.getElementById("editor"), {
                    mode: "text/html",
                    height: "197px",
                    lineNumbers: true
                });

Answer 1

您必须在setValue()之后调用refresh().但是,必须使用setTimeout将refresh()推迟到CodeMirror/Browser根据新内容更新布局后:

this.codeMirrorInstance.setValue(content);
var that = this;
setTimeout(function() {
    that.codeMirrorInstance.refresh();
},1);

这对我来说很有用.我在这里找到了答案.

Answer 2

我希望你(或你加载的一些脚本)干扰DOM,使得编辑器在创建时隐藏或处于奇怪的位置.refresh()在看到它的方法后,它需要调用它的方法.

Answer 3

以防万一,对于那些没有仔细阅读文档的人(比如我),但偶然发现了这一点.这是一个autorefresh插件.

您需要添加autorefresh.js文件.现在你可以像这样使用它.

var editor = CodeMirror.fromTextArea(document.getElementById("id_commentsHint"), {
  mode: "javascript",
  autoRefresh:true,
  lineNumbers: false,
  lineWrapping: true,

});

奇迹般有效.

Answer 4

我碰巧在引导选项卡中使用CodeMirror.我怀疑引导标签是阻止它在点击之前显示的内容.我通过简单地调用refresh()show上的方法来解决这个问题.

var cmInstance = CodeMirror.fromTextArea(document.getElementById('cm'), {
    lineNumbers: true,
    lineWrapping: true,
    indentUnit: 4,
    mode: 'css'
});

// to fix code mirror not showing up until clicked
$(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function() {
    this.refresh();
}.bind(cmInstance));

Answer 5

有些东西对我有用.

$(document).ready(function(){
                var editor = CodeMirror.fromTextArea(document.getElementById("code2"), {
                     //lineNumbers: true,
                      readOnly: true,
                      autofocus: true,
                     matchBrackets: true,
                     styleActiveLine: true
                 });
                 setTimeout(function() {
                     editor.refresh();
                    }, 100);

        });