CodeMirror 2-только выделение (без редактора)
можете CodeMirror 2 используется для выделения кода из DIV или PRE тег (без редактора)?
как CodeMirror 1 используемый, чтобы быть в состоянии сделать с hightlightText (функция)?
Например здесь:http://codemirror.net/1/highlight.html, после нажатия кнопки выполнить выделение (выделенный текст ниже)
также можно выделить код из встроенного элемента, например <code>, и держать результаты в строке, как Google Prettify правда?
8 ответов:
гораздо более приятным и простым решением является просто установить свойство readOnly экземпляра CodeMirror в true, например:
$('.code').each(function() { var $this = $(this), $code = $this.html(); $this.empty(); var myCodeMirror = CodeMirror(this, { value: $code, mode: 'javascript', lineNumbers: !$this.is('.inline'), readOnly: true }); });просто добавить класс
.codeк тегу, содержащему код, и он будет выделен синтаксис. Я также добавил поддержку встроенного кода, используя класс.inline.
как несколько позднее обновление, CodeMirror 2 недавно получил эту способность. См.http://codemirror.net/demo/runmode.html
на самом деле вы не можете. Codemirror2 написан таким образом, что вся реализация скрыта в замыканиях. Публичные методы, которые могут быть использованы, описаны в документации http://codemirror.net/manual.html
Единственные доступные варианты-использовать другие синтаксические маркеры или погрузиться в код CodeMirror2, чтобы удалить необходимые части.
Если вы выбрали последний вариант, пожалуйста, обратите внимание наfunction refreshDisplay(from, to) methodон петляет по линиям и бликам их.
Edit
Просто понял, что существует более простой способ. Метод чтения 2 ниже. Я сохраняю старый метод и его объяснения нетронутыми и просто включаю улучшенный код jQuery.
если вы спрашиваете о собственном методе пакета, ответ нет, он работает только с
textarea. Но если вы открыты для использования обходных путей, вот тот, который работает (протестирован).я использовал jQuery здесь, но его использование не является обязательным и вы можно добиться того же с чистым кодом js, хотя это было бы длиннее и не так аккуратно, как код jQuery.
теперь, давайте перейдем к решение.
Предположим, у вас есть
<pre>внутри кода, которые вы хотите превратить в Редактор-менее подсвеченного контейнер codemirror:<pre id="mycode"> <?php echo 'hi'; $a = 10; if($a == 5) echo 'too small'; ?> </pre>что ты делаешь,
- изменить
<pre>до<textarea>,- прикрепите codemirror к текстовой области,
- скрыть поддельный курсор и держите его в тайне, и
- не позволяйте текстовой области скрытого codemirror захватить фокус (и вырвать его обратно, когда это произойдет).
для последнего действия я использовал метод, предложенный Трэвисом Уэббом. Вот код 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(); });
вы должны использовать отдельный синтаксический маркер кода:SyntaxHighlighter 3 работает очень хорошо.
Если вы действительно хотите CodeMirror, есть
readOnly:var myCodeMirror = CodeMirror(function(elt) { myElement.parentNode.replaceChild(myElement, elt); // myElement is your <pre> or <div> }, { value: myElement.value, readOnly: true });
CodeMirror V2 содержит runmode.js.
Я написал пример использования runmode с желобом.
Регистрация: http://jsfiddle.net/lyhcode/37vHL/2/
вот более простое решение с использованием codemirror runmode и jquery:
<pre class='code'>{:message => 'sample code'}</pre> $(document).ready(function() { $('.code').each(function(index, e) { $(e).addClass('cm-s-default'); // apply a theme class CodeMirror.runMode($(e).text(), "javascript", $(e)[0]); }); });
CM2 не поддерживает непосредственно функцию, которую вы ищете. Однако, я использовал трюк с участием
onFocusобработчик, который они поддерживают, чтобы запретить пользователю фокусироваться на элементе Codemirror, и, следовательно, запрет редактирования. Мое объяснение, которое следует, предполагает, что вы просмотрели здесь:http://codemirror.net/manual.html вы, вероятно, захотите использовать jQuery для этой техники, но это не требуется. Вы говорите о наличии кода вdivтак Я предполагаю, что вы знаете, как прикрепить Codemirror кdivэлемент.
- создать
<input id="tricky">текстовое поле какого-то скрытого типа. Вы можете использовать любую технику для "скрытия" его, что вы хотите, но я могу сказать вам, что установка CSS в"display:none"не работает.visibility:hiddenможет работать, но, вероятно, лучше просто поместить div со страницы где-нибудь.- настройка
onFocusобработчик в документации Codemirror2 в приведенной выше ссылке,- внутри ваш
onFocusобработчик событий, сделать что-то подобное:$("tricky").focus();
или без jQuery:document.getElementById("tricky").focus();и вы мгновенно перенаправить фокус на невидимое поле, и никто не может изменить код, который вы показываете. Вероятно, есть какой-то умный способ победить этот метод, но он будет работать в 99% случаев. Это немного хитро, но, по крайней мере, вам не придется возиться с внутренностями Codemirror.
Comments