webページにJavaScriptエディタを生成する

ドラッグで移動可能、ダブルクリックでコードを整形

function makeJsEditor() {

    //インポートしたいJSのURL
    const scriptUrl1 = "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js";
    const scriptUrl2 = "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-language_tools.min.js";
    const scriptUrl3 = "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/theme-sqlserver.min.js";
    const scriptUrl4 = "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/mode-javascript.min.js";
    const scriptUrl5 = "https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ext-beautify.min.js";

    var el1 = document.createElement('script');
    el1.src = scriptUrl1;
    document.body.appendChild(el1);

    var el2 = document.createElement('script');
    el2.src = scriptUrl2;
    document.body.appendChild(el2);

    var el3 = document.createElement('script');
    el3.src = scriptUrl3;
    document.body.appendChild(el3);

    var el4 = document.createElement('script');
    el4.src = scriptUrl4;
    document.body.appendChild(el4);

    var el5 = document.createElement('script');
    el5.src = scriptUrl5;
    document.body.appendChild(el5);

    var resizable = document.createElement('div');
    resizable.id = "resizable";
    var wrp = document.createElement('div');
    wrp.id = "usiwrapper";
    var edt = document.createElement('div');
    edt.id = "editor";
    wrp.appendChild(edt);
    resizable.appendChild(wrp);
    document.body.appendChild(resizable);

    document.getElementById("resizable").style.width = "200px";
    document.getElementById("resizable").style.height = "100px";
    document.getElementById("resizable").style.textAlign = "left";
    document.getElementById("resizable").style.position = "fixed";
    document.getElementById("resizable").style.top = "10px";
    document.getElementById("resizable").style.left = "10px";
    document.getElementById("resizable").style.zIndex = "2147483647";
    document.getElementById('resizable').style.backgroundColor = "rgba(200,200,200,1)";
    document.getElementById("resizable").style.padding = "0px";
    document.getElementById("resizable").style.resize = "both";
    document.getElementById("resizable").style.overflow = "scroll";

    document.getElementById("usiwrapper").style.position = "relative";
    document.getElementById('usiwrapper').style.width = "100%";
    document.getElementById('usiwrapper').style.height = "100%";

    document.getElementById('editor').style.position = "relative";
    document.getElementById('editor').style.width = "100%";
    document.getElementById('editor').style.height = "100%";

    document.getElementById('editor').addEventListener("mouseover", setEditorScript);

    function setEditorScript() {
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/sqlserver");
        editor.getSession().setMode("ace/mode/javascript");
        editor.setFontSize(12);
        document.getElementById("editor").ondblclick = function () {
            var beautify = ace.require("ace/ext/beautify"); // get reference to extension
            var editor = ace.edit("editor"); // get reference to editor
            beautify.beautify(editor.session);
        };
        editor.setOptions({
            enableBasicAutocompletion: false,
            enableSnippets: false,
            enableLiveAutocompletion: true
        });

        //要素を指定
        var targetElement = document.getElementById("usiwrapper");

        //dragstartイベント不使用
        targetElement.ondragstart = function (event) {
            return false;
        };

        var offx;
        var offy;

        // ドラッグ・ドロップ時のイベント登録
        targetElement.onmousedown = function (e) {
            offx = e.offsetX;
            offy = e.offsetY;
            document.addEventListener("mousemove", onMouseMove);
        };
        var onMouseMove = function (event) {
            var x = event.clientX;
            var y = event.clientY;
            var extraTop = document.getElementById("resizable").offsetTop;
            var extraLeft = document.getElementById("resizable").offsetLeft;
            var arrange = document.getElementsByClassName("ace_gutter")[0].offsetWidth;
            var paddingTop = document.getElementById("resizable").style.paddingTop;
            var paddingLeft = document.getElementById("resizable").style.paddingLeft;
            targetElement.style.removeProperty('bottom');
            targetElement.style.removeProperty('right');
            targetElement.style.top = (y - offy - extraTop - parseInt(paddingTop)) + "px";
            targetElement.style.left = (x - offx - extraLeft - arrange - parseInt(paddingLeft)) + "px";

            document.getElementById("resizable").style.top = (parseInt(document.getElementById("resizable").style.top) + parseInt(targetElement.style.top)) + "px";
            document.getElementById("resizable").style.left = (parseInt(document.getElementById("resizable").style.left) + parseInt(targetElement.style.left)) + "px";
        };
        targetElement.onmouseup = function () {
            document.removeEventListener("mousemove", onMouseMove);
        };
        // document.getElementById('editor').removeEventListener("mouseover", setEditorScript);
    }
}