Редактор Codemirror не загружает контент, пока не нажата - PullRequest
Новая
       10

Редактор Codemirror не загружает контент, пока не нажата

68 голосов
/ 02 декабря 2011

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

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

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

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

Ответы [ 13 ]

44 голосов
/ 14 ноября 2013

Вы должны вызывать refresh () после setValue (). Однако вы должны использовать setTimeout, чтобы отложить функцию refresh () после того, как CodeMirror / Browser обновит макет в соответствии с новым содержимым: 

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

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

26 голосов
/ 02 декабря 2011

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

16 голосов
/ 06 марта 2017

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

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

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

});

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

7 голосов
/ 13 ноября 2016

Я использую 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 голосов
/ 11 декабря 2015

Что-то сработало для меня. 

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

        });
2 голосов
/ 17 мая 2016

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

1 голос
/ 20 декабря 2015

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

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

      setTimeout(function(){
        clearInterval(sh);  
      },2000)
1 голос
/ 19 марта 2014

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

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

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

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

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

0 голосов
/ 18 мая 2019

с помощью обновления помогают решить эту проблему.Но, похоже, не дружелюбно

0 голосов
/ 15 февраля 2019

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

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