How to use ace-builds - 10 common examples

const editorElement = this.javascriptEditorElmRef.nativeElement;
    let editorOptions: Partial = {
      mode: 'ace/mode/javascript',
      showGutter: true,
      showPrintMargin: true,
      readOnly: this.disabled
    };

    const advancedOptions = {
      enableSnippets: true,
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true
    };

    editorOptions = {...editorOptions, ...advancedOptions};
    this.jsEditor = ace.edit(editorElement, editorOptions);
    this.jsEditor.session.setUseWrapMode(true);
    this.jsEditor.setValue(this.modelValue ? this.modelValue : '', -1);
    this.jsEditor.on('change', () => {
      this.cleanupJsErrors();
      this.updateView();
    });
    this.editorResizeListener = this.onAceEditorResize.bind(this);
    // @ts-ignore
    addResizeListener(editorElement, this.editorResizeListener);
  }

componentDidMount() {
    this.aceEditor = edit(this.containerEl.current!);
    this.aceEditorSession = this.aceEditor.getSession();
    // For debugging.
    Object.assign(window, {
      aceEditor: this.aceEditor,
      aceEditorSession: this.aceEditorSession,
    });

    this.body = this.props.body;
    this.aceEditorSession.setValue(this.body);

    this.aceEditorSession
      .getDocument()
      .on('change', this.debouncedUpdate.bind(this));
    this.aceEditorSession.setMode('ace/mode/asciidoc');
    this.aceEditorSession.setUseWrapMode(true);
    this.aceEditor.setShowPrintMargin(false);

mounted() {
            this.aceEditor = ace.edit(this.$refs.ace, {
                maxLines: 60,
                minLines: 20,
                fontSize: 14,
                value: this.value ? this.value : '',
                theme: this.themePath,
                mode: this.modePath,
                wrap: this.wrap,
                tabSize: 4
            });
            // 激活自动提示
            this.aceEditor.setOptions({
                enableSnippets: true,
                enableLiveAutocompletion: true,
                enableBasicAutocompletion: true
            });
            this.aceEditor.getSession().on('change', this.change)

mounted() {
            this.aceEditor = ace.edit(this.$refs.ace, {
                maxLines: 30, // 最大行数，超过会自动出现滚动条
                minLines: 10, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
                fontSize: 14, // 编辑器内字体大小
                theme: this.themePath, // 默认设置的主题
                mode: this.modePath, // 默认设置的语言模式
                value: '',
                tabSize: 4 // 制表符设置为 4 个空格大小
            })
        },
        created: async function () {

function TMController(containers, buttons, document) {
  // FIXME: check for every container and button and throw if any are missing
  Object.defineProperties(this, {
    containers: { value: containers },
    buttons: { value: buttons }
  });

  this.simulator = new TMSim(containers.simulator, buttons.simulator);

  // Set up ace editor //
  var editor = ace.edit(containers.editor);
  Object.defineProperty(this, 'editor', {
    value: editor,
    enumerable: true
  });
  editor.session.setOptions({
    mode: 'ace/mode/yaml',
    tabSize: 2,
    useSoftTabs: true
  });
  editor.setOptions({
    minLines: 15,
    maxLines: 50
  });
  // suppress warning about
  // "Automatically scrolling cursor into view after selection change"
  editor.$blockScrolling = Infinity;

function TMDocumentController(containers, buttons, document) {
  this.simulator = new TMSimulator(containers.simulator, buttons.simulator);

  // Set up ace editor //
  var editor = ace.edit(containers.editor);
  editor.session.setOptions({
    mode: 'ace/mode/yaml',
    tabSize: 2,
    useSoftTabs: true
  });
  editor.setOptions({
    minLines: 15,
    maxLines: 50
  });
  // suppress warning about
  // "Automatically scrolling cursor into view after selection change"
  editor.$blockScrolling = Infinity;

  var editorButtons = buttons.editor;
  var self = this;
  editorButtons.load

var buttons = this.buttons;
  var enable = (this.machine != null);
  if (enable) {
    rebindStepRun(buttons.step, buttons.run,
      this.htmlForRunButton, this.htmlForPauseButton, this.machine);
  }
  buttons.all.forEach(function (b) { b.disabled = !enable; });
};

//////////////////
// TMController //
//////////////////
var ace = require('ace-builds/src-min-noconflict');
var TMSpecError = Parser.TMSpecError;
var YAMLException = Parser.YAMLException;
var UndoManager = ace.require('ace/undomanager').UndoManager;

// document viewer & editor. always associated with a document.
// FIXME: ensure that document is present
function TMController(containers, buttons, document) {
  // FIXME: check for every container and button and throw if any are missing
  Object.defineProperties(this, {
    containers: { value: containers },
    buttons: { value: buttons }
  });

  this.simulator = new TMSim(containers.simulator, buttons.simulator);

  // Set up ace editor //
  var editor = ace.edit(containers.editor);
  Object.defineProperty(this, 'editor', {
    value: editor,

function main()
{
  // editor configs
  const jsonEditor = document.getElementById('jsonEditor');
  const editor = ace.edit(jsonEditor);
  editor.getSession().setMode('ace/mode/json');
  editor.setShowPrintMargin(false);
  editor.setFontSize(14);

  // Characters stop showing up after the 10000th charater in a line
  // https://github.com/ajaxorg/ace/issues/3983
  editor.renderer.$textLayer.MAX_LINE_LENGTH=Infinity;

  function setEditorText(str)
  {
    editor.setValue(str);
  }

  jsonEditor.addEventListener('dragover', (ev) => { if (ev.preventDefault) ev.preventDefault(); });
  jsonEditor.addEventListener('dragenter', (ev) => { if (ev.preventDefault) ev.preventDefault(); });
  jsonEditor.addEventListener("drop", (ev) => {

addUnderlineMarker(row) {
        // Underline the problem line to make it more obvious
        //  if they don't notice the gutter icon
        const AceRange = ace.require("ace/range").Range;
        const line = this.editor.session.getDocument().getLine(row);
        this.editor.session.addMarker(
           new AceRange(row, 0, row, line.length),
           "ace_problem_line", "text", false);
    }

updateText: function(newText, customSelection, avoidUndo) {
        if (!this.parent || this.parent.options.record && this.parent.options.record.playing) {
            return;
        }
        var parent = this.parent;
        var editor = parent.editor;

        parent.ignore = true;
        newText = newText.toString();
        var Range = ace.require("ace/range").Range;
        var loc = this.aceLocation;
        var range = new Range(loc.row, loc.start, loc.row, loc.start + loc.length);

        // We probably could just set it to false when we're done, but someone else might
        // be trying a similar hack, or... who knows?
        var undoState;
        if (avoidUndo) {
            undoState = editor.session.$fromUndo;
            editor.session.$fromUndo = true;
        }
        editor.session.replace(range, newText);
        if (avoidUndo) {
            editor.session.$fromUndo = undoState;
        }

        range.end.column = range.start.column + newText.length;