ACE rich editor for any textarea from a bookmark

Transformer n’importe quel textarea en éditeur de code, avec coloration syntaxique.

The following code can reside in the link attribute of a bookmark of yours.

javascript:(function inject(options, callback) { var load = function(path, callback) { var head = document.getElementsByTagName('head')[0]; var s = document.createElement('script'); s.src = options.baseUrl + "/" + path; head.appendChild(s); s.onload = s.onreadystatechange = function(_, isAbort) { if (isAbort || !s.readyState || s.readyState == "loaded" || s.readyState == "complete") { s = s.onload = s.onreadystatechange = null; if (!isAbort) callback(); } }; }; var pending = []; var transform = function(el) { pending.push(el) }; load("ace.js", function() { ace.config.loadModule("ace/ext/textarea", function(m) { transform = function(el) { if (!el.ace) el.ace = m.transformTextarea(el, options.ace); }; pending = pending.forEach(transform); callback && setTimeout(callback); }); }); if (options.target) return transform(options.target); window.addEventListener("click", function(e) { if (e.detail == 3 && e.target.localName == "textarea") transform(e.target); });})({"selectionStyle":"line","highlightActiveLine":true,"highlightSelectedWord":true,"readOnly":false,"copyWithEmptySelection":false,"cursorStyle":"ace","mergeUndoDeltas":true,"behavioursEnabled":true,"wrapBehavioursEnabled":true,"keyboardHandler":null,"showLineNumbers":true,"hScrollBarAlwaysVisible":false,"vScrollBarAlwaysVisible":false,"highlightGutterLine":true,"animatedScroll":false,"showInvisibles":false,"showPrintMargin":false,"printMarginColumn":80,"printMargin":false,"fadeFoldWidgets":false,"showFoldWidgets":true,"displayIndentGuides":true,"showGutter":false,"fontSize":"12px","scrollPastEnd":0,"theme":"textmate","maxPixelHeight":0,"useTextareaForIME":true,"scrollSpeed":2,"dragDelay":0,"dragEnabled":true,"focusTimeout":0,"tooltipFollowsMouse":true,"firstLineNumber":1,"overwrite":false,"newLineMode":"auto","useWorker":true,"useSoftTabs":true,"navigateWithinSoftTabs":false,"tabSize":4,"wrap":"off","indentedSoftWrap":true,"foldStyle":"markbegin","mode":"javascript","enableMultiselect":true,"enableBlockSelect":true,"baseUrl":"https://ajaxorg.github.io/ace-builds/src-noconflict"})

1. How to use it

Click the bookmarklet.
Click three times on a textarea you want to replace, Ace will replace it.
To change settings, use Ctrl-, shortcut. (Cmd-, on mac).

You can configure the behavior of your editor at : https://ace.c9.io/build/demo/bookmarklet/index.html

This default link is for JavaScript edition.

2. To test it

Bookmarklet to click on.

(function inject(options, callback) { var load = function(path, callback) { var head = document.getElementsByTagName('head')[0]; var s = document.createElement('script'); s.src = options.baseUrl + "/" + path; head.appendChild(s); s.onload = s.onreadystatechange = function(_, isAbort) { if (isAbort || !s.readyState || s.readyState == "loaded" || s.readyState == "complete") { s = s.onload = s.onreadystatechange = null; if (!isAbort) callback(); } }; }; var pending = []; var transform = function(el) { pending.push(el) }; load("ace.js", function() { ace.config.loadModule("ace/ext/textarea", function(m) { transform = function(el) { if (!el.ace) el.ace = m.transformTextarea(el, options.ace); }; pending = pending.forEach(transform); callback && setTimeout(callback); }); }); if (options.target) return transform(options.target); window.addEventListener("click", function(e) { if (e.detail == 3 && e.target.localName == "textarea") transform(e.target); }); })({ "selectionStyle": "line", "highlightActiveLine": true, "highlightSelectedWord": true, "readOnly": false, "copyWithEmptySelection": false, "cursorStyle": "ace", "mergeUndoDeltas": true, "behavioursEnabled": true, "wrapBehavioursEnabled": true, "keyboardHandler": null, "showLineNumbers": true, "hScrollBarAlwaysVisible": false, "vScrollBarAlwaysVisible": false, "highlightGutterLine": true, "animatedScroll": false, "showInvisibles": false, "showPrintMargin": false, "printMarginColumn": 80, "printMargin": false, "fadeFoldWidgets": false, "showFoldWidgets": true, "displayIndentGuides": true, "showGutter": false, "fontSize": "12px", "scrollPastEnd": 0, "theme": "textmate", "maxPixelHeight": 0, "useTextareaForIME": true, "scrollSpeed": 2, "dragDelay": 0, "dragEnabled": true, "focusTimeout": 0, "tooltipFollowsMouse": true, "firstLineNumber": 1, "overwrite": false, "newLineMode": "auto", "useWorker": true, "useSoftTabs": true, "navigateWithinSoftTabs": false, "tabSize": 4, "wrap": "off", "indentedSoftWrap": true, "foldStyle": "markbegin", "mode": "javascript", "enableMultiselect": true, "enableBlockSelect": true, "baseUrl": "https://ajaxorg.github.io/ace-builds/src-noconflict" })

Grimoire-
Command
.es