lundi 7 décembre 2020

How do I integrate ace JavaScript code editor into a website?

I am trying to integrate the ace js editor into a website code editor. The web app tries to compute the JS code for a model solver. Thus, the JS view shows the corresponding cleaned up JS code for the model.

In my html file I have, the made for the JS code is:

<div class="dropZone" id="jsView">
           <textarea id="jsTextarea" spellcheck="false"> </textarea>
         </div>

In my JS file I have written a function that computes the corresponding JS code with a clean up:

function getJS() {
  if (window.currentView === 'html') {
    updateModelViewHTML();
  }
  const modelView = document.getElementById(window.selectedInst);
  let model = null;
  const data = [];
  const template = [];
  for (let i = 0; i < modelView.children.length; ++i) {
    const element = modelView.children[i];
    switch (element.tagType) {
      case tagsConfig.tagTypes.model:
        model = element;
        break;
      case tagsConfig.tagTypes.data:
        data.push(element);
        break;
      case tagsConfig.tagTypes.template:
        template.push(element);
        break;
      default:
        break;
    }
  }
  const js = Synthesizer.getJScode(model, data, template);

  return beautify.js(js, { indent_size: 2, preserve_newlines: false });
}

I have tried to do:

var editor = ace.edit("jsTextarea");
editor.session.setMode("ace/mode/javascript");

How do I take the return result and put it in the corresponding <div> so that the returned result displays with the JS ace code editor? Would i have to remove the text area and work only with the div for it to work with ace or is there a work around? Plus, would code mirror be better instead?

Aucun commentaire:

Enregistrer un commentaire