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 根據新內容更新布局之后：

codeMirrorRef.setValue(content);
setTimeout(function() {
    codeMirrorRef.refresh();
},1);

這對我來說很有用。 我在這里找到了答案。

Answer 2

以防萬一，對於那些沒有足夠仔細地閱讀文檔的人（比如我），但偶然發現了這一點。 有一個自動刷新插件就是為了這個。

您需要在文件中添加autorefresh.js 。 現在你可以像這樣使用它。

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

});

奇跡般有效。

Answer 3

我希望您（或您加載的某些腳本）以這樣一種方式干預 DOM，即編輯器在創建時被隱藏或以其他方式處於奇怪的位置。 在使其可見后，它需要調用其refresh()方法。

Answer 4

我碰巧在引導選項卡中使用 CodeMirror。 我懷疑引導選項卡是阻止它在單擊之前顯示的原因。 我通過在 show 上簡單地調用refresh()方法來解決這個問題。

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

        });

Answer 6

codemirror 的 5.14.2 版本通過附加組件完全解決了這個問題。 有關詳細信息，請參閱此答案。

Answer 7

另一個解決方案（我也意識到這是因為編輯器需要可見才能正確創建）是在構建期間臨時將父元素附加到 body 元素，然后在完成后重新附加。

這樣，您就無需干預元素，也無需擔心編輯器可能被掩埋的任何現有層次結構中的可見性。

就我而言，對於processr.com ，我有多個嵌套的代碼編輯元素，所有這些元素都需要在用戶進行更新時即時創建，因此我執行以下操作：

this.$elements.appendTo('body');
for (var i = 0; i < data.length; i++)
{
    this.addElement(data[i]);
}
this.$elements.appendTo(this.$view);

它工作得很好，到目前為止還沒有可見的閃爍或類似的東西。

Answer 8

我正在使用 react，所有這些答案都不適用於我......閱讀文檔后，它的工作方式如下：

在構造函數中，我初始化了代碼鏡像的一個實例：

this.mirrorInstance = null;

在打開包含 codeEditor 的選項卡時，我在 1 毫秒后刷新了實例：

toggleSubTab() {
    setTimeout(() => {
      this.mirrorInstance.refresh();
    }, 1);
  }

這是 JSX 代碼：

<CodeMirror
           value={this.state.codeEditor}
           options={{
           mode: "htmlmixed",
           theme: "default",
           lineNumbers: true,
           lineWrapping: true,
           autoRefresh: true
           }}
           editorDidMount={editor => {
           this.mirrorInstance = editor;
           }}
        />

Answer 9

今晚我自己剛剛遇到了這個問題的一個版本。

許多其他帖子認為 textarea 父級的可見性很重要，如果它被隱藏，那么您可能會遇到這個問題。

在我的情況下，表單本身和周圍的環境都很好，但我的主干視圖管理器在渲染鏈上層是有問題的。

在視圖完全呈現之前，我的視圖元素不會放在 DOM 上，所以我猜不在 DOM 上的元素被認為是隱藏的或只是沒有處理。

為了解決這個問題，我添加了一個渲染后階段（偽代碼）：

view.render();
$('body').html(view.el);
view.postRender();

在 postRender 中，視圖可以做它需要做的事情，因為所有內容現在都在屏幕上可見，這是我移動 CodeMirror 的地方，它工作正常。

這也可能在某種程度上解釋了為什么人們可能會遇到諸如彈出窗口之類的問題，因為在某些情況下，他們可能會嘗試在顯示之前構建所有內容。

希望能幫助某人。

托比

Answer 10

<div class="tabbable-line">
    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#tabXml1" data-toggle="tab" aria-expanded="true">Xml 1</a>
        </li>
        <li class="">
            <a href="#tabXml2" id="xmlTab2Header" data-toggle="tab" aria-expanded="true">Xml 2</a>
        </li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active" id="tabXml1">
            <textarea id="txtXml1" />
        </div>
        <div class="tab-pane" id="tabXml2">
            <textarea id="txtXml2" />
        </div>
    </div>
</div>

<link rel="stylesheet" href="~/Content/codemirror.min.css">
<style type="text/css">
    .CodeMirror {
        border: 1px solid #eee;
        max-width: 100%;
        height: 400px;
    }
</style>

<script src="~/Scripts/codemirror.min.js"></script>
<script src="~/Scripts/codemirror.xml.min.js"></script>
<script>
        $(document).ready(function () {
            var cmXml1;
            var cmXml2;
            cmXml1 = CodeMirror.fromTextArea(document.getElementById("txtXml1"), {
                mode: "xml",
                lineNumbers: true
            });
            cmXml2 = CodeMirror.fromTextArea(document.getElementById("txtXml2"), {
                mode: "xml",
                lineNumbers: true
            });
            // Refresh code mirror element when tab header is clicked.
            $("#xmlTab2Header").click(function () {
                setTimeout(function () {
                    cmXml2.refresh();
                }, 10);
            });
        });
</script>

Answer 11

有些東西對我有用！ :)

      var sh = setInterval(function() {
       agentConfigEditor.refresh();
      }, 500); 

      setTimeout(function(){
        clearInterval(sh);  
      },2000)

Answer 12

使用刷新幫助解決了這個問題。 不過好像不太友好

Answer 13

原因：

當 DOM 節點不可見時，CodeMirror 不會更新 DOM 內容。

例如：

當 CodeMirror 的 Dom 樣式設置為“顯示：無”時。

修復方法：

當 CodeMirror 的 Dom 可見時，手動執行cm.refresh()方法。

例如，在我的應用程序中，單擊選項卡元素時 CodeMirror Dom 將可見。

所以簡單的方法是：

window.onclick = () => {
    setTimeout(() => {
        codeMirrorRef.refresh();
    }, 10);
};

您可以在更具體的元素上添加事件偵聽器以提高性能。

Answer 14

嘗試調用 DOM 元素而不是 jQuery 對象的焦點。

var editor=$( '#editor' );
editor[0].focus();
// or
document.getElementById( 'editor' ).focus();