Я использую codemirror 2 и его рабочий режим, за исключением того, что значение набора редактора не загружается в редактор, пока я не нажму на редактор и не сфокусирован.
Я хочу, чтобы редактор показывал контент сам по себе, без необходимости его щелчка. Есть идеи?
Все демоверсии codemirror работают так, как ожидалось, поэтому я решил, что текстовое поле не сфокусировано, поэтому я тоже это пробовал.
$("#editor").focus();
var editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
mode: "text/html",
height: "197px",
lineNumbers: true
});
После setValue() вы должны вызвать refresh(). Тем не менее, вы должны использовать setTimeout, чтобы отложить обновление() до того, как CodeMirror/Browser обновил макет в соответствии с новым контентом:
this.codeMirrorInstance.setValue(content);
var that = this;
setTimeout(function() {
that.codeMirrorInstance.refresh();
},1);
Это хорошо работает для меня. Я нашел ответ в здесь.
Я ожидаю, что вы (или некоторые script вы загрузили) вмешиваются в DOM таким образом, что редактор скрыт или иным образом находится в странной позиции при создании. Это вызовет вызов его метода refresh() после того, как он станет видимым.
На всякий случай и для всех, кто не читает документацию достаточно внимательно (как я), но сталкивается с этим. Там аддон autorefresh только для этого.
Вам нужно добавить autorefresh.js в ваш файл. Теперь вы можете использовать это так.
var editor = CodeMirror.fromTextArea(document.getElementById("id_commentsHint"), {
mode: "javascript",
autoRefresh:true,
lineNumbers: false,
lineWrapping: true,
});
работает как шарм.
Я использую 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));
Что-то сработало для меня.
$(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);
});
Версия codecirror 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);
Он отлично работает, и до сих пор не было видимого мерцания или чего-либо подобного.
Что-то сработало для меня!:)
var sh = setInterval(function() {
agentConfigEditor.refresh();
}, 500);
setTimeout(function(){
clearInterval(sh);
},2000)
Попробуйте вызвать фокус на элементе DOM вместо объекта jQuery.
var editor=$( '#editor' );
editor[0].focus();
// or
document.getElementById( 'editor' ).focus();
В этот вечер я просто столкнулся с проблемой этой проблемы.
В нескольких других сообщениях рассматривается видимость родителя textarea как важная, если он скрыт, вы можете столкнуться с этой проблемой.
В моей ситуации сама форма и непосредственное окружение были прекрасны, но проблема с менеджером представлений 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>
Я работаю с реагировать, и все эти ответы не работают со мной... После прочтения документации это работает так:
в конструкторе я инициализировал экземпляр кода 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;
}}
/>
Использование обновления поможет решить эту проблему. Но вроде не дружелюбно