├── README.md ├── styles.css ├── LICENSE ├── index.html └── code.js /README.md: -------------------------------------------------------------------------------- 1 | # aceEditorDemo 2 | 3 | I needed good demo code for the Ace editor. 4 | 5 | ### Demo 6 | 7 | It's running on the web. 8 | 9 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Ubuntu; 3 | font-size: 18px; 4 | background-color: whitesmoke; 5 | } 6 | .divPageBody { 7 | width: 600px; 8 | margin-left: auto; 9 | margin-right: auto; 10 | margin-top: 50px; 11 | margin-bottom: 500px; 12 | } 13 | p { 14 | margin-bottom: 20px; 15 | } 16 | .divEditorContainer { 17 | } 18 | .divEditor { 19 | width: 600px; 20 | height: 400px; 21 | border: 1px solid silver; 22 | } 23 | .ace_gutter-layer { 24 | /* https://github.com/ajaxorg/ace/issues/1104 */ 25 | /* original width is 48px */ 26 | width: 32px !important; 27 | } 28 | .ace_gutter-layer > * { 29 | /* 48 - 32 = 16 */ 30 | margin-left: -16px; 31 | } 32 | .ace_scrollbar-v { 33 | display: block !important; 34 | overflow-y: scroll; 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Dave Winer 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Ace Editor Demo 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 |

Ace Editor Demo

26 |

I needed good demo code for the Ace editor.

27 |
28 |
29 |
30 |
31 |
32 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /code.js: -------------------------------------------------------------------------------- 1 | var appConsts = { 2 | version: "0.4.0" 3 | } 4 | 5 | var theEditor; //ace-editor object 6 | var editorSerialnum = 0; 7 | var idCurrentEditor = undefined; 8 | var whenLastUserAction = new Date (); 9 | var savedEditorStatus = { 10 | }; 11 | var flEditorChanged = false; 12 | 13 | function editorChanged () { 14 | flEditorChanged = true; 15 | whenLastUserAction = new Date (); 16 | } 17 | function getText () { 18 | var s = theEditor.getValue (); 19 | s = replaceAll (s, "\r", "\n"); //so source listings are readable in Chrome 20 | return (s); 21 | } 22 | function setText (s) { 23 | if (s === undefined) { 24 | s = ""; 25 | } 26 | theEditor.setValue (s); 27 | } 28 | function saveEditorStatus () { 29 | savedEditorStatus.text = getText (); 30 | savedEditorStatus.selectionRange = theEditor.getSelectionRange (); 31 | savedEditorStatus.folds = theEditor.session.getAllFolds ().map (function (fold) { 32 | return { 33 | start : fold.start, 34 | end : fold.end, 35 | placeholder : fold.placeholder 36 | }; 37 | }); 38 | localStorage.savedEditorStatus = jsonStringify (savedEditorStatus); 39 | 40 | if (savedEditorStatus.ctUpdates === undefined) { 41 | savedEditorStatus.ctUpdates = 1; 42 | } 43 | else { 44 | savedEditorStatus.ctUpdates++ 45 | } 46 | 47 | console.log ("saveEditorStatus: localStorage.savedEditorStatus == " + localStorage.savedEditorStatus); 48 | } 49 | function restoreEditorStatus () { 50 | if (savedEditorStatus.selectionRange !== undefined) { 51 | theEditor.getSelection ().setSelectionRange (savedEditorStatus.selectionRange); 52 | } 53 | if (savedEditorStatus.folds !== undefined) { 54 | var Range = ace.require ("ace/range").Range; 55 | try { 56 | savedEditorStatus.folds.forEach (function (fold) { 57 | theEditor.session.addFold (fold.placeholder, Range.fromPoints (fold.start, fold.end)); 58 | }); 59 | } 60 | catch (err) { 61 | } 62 | } 63 | if (savedEditorStatus.urlMockupPage !== undefined) { 64 | updateMockupPageDisplay (savedEditorStatus.urlMockupPage); 65 | } 66 | if (savedEditorStatus.text !== undefined) { 67 | setText (savedEditorStatus.text); 68 | } 69 | } 70 | function startEditor () { 71 | if (localStorage.savedEditorStatus !== undefined) { 72 | savedEditorStatus = JSON.parse (localStorage.savedEditorStatus); 73 | console.log ("startEditor: savedEditorStatus == " + jsonStringify (savedEditorStatus)); 74 | } 75 | theEditor = ace.edit ("idEditor"); 76 | var session = theEditor.getSession (); 77 | theEditor.setTheme ("ace/theme/github"); 78 | theEditor.setShowPrintMargin (false); 79 | session.setMode ("ace/mode/html"); 80 | session.setUseWrapMode (true); 81 | theEditor.setOption ("indentedSoftWrap", false); 82 | theEditor.container.style.lineHeight = 1.4; 83 | theEditor.setFontSize ("13px"); 84 | 85 | restoreEditorStatus (); 86 | 87 | session.on ("changeFold", function (e) { 88 | editorChanged (); 89 | }); 90 | session.selection.on ("changeSelection", function (e) { 91 | editorChanged (); 92 | }); 93 | session.on ("changeAnnotation", function () { 94 | var annotations = session.getAnnotations()||[], i = len = annotations.length; 95 | while (i--) { 96 | if(/doctype first\. Expected/.test(annotations[i].text)) { 97 | annotations.splice(i, 1); 98 | } 99 | } 100 | if(len>annotations.length) { 101 | session.setAnnotations(annotations); 102 | } 103 | }); 104 | theEditor.on ("change", function () { 105 | editorChanged (); 106 | }); 107 | } 108 | function showEditor (flDisplay) { 109 | var val; 110 | if (flDisplay) { 111 | val = "table-cell"; 112 | } 113 | else { 114 | val = "none"; 115 | } 116 | $("#idEditorContainer").css ("display", val); 117 | } 118 | function everySecond () { 119 | if (secondsSince (whenLastUserAction) > 0.5) { 120 | if (flEditorChanged) { 121 | flEditorChanged = false; 122 | saveEditorStatus (); 123 | } 124 | } 125 | } 126 | function startup () { 127 | console.log ("startup"); 128 | startEditor (); 129 | showEditor (true); 130 | self.setInterval (everySecond, 1000); 131 | } 132 | --------------------------------------------------------------------------------