Редактор Codemirror не завантажує вміст до натискання

Я використовую codemirror 2 і працює нормально, за винятком того, що встановлене значення редактора не завантажується в редактор, доки я не натисну редактор, і він не стане сфокусованим.

Я хочу, щоб редактор відображав вміст самого себе, не натискаючи його. Будь-які ідеї?

Всі демонстраційні програми codemirror працюють, як очікувалося, тому я зрозумів, що, можливо, текстова область не зосереджена, тому я теж спробував це.

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

Ви повинні викликати refresh () після setValue (). Однак ви повинні використовувати setTimeout, щоб відкласти оновлення () до того, як CodeMirror / Browser оновить макет відповідно до нового вмісту:

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

Для мене це добре працює. Я знайшов відповідь тут .

Я сподіваюся, ви (або якийсь скрипт, який ви завантажили) втручаєтесь у DOM таким чином, що редактор при створенні прихований або в іншому положенні. Це вимагатиме виклику свого refresh()методу після того, як він стане видимим.

Про всяк випадок і для всіх, хто недостатньо уважно читає документацію (як я), але натрапляє на це. Для цього існує аддон автоматичного оновлення .

Вам потрібно додати autorefresh.jsу свій файл. Тепер ви можете використовувати його таким чином.

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

});

працює як шарм.

Я випадково використовую 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));

Щось у мене працювало.

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

        });

Версія codemirror 5.14.2 повністю вирішує це питання з додатковим додатком. Детальніше див. Цю відповідь .

Ще одне рішення (яке я також зрозумів, тому що редактор мав бути видимим для правильного створення) - тимчасово приєднати батьківський елемент до елемента body під час побудови, а потім повторно підключити після завершення.

Таким чином, вам не потрібно втручатися в елементи або турбуватися про видимість у будь-якій існуючій ієрархії, що ваш редактор може бути похований.

У моєму випадку для processr.com у мене є кілька вкладених елементів редагування коду, всі з яких потрібно створювати на льоту, коли користувач робить оновлення, тому я роблю наступне:

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

Це чудово працює, і до цього часу не було видимого мерехтіння або чогось подібного.

Я працюю з реакцією, і всі ці відповіді не працювали зі мною ... Після прочитання документації це працювало так:

у конструкторі я ініціалізував екземпляр коду 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;
           }}
        />

Спробуйте викликати фокус на елемент DOM замість об’єкта jQuery.

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

Сьогодні ввечері я просто зіткнувся з версією цієї проблеми.

Ряд інших публікацій вважає видимість батьків текстової області важливою, якщо вона прихована, то ви можете зіткнутися з цією проблемою.

У моїй ситуації сама форма та найближче оточення були в порядку, але проблема була в моєму менеджері перегляду Backbone вище, ніж в ланцюжку візуалізації.

Мій елемент перегляду не розміщується в DOM, поки подання не відтвориться повністю, тому я думаю, що елемент, що не знаходиться в DOM, вважається прихованим або просто не обробляється.

Щоб обійти це, я додав фазу після рендерингу (псевдокод):

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

У postRender подання може робити те, що йому потрібно, знаючи, що весь вміст тепер видно на екрані, саме сюди я перемістив CodeMirror і він працював нормально.

Це може також допомогти пояснити, чому люди можуть зіткнутися з такими проблемами, як спливаючі вікна, оскільки в деяких випадках вони можуть спробувати створити весь вміст перед відображенням.

Надія, що комусь допомагає.

Тобі

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

Щось у мене вийшло! :)

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

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

за допомогою оновлення допоможе вирішити цю проблему. Але це, здається, не по-дружньому