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

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

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

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

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

11 ответов:

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

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

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

38

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

26

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

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

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

});

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

13

Я с помощью 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));
6

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

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

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

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

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

1

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Тоби

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