Как выделить код с помощью редактора ACE?

Я хотел бы выделить синтаксис более дюжины небольших фрагментов кода, а затем сделать их доступными для редактирования с помощью редактора 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, но я хотел бы попробовать использовать один и тот же маркер как для отображаемого, так и для редактируемого текста.


javascript ace-editor syntax-highlighting cloud9-ide
person Benjamin Atkin    schedule 12.01.2012    source источник
comment
Ace Editor имеет режим только для чтения, который в основном позволяет отображать только редактор, но вы все равно получаете накладные расходы, связанные с полным редактором. Однако скорость не является большой проблемой - больше размер редактора. Я использую его как для редактирования, так и для отображения на нескольких сайтах, и он работает хорошо.   -  person Rick Strahl    schedule 12.04.2016
comment
@RickStrahl Я был бы рад узнать, как установить режим только для чтения. потому что ближайший пример, который я смог найти, это static_highlight, но он использует структуру кухонной раковины. Я был бы счастлив с одним вкладышем, таким как editor.mode = readonly.   -  person v.oddou    schedule 20.05.2019

Ответы (5)


arrow_upward
6
arrow_downward

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

person Jan Jongboom    schedule 24.01.2012

arrow_upward
16
arrow_downward

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

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");
person megas    schedule 21.02.2012

arrow_upward
8
arrow_downward

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

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);
}
person maudulus    schedule 14.01.2015

arrow_upward
1
arrow_downward

Идея:

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 (тема ace-tomorrow) в заданном тексте, не загружая весь редактор и без канавки.

person trimstring    schedule 24.08.2015
comment
Все еще работает с версией 1.4.8, но просто меняет массив renderedTokens для элемента HTML, к которому вы хотите добавить дочерние элементы. - person Jorge Fuentes González; 05.08.2020
comment
Выглядит многообещающе, но в последней версии Ace я получаю Uncaught TypeError: e.appendChild is not a function - person cronoklee; 04.02.2021

arrow_upward
0
arrow_downward

Я думаю, что очень поздно отвечать, но я все равно напишу, если это может помочь другим.

В итоге я создал простую функцию в машинописном тексте, которая находит координаты для выделения диапазона, а также прокручивает его:

highlighText(text: string) {
    const value = this.aceEditor.session.getValue();
    const startRow = value.substr(0, value.indexOf(text)).split(/\r\n|\r|\n/).length - 1;
    const startCol = this.aceEditor.session.getLine(startRow).indexOf(text);
    const endRowOffset = text.split(/\r\n|\r|\n/).length;
    const endRow = startRow + endRowOffset - 1;
    const endCollOffset = text.split(/\r\n|\r|\n/)[endRowOffset - 1].length;
    const endCol = startCol + (endCollOffset > 1 ? endCollOffset + 1 : endCollOffset);
    const range = new ace.Range(startRow, startCol, endRow, endCol);

    this.aceEditor.session.selection.setRange(range);
    this.aceEditor.scrollToLine(startRow, true, true, () => {});
  }
person shhdharmen    schedule 17.02.2021