CodeMirror 2-только выделение (без редактора)



можете CodeMirror 2 используется для выделения кода из DIV или PRE тег (без редактора)?



как CodeMirror 1 используемый, чтобы быть в состоянии сделать с hightlightText (функция)?
Например здесь:http://codemirror.net/1/highlight.html, после нажатия кнопки выполнить выделение (выделенный текст ниже)



также можно выделить код из встроенного элемента, например <code>, и держать результаты в строке, как Google Prettify правда?

706   8  

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.

пример на jsfiddle

как несколько позднее обновление, 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>

что ты делаешь,

  1. изменить <pre> до <textarea>,
  2. прикрепите codemirror к текстовой области,
  3. скрыть поддельный курсор и держите его в тайне, и
  4. не позволяйте текстовой области скрытого 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 элемент.

  1. создать <input id="tricky"> текстовое поле какого-то скрытого типа. Вы можете использовать любую технику для "скрытия" его, что вы хотите, но я могу сказать вам, что установка CSS в "display:none" не работает. visibility:hidden может работать, но, вероятно, лучше просто поместить div со страницы где-нибудь.
  2. настройка onFocus обработчик в документации Codemirror2 в приведенной выше ссылке,
  3. внутри ваш onFocus обработчик событий, сделать что-то подобное:

    $("tricky").focus();
    или без jQuery:
    document.getElementById("tricky").focus();

и вы мгновенно перенаправить фокус на невидимое поле, и никто не может изменить код, который вы показываете. Вероятно, есть какой-то умный способ победить этот метод, но он будет работать в 99% случаев. Это немного хитро, но, по крайней мере, вам не придется возиться с внутренностями Codemirror.

Comments

    Ничего не найдено.