84

私はcodemirror2を使用しており、エディターをクリックしてフォーカスされるまでエディターの設定値がエディターにロードされないことを除いて、正常に動作しています。

エディターがクリックせずに自分自身のコンテンツを表示するようにしたい。何か案は？

すべてのコードミラーデモは期待どおりに機能するため、テキストエリアがフォーカスされていない可能性があると考えたので、それも試しました。

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

14 に答える 14

63

setValue（）の後にrefresh（）を呼び出す必要があります。ただし、setTimeoutを使用して、CodeMirror / Browserが新しいコンテンツに従ってレイアウトを更新した後にrefresh（）を延期する必要があります。

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

それは私にとってうまくいきます。私はここで答えを見つけました。

于 2013-11-14T06:04:37.840 に答える
41

念のため、そして（私のように）ドキュメントを十分に注意深く読んでいないが、これに遭遇したすべての人のために。そのための自動更新アドオンがあります。

ファイルを追加する必要がありautorefresh.jsます。これで、このように使用できます。

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

});

チャームのように機能します。

于 2017-03-06T07:25:29.727 に答える
28

あなた（またはあなたがロードしたスクリプト）が、作成時にエディターが非表示になるか、奇妙な位置にあるような方法でDOMをいじっていると思います。refresh()表示された後、そのメソッドを呼び出す必要があります。

于 2011-12-02T08:21:04.270 に答える
12

たまたまブートストラップタブ内で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));
于 2016-11-12T23:50:40.410 に答える
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);

        });
于 2015-12-11T05:25:13.027 に答える
2

5.14.2バージョンのcodemirrorは、アドオンでこれに完全に対処します。詳細については、この回答を参照してください。

于 2016-05-16T23:53:56.243 に答える
1

私は今晩、この問題のバージョンに自分で遭遇しました。

他の多くの投稿では、textareaの親の可視性が重要であると見なしています。非表示にすると、この問題が発生する可能性があります。

私の状況では、フォーム自体とその周辺は問題ありませんでしたが、レンダリングチェーンの上位にあるBackboneビューマネージャーが問題でした。

ビューが完全にレンダリングされるまで、ビュー要素はDOMに配置されないため、DOMにない要素は非表示になっている、または単に処理されていないと見なされます。

これを回避するために、レンダリング後のフェーズ（擬似コード）を追加しました。

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

postRenderでは、すべてのコンテンツが画面に表示されるようになったため、ビューは必要な処理を実行できます。ここでCodeMirrorを移動すると、正常に機能しました。

これは、ポップアップなどの問題が発生する理由を説明するのにも役立つ場合があります。場合によっては、表示する前にすべてのコンテンツを作成しようとすることがあります。

それが誰かを助けることを願っています。

トビー

于 2013-06-21T23:55:25.837 に答える
1

さらに別の解決策（適切に作成するにはエディターを表示する必要があるため）は、構築中に親要素をbody要素に一時的にアタッチし、完了したら再アタッチすることです。

このように、要素をいじったり、エディターが埋もれている可能性のある既存の階層の可視性について心配したりする必要はありません。

私の場合、processr.comの場合、ネストされた複数のコード編集要素があり、ユーザーが更新を行うときにすべてをその場で作成する必要があるため、次のようにします。

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

それはうまく機能し、これまで目に見えるちらつきなどはありませんでした。

于 2014-03-19T09:41:35.403 に答える
1

私はreactを使用していますが、これらの回答はすべて私には機能しませんでした...ドキュメントを読んだ後、次のように機能しました。

コンストラクターで、コードMirrorのインスタンスを初期化しました。

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;
           }}
        />
于 2019-02-15T09:23:32.390 に答える
0

jQueryオブジェクトではなくDOM要素にフォーカスを呼び出してみてください。

var editor=$( '#editor' );
editor[0].focus();
// or
document.getElementById( 'editor' ).focus();
于 2011-12-02T02:57:55.583 に答える
0 
<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>
于 2015-12-11T07:45:27.863 に答える
0

何かが私のために働いた！:)

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

      setTimeout(function(){
        clearInterval(sh);  
      },2000)
于 2015-12-20T05:46:38.317 に答える
0

更新を使用すると、この問題を解決できます。しかし、それは友好的ではないようです

于 2019-05-18T10:27:24.970 に答える
0

理由：

CodeMirrorは、DOMノードが表示されていない場合、DOMコンテンツを更新しません。

例えば：

CodeMirrorのDomが' display：none 'にスタイルが設定されている場合。

修正方法：

CodeMirrorのDomが表示されている場合は、手動でcm.refresh()メソッドを実行します。

たとえば、私のアプリケーションでは、タブ要素がクリックされたときにCodeMirrorDomが表示されます。

したがって、簡単な方法は次のとおりです。

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

より具体的な要素にイベントリスナーを追加して、パフォーマンスを向上させることができます。

于 2021-01-11T12:58:17.110 に答える