web-dev-qa-db-ja.com

コードミラーエディターは、クリックされるまでコンテンツをロードしません

私はcodemirror 2を使用していますが、エディターをクリックするとフォーカスが合うまでエディターの設定値はエディターに読み込まれません。

クリックすることなく、エディターにそれ自体のコンテンツを表示してほしい。何か案は？

Codemirrorデモはすべて期待どおりに機能するため、textareaがフォーカスされていない可能性があると考えたので、試してみました。

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

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

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

それは私のためにうまく機能します。 here で答えを見つけました。

46
nvd_ai

エディター（またはロードしたスクリプト）がDOMに干渉し、エディターが非表示になるか、作成時に奇妙な位置にあることを期待しています。 refresh()メソッドを表示した後に、そのメソッドを呼び出す必要があります。

26
Marijn

念のため、ドキュメントを十分に注意深く読んでいない（私のように）が、これにつまずく人すべて。 autorefresh addon があります。

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

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

});

魅力のように機能します。

16
Vikash Saini

bootstrapタブ内でCodeMirrorを使用しています。クリックするまでbootstrapタブが表示されないようにしたのではないかと考えました。ショーで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));
7
Yes Barry

何かが私のために働いた。

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

        });
5
Jinu

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

2
Paul Whipp

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

この方法では、要素を操作したり、エディターが埋もれている既存の階層の可視性を心配したりする必要はありません。

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

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

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

1
davestewart

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

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

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

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

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

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

0
牧云云

私は反応して働いていますが、これらの答えはすべてうまくいきませんでした...ドキュメントを読んだ後、次のように働きました：

コンストラクターで、コード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;
           }}
        />
0
Ammar Ismaeel
<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>
0
Koray Bayram

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

他の多くの投稿では、textareaの親の可視性が重要であると考えています。隠されている場合、この問題に遭遇する可能性があります。

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

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

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

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

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

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

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

トビー

0
Toby Skinner