Как выделить код в редакторе ACE? - PullRequest
Новая
       22

Как выделить код в редакторе ACE?

13 голосов
/ 12 января 2012

Мне бы хотелось, чтобы синтаксис выделил более десятка небольших фрагментов кода, а затем сделал их редактируемыми с помощью редактора ACE, нажав на них, поскольку я думаю, что это будет намного быстрее, чем настройка полного редактора для каждого из них. Я вижу, что есть простая команда для настройки редактора ACE : 

<div id="editor">some text</div>
<script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
    var editor = ace.edit("editor");
};
</script>

Есть ли простой способ вызвать API, чтобы просто выделить текст без настройки редактора? Идеальный API - это взять некоторый текст и вернуть HTML с тегами, которые можно использовать для подсветки. Я знаю, что есть специальные библиотеки подсветки для JavaScript, но я хотел бы попробовать использовать один и тот же подсветчик как для отображаемого текста, так и для редактируемого текста.

Ответы [ 4 ]

14 голосов
/ 21 февраля 2012

Выделите слово: 

var range = new Range(rowStart, columnStart, rowEnd, columnEnd);
var marker = editor.getSession().addMarker(range,"ace_selected_word", "text");

Удалить выделенное слово: 

editor.getSession().removeMarker(marker);

Выделите строку: 

editor.getSession().addMarker(range,"ace_active_line","background");
8 голосов
/ 15 января 2015

Сначала вы хотите объявить номер вашей строки в качестве глобальной переменной. 

var erroneousLine;

Это функция highlightError, которая принимает номер строки (lineNumber) в качестве параметра.который может быть вызван из сообщения об ошибке или с помощью editor.selection.getCursor().row, чтобы получить текущую строку, или что-то еще.

function highlightError(lineNumber) {
  unhighlightError();
  var Range = ace.require("ace/range").Range
  erroneousLine = editor.session.addMarker(new Range(lineNumber, 0, lineNumber, 144), "errorHighlight", "fullLine");
}

Обратите внимание, что я объявил errorHighlight, как это будет выделено.В вашем css поместите следующее: 

.errorHighlight{
  position:absolute;
  z-index:20;
  background-color:#F4B9B7;
}

Эта функция выделяет уже выделенную строку 

function unhighlightError(){
  editor.getSession().removeMarker(erroneousLine);
}
7 голосов
/ 25 января 2012

Существует версия подсветчика на стороне сервера (которая выполняется в файле node.js) доступна , которая, вероятно, будет довольно легко переносима на веб-JavaScript.

0 голосов
/ 24 августа 2015

Идея: 

function highlightSyntax(text) {
    var res = [];

    var Tokenizer = ace.require('ace/tokenizer').Tokenizer;
    var Rules = ace.require('ace/mode/sql_highlight_rules').SqlHighlightRules;
    var Text = ace.require('ace/layer/text').Text;

    var tok = new Tokenizer(new Rules().getRules());
    var lines = text.split('\n');

    lines.forEach(function(line) {
      var renderedTokens = [];
      var tokens = tok.getLineTokens(line);

      if (tokens && tokens.tokens.length) {
        new Text(document.createElement('div')).$renderSimpleLine(renderedTokens, tokens.tokens);
      }

      res.push('<div class="ace_line">' + renderedTokens.join('') + '</div>');
    });

    return '<div class="ace_editor ace-tomorrow"><div class="ace_layer" style="position: static;">' + res.join('') + '</div></div>';
}

Эта функция должна выделять синтаксис SQL (тема аса-завтра) в заданном тексте без загрузки всего редактора и без водосточного желоба.

...