Подтвердить что ты не робот

Редактор Codemirror не загружает контент до щелчка

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

Я хочу, чтобы редактор показывал контент сам по себе, без необходимости его щелчка. Есть идеи?

Все демоверсии codemirror работают так, как ожидалось, поэтому я решил, что текстовое поле не сфокусировано, поэтому я тоже это пробовал.

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

ОТВЕТЫ

Ответ 1

После setValue() вы должны вызвать refresh(). Тем не менее, вы должны использовать setTimeout, чтобы отложить обновление() до того, как CodeMirror/Browser обновил макет в соответствии с новым контентом:

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

Это хорошо работает для меня. Я нашел ответ в здесь.

Ответ 2

Я ожидаю, что вы (или некоторые script вы загрузили) вмешиваются в DOM таким образом, что редактор скрыт или иным образом находится в странной позиции при создании. Это вызовет вызов его метода refresh() после того, как он станет видимым.

Ответ 3

На всякий случай и для всех, кто не читает документацию достаточно внимательно (как я), но сталкивается с этим. Там аддон autorefresh только для этого.

Вам нужно добавить autorefresh.js в ваш файл. Теперь вы можете использовать это так.

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

});

работает как шарм.

Ответ 4

Я использую CodeMirror на вкладке начальной загрузки. Я подозревал, что вкладки бутстрапа были тем, что мешало ему появляться до щелчка. Я исправил это, просто называя метод 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));

Ответ 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);

        });

Ответ 6

Версия codecirror 5.14.2 полностью разрешает добавление. Подробнее см. этот ответ.

Ответ 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);

Он отлично работает, и до сих пор не было видимого мерцания или чего-либо подобного.

Ответ 8

Что-то сработало для меня!:)

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

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

Ответ 9

Попробуйте вызвать фокус на элементе DOM вместо объекта jQuery.

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

Ответ 10

В этот вечер я просто столкнулся с проблемой этой проблемы.

В нескольких других сообщениях рассматривается видимость родителя textarea как важная, если он скрыт, вы можете столкнуться с этой проблемой.

В моей ситуации сама форма и непосредственное окружение были прекрасны, но проблема с менеджером представлений Backbone выше по цепочке рендеринга была проблемой.

Мой элемент вида не помещается в DOM, пока вид не будет полностью выполнен, поэтому я думаю, что элемент, не содержащий DOM, считается скрытым или просто не обрабатывается.

Чтобы обойти это, я добавил фазу пост-рендеринга (псевдокод):

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

В postRender представление может делать то, что ему нужно, зная, что все содержимое теперь видно на экране, вот где я переместил CodeMirror и работал нормально.

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

Надеюсь, что это поможет кому-то.

Тоби

Ответ 11

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

Ответ 12

Я работаю с реагировать, и все эти ответы не работают со мной... После прочтения документации это работает так:

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

Ответ 13

Использование обновления поможет решить эту проблему. Но вроде не дружелюбно