Not logged in.  Login/Logout/Register | List snippets | | Create snippet | Upload image | Upload data

57
LINES

< > BotCompany Repo | #1031627 // HTMLAceEditor [better version of hAceEditor that can put multiple editors on one page]

JavaX fragment (include) [tags: use-pretranspiled]

Libraryless. Click here for Pure Java version (5239L/30K).

// requires JQuery
sclass HTMLAceEditor implements Htmlable {
  S text;
  S name = "text";
  S id;
  Map divParams = litmap(style := "width: 80ch; height: 20em");
  S onKeyDown;
  
  *() {}
  *(S *text) {}
  
  // only needed once (call on any instance)
  public S headStuff() {
    ret hscriptsrc("https://botcompany.de/ace-builds/src-noconflict/ace.js")
      + hscriptsrc("https://botcompany.de/ace-builds/src-noconflict/ext-language_tools.js");
  }
  
  // for each editor
  public S html() {
    id = "ace_" + name;
  
    ret div(htmlEncode2(text), params_stylePlus("display: none", paramsPlus(mapToParams(divParams), +id)))
      + hhiddenWithIDAndName(name)
      + hscript(replaceDollarVars([[ (function() {
        ace.require("ace/ext/language_tools");
        var editor = ace.edit($id);
        editor.setTheme("ace/theme/ambience");
        editor.getSession().setTabSize(2);
        editor.getSession().setUseSoftTabs(true);
        editor.getSession().setUseWrapMode(true);
        document.getElementById($id).style.fontSize='15px';
        editor.setOptions({
          enableBasicAutocompletion: true
        });
      
        var div = $("#" + $id);
        var hiddenVal = document.getElementById($name);
        function updateHidden() {
          div.trigger('input'); // for auto-expand
          //hiddenVal.value = editor.getValue();
          var newVal = editor.getValue();
          if (hiddenVal.value != newVal)
            $(hiddenVal).val(newVal).trigger('change');
        }
        updateHidden();
      
        editor.session.on('change', updateHidden);
        $onKeyDown
  
        div.show();
        //editor.focus();
      })() ]], id := jsQuote(id), name := jsQuote(name),
        onKeyDown := empty(onKeyDown) ? "" : "editor.textInput.getElement().onkeydown = " + onKeyDown + ";");
  }
  
  S complete() { ret linesLL(headStuff(), html()); }
}

Author comment

Began life as a copy of #1030234

download  show line numbers  debug dex  old transpilations   

Travelled to 5 computer(s): bhatertpkbcr, ekrmjmnbrukm, mqqgnosmbjvj, pyentgdyhuwx, vouqrxazstgt

No comments. add comment

Snippet ID: #1031627
Snippet name: HTMLAceEditor [better version of hAceEditor that can put multiple editors on one page]
Eternal ID of this version: #1031627/13
Text MD5: ae82dc1837feba86cbef70080b2ae566
Transpilation MD5: daa911624c575215f77aa7cda2f73ef6
Author: stefan
Category: javax / html
Type: JavaX fragment (include)
Public (visible to everyone): Yes
Archived (hidden from active list): No
Created/modified: 2021-10-04 03:51:51
Source code size: 1944 bytes / 57 lines
Pitched / IR pitched: No / No
Views / Downloads: 123 / 303
Version history: 12 change(s)
Referenced in: [show references]