Редактировать
Только что понял, что существует более простой метод.Прочтите метод 2 ниже.Я сохраняю старый метод и его пояснения нетронутыми и просто включаю улучшенный код jQuery.
Если вы спрашиваете о нативном методе пакета, ответ - нет, он толькоработает с textarea.Но если вы открыты для использования обходных путей, вот тот, который работает (проверено).
Я использовал здесь jQuery, но его использование не является обязательным, и вы можете добиться того же с помощью чистого кода js, хотя ибудет длиннее и не так аккуратен, как код jQuery.
Теперь перейдем к обходному пути.
Предположим, у вас есть <pre> с кодом внутри, который вы хотите превратить в редактор.меньше выделенного синтаксисом контейнера codemirror:
<code><pre id="mycode">
<?php
echo 'hi';
$a = 10;
if($a == 5) echo 'too small';
?>
Что вы делаете,
- измените
<pre> на <textarea>, - прикрепить кодовое зеркало к текстовой области,
- скрыть фальшивый курсор и сохранить его скрытым, а
- не разрешить текстовой области скрытого кодового зеркала захватить фокус (и вернуть его обратно, когда это произойдет).
Для последнего действия я использовал метод , предложенный Travis Webb .Вот код jQuery, который выполняет эти четыре вещи:
$(document).ready(function() {
// (1) replace pre with textarea
$('#mycode').replaceWith('<textarea id="code">' + $('#mycode').html() + '</textarea>');
// (2) attach codemirror
var editor = CodeMirror.fromTextArea($("#code"), {
lineNumbers: true,
mode: "application/x-httpd-php"
});
// (3) hide the fake cursor
$('pre.CodeMirror-cursor').hide();
// [4] textarea to grab and keep the focus
$('body').append('<textarea id="tricky" style="height: 1px; position: fixed; width: 1px; top: 0; margin-top: -100px;" wrap="off"></textarea>');
// (4) grab focus
$('#tricky').focus();
// [4] if focus is lost (probably to codemirror)
$('#tricky').blur(function() {
// (4) re-claim focus
$('#tricky').focus();
// (3) keep the fake cursor hidden
$('pre.CodeMirror-cursor').hide();
});
});
Метод второй
Вместо того, чтобы бороться с курсором и всем этим, мы можем удалитьэлементы, которые делают редактор галочкой.Вот код:
$(document).ready(function() {
$('#mycode').replaceWith('<textarea id="code">' + $('#mycode').html() + '</textarea>');
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
mode: "application/x-httpd-php"
});
$('pre.CodeMirror-cursor').remove();
$('div.CodeMirror').find('textarea').blur().parent().remove();
$('div.CodeMirror').find('pre:first').remove();
$('textarea#code').remove();
});