Ace Editor / Tampermonkey を使ってサイトに埋め込む

Ace Editor / Tampermonkey を使ってサイトに埋め込む

つまりある特定のサイトのテキストエリアをこの Ace Editor に組み替えてやろうという寸法

読み込む

こいつは、モジュールが必要になったら、都度読み込むという方式をとるらしく、 それをひとまとめにパッケージしたソースも無いようなので、通常で required で読み込んでもうまくいかない。

script タグを貼り付けて、あくまでもコンテンツの一部ですよという感じで読み込んでやらないといけない。 というか、自分はそうした。

function loadScript(_src, _callback){
    const scriptDom = document.createElement("script");
    scriptDom.crossorigin = "use-credentials";
    scriptDom.src = _src;
    scriptDom.onload = _callback;
 
    const domHead = document.querySelector("head");
    domHead.appendChild(scriptDom);
};

こいつの中身がさらに通信するので、クロスオリジンの設定を加えている。

読み込んだ後に basePath というのを設定して、モジュールの読み込みリクエストをどこを起点に行うのかを決める。

loadScript("https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js", function(){
    ace.config.set('basePath', 'https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/');
    const domAceEditorDiv = document.createElement("div");
    document.body.appendChild(domAceEditorDiv);
    const editor = ace.edit(domAceEditorDiv);
});

ace というのは読み込まれたら勝手に作られる変数で、そいつを通じて色々やる。

javascript/ace_editor/use_a_site_by_tampermonkey.txt · 最終更新: 2021-04-29 19:31 by ore