How to fix: CodeMirror редактор не завантажує контент до кліка

Я використовував CodeMirror 5 в різних проектах. Зараз Я використовую його разом з WordPress Plugin API і він працює відмінно за винятком того, що, до кліка, редактор завантажує контент не повністю. Не з’являється нічого нижче 26 рядки до тих пір поки не буде кліка мишею нижче цього рядка. Контент є, але він невидимий. Це виглядає як велика порожній простір. Якщо буде клік вище цього рядка, нічого не з’явиться так, як необхідно клікнути нижче цього рядка.

Мій WordPress плагін, мае textarea, який Я заміняю редактором CodeMirror.

Ось Javascript код який Я використовую:

var editor = CodeMirror.fromTextArea(document.getElementById('codeEditor'), {
    lineNumbers: true,
    matchBrackets: true,
    mode: 'application/x-httpd-php',
    indentUnit: 4
});

Все інше в CodeMirror редакторі працює як треба і Я подумав про те, що textarea просто не сфокусований, тому Я спробував викликати focus () на елементі DOM.

jQuery:

$("#editor").focus();

Javascript:

document.getElementById( 'editor' ).focus();

Але це не спрацювало тому, що необхідно клікнути саме нижче 26-ій рядки, а не вище.

Потім Я спробував викликати refresh () метод після того як редактор стане видимим:

setTimeout(function() {
    editor.refresh();
},1);

Вищенаведений Javascript код перезавантажить CodeMirror редактор після очікування в 1 мілісекунду.

І це спрацювало.

Тепер, весь Javascript код виглядає так:

var editor = CodeMirror.fromTextArea(document.getElementById('editor'), {
    lineNumbers: true,
    matchBrackets: true,
    mode: 'application/x-httpd-php',
    indentUnit: 4
});
setTimeout(function() {
    editor.refresh();
},1);

Якщо ця стаття допомогла вам, будь ласка, залиште коментар

Дякую за прочитання!