Sitecore Integrated with Ace Code Editor

Check out my latest video showing you how to configure the EditHtml dialog with the Ace Code Editor!

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

(function($){     $('head').append("<style>div[id$=RibbonPanel],textarea[id$=Html] { display: none; } #CodeEditor { width: 100%; height: 100%; } </style>");       $(function() {         var html = $('textarea[id$=Html]');         var ce = $("<div id='CodeEditor' />");         html.after(ce);           var codeeditor = ace.edit(ce[0]);         codeeditor.setTheme("ace/theme/monokai");         codeeditor.session.setMode("ace/mode/html");         codeeditor.setShowPrintMargin(false);           codeeditor.session.setValue(html.val().trim());         codeeditor.session.on('change', function () {                 html.val(codeeditor.session.getValue());         });           ace.config.loadModule("ace/ext/emmet", function () {             ace.require("ace/lib/net").loadScript("/Scripts/ace/emmet-core/emmet.js", function () {                 codeeditor.setOption("enableEmmet", true);             });               codeeditor.setOptions({                 enableSnippets: true,                 enableBasicAutocompletion: true             });                      });           ace.config.loadModule("ace/ext/language_tools", function (module) {             codeeditor.setOptions({                 enableSnippets: true,                 enableBasicAutocompletion: true             });         });     }); }(jQuery));

Links:

• http://ace.c9.io
• https://github.com/ajaxorg/ace-builds/
• http://michaellwest.blogspot.com