{"id":179,"date":"2023-12-23T11:10:49","date_gmt":"2023-12-23T05:40:49","guid":{"rendered":"http:\/\/codetheory.in\/?p=179---eefd713e-e30b-4352-bea3-6db8d0b22442"},"modified":"2023-12-23T11:10:49","modified_gmt":"2023-12-23T05:40:49","slug":"integrating-an-in-browser-code-editor-to-your-playground","status":"publish","type":"post","link":"https:\/\/codetheory.in\/integrating-an-in-browser-code-editor-to-your-playground\/","title":{"rendered":"Integrating an In-browser Code Editor to Your Playground"},"content":{"rendered":"<p style=\"text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-226\" src=\"http:\/\/codetheory.in\/wp-content\/uploads\/2012\/10\/DSC00632.png\" alt=\"\" width=\"750\" height=\"266\" \/><br \/>\nWe have already <a href=\"http:\/\/codetheory.in\/creating-the-environment-to-write-code-and-render-in-realtime\/\">created our environment<\/a> to write and render html, css, js code and also <a href=\"http:\/\/codetheory.in\/using-html5-postmessage-for-a-secured-cross-domain-communication-and-rendering\/\">made it secured<\/a>. Now we&#8217;ll add an in-browser code editing tool that supports syntax highlighting, indentation, themes, <a href=\"http:\/\/code.google.com\/p\/zen-coding\/\" target=\"_blank\" rel=\"noopener\">zen coding<\/a> and tons of more cool features to help us code even better.<\/p>\n<p><!--more--><\/p>\n<h2>In-Browser Code Editors<\/h2>\n<p>There are 2 popular and awesome in-browser code editing tools available:<\/p>\n<ul>\n<li><a title=\"Codemirror\" href=\"http:\/\/codemirror.net\/\" target=\"_blank\" rel=\"noopener\">CodeMirror<\/a><\/li>\n<li><a href=\"http:\/\/ace.ajax.org\/\" target=\"_blank\" rel=\"noopener\">Ace Editor<\/a><\/li>\n<\/ul>\n<p><a href=\"http:\/\/cssdeck.com\" target=\"_blank\" rel=\"noopener\">CSSDeck<\/a> uses CodeMirror. No special reason for that, I just ended up using it.<\/p>\n<h2>Integrating CodeMirror<\/h2>\n<p>Integrating CodeMirror is super easy. All we need to do is replace our textarea with a CodeMirror Instance by a simple call to the CM API:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ - you can get the textarea_node using jQuery or DOM querySelector()\r\n\/\/ - cm_options should be a Javascript Object\r\nvar editor = CodeMirror.fromTextArea(textarea_node, cm_options);\r\n<\/pre>\n<p>First, you&#8217;ll need to download <a href=\"http:\/\/codemirror.net\/codemirror.zip\" target=\"_blank\" rel=\"noopener\">CodeMirror<\/a> and load the stylesheets (in <code>&lt;head&gt;<\/code>) and scripts (at the end of <code>&lt;body&gt;<\/code>):<\/p>\n<ul>\n<li><code>\/lib\/codemirror.css<\/code><\/li>\n<li><code>\/lib\/codemirror.js<\/code> &#8211; Core JS<\/li>\n<li><code>\/mode\/xml\/xml.js<\/code> &#8211; Script for XML\/HTML Mode<\/li>\n<li><code>\/mode\/htmlmixed\/htmlmixed.js<\/code> &#8211; Script for XML\/HTML Mode<\/li>\n<li><code>\/mode\/css\/css.js<\/code> &#8211; Script for CSS Mode<\/li>\n<li><code>\/mode\/javascript\/javascript.js<\/code> &#8211; Script for JavaScript Mode<\/li>\n<\/ul>\n<p>Phew! Lots of includes. We&#8217;ll need to replace some of our old code with new parts:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ EDITORS\r\n\r\n\/\/ CM OPTIONS\r\nvar cm_opt = {\r\n\tmode: 'text\/html',\r\n\tgutter: true,\r\n\tlineNumbers: true,\r\n\r\n\tonChange: function (instance, changes) {\r\n\t\trender();\r\n\t}\r\n};\r\n\r\n\/\/ HTML EDITOR\r\nvar html_box = document.querySelector('#html textarea');\r\nvar html_editor = CodeMirror.fromTextArea(html_box, cm_opt);\r\n\r\n\/\/ CSS EDITOR\r\ncm_opt.mode = 'css';\r\nvar css_box = document.querySelector('#css textarea');\r\nvar css_editor = CodeMirror.fromTextArea(css_box, cm_opt);\r\n\r\n\/\/ JAVASCRIPT EDITOR\r\ncm_opt.mode = 'javascript';\r\nvar js_box = document.querySelector('#js textarea');\r\nvar js_editor = CodeMirror.fromTextArea(js_box, cm_opt);\r\n\r\n\/\/ SETTING CODE EDITORS INITIAL CONTENT\r\nhtml_editor.setValue('Hello World');\r\ncss_editor.setValue('body { color: red; }');\r\n<\/pre>\n<p>Quite a bit of code, but definitely worth it. All we do is, get the <code>textarea<\/code> nodes using <code>querySelector()<\/code> and pass them along with a set of basic options to <code>fromTextArea()<\/code>. This converts all the <code>textarea<\/code> elements to super awesome CodeMirror Editors. For a full list of options, settings and features, check out the <a title=\"CodeMirror Manual\" href=\"http:\/\/codemirror.net\/doc\/manual.html\" target=\"_blank\" rel=\"noopener\">single page CM Manual<\/a>. It has got everything you&#8217;ll ever need.<\/p>\n<p>We can get rid of the <code>keyup<\/code> event from <code>textarea<\/code> now, because the <code>onChange<\/code> option of CodeMirror accepts a callback that&#8217;ll get called everytime there is a user input detected. Also, to fetch the content of the editors, we cannot use <code>textarea_node.value<\/code> anymore. Instead, we just use <code>getValue()<\/code> on the CM object.<\/p>\n<p><a href=\"http:\/\/cssdeck.com\/labs\/zcqps6a7\" target=\"_blank\" rel=\"noopener\">Check out the Final Result<\/a>.<\/p>\n<h2>Themes<\/h2>\n<p>CodeMirror also supports a <a href=\"http:\/\/codemirror.net\/theme\/\" target=\"_blank\" rel=\"noopener\">lot of themes<\/a>. All you need to do is include the CSS file and pass the name in <a href=\"http:\/\/codemirror.net\/doc\/manual.html#option_theme\" target=\"_blank\" rel=\"noopener\">theme option<\/a>.<\/p>\n<h2>Zen Coding<\/h2>\n<p>Want to use the amazing Zen Coding in your HTML and CSS code editors ? Not a problem at all! Get the <strong>Zen.Coding-Codemirror<\/strong> plugin <a href=\"https:\/\/github.com\/sergeche\/zen-coding\/downloads\" target=\"_blank\" rel=\"noopener\">from here<\/a>. I think Zen Coding has a new name now &#8211; Emmet. So choose your package appropriately and simply load the plugin&#8217;s script file in your HTML code. The Readme file in the package will have information on how to add support to your editors which should be something simple like this:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ For HTML\r\nhtml_editor.setOption('onKeyEvent', function() { return zen_editor.handleKeyEvent.apply(zen_editor, arguments); });\r\n\r\n\/\/ For CSS\r\ncss_editor.setOption('onKeyEvent', function() { return zen_editor.handleKeyEvent.apply(zen_editor, arguments); });\r\ncss.setOption('syntax', 'css');\r\n<\/pre>\n<h2>Indentation on Pressing Tab Key<\/h2>\n<p>By default you might not be able to indent by pressing the <code>tab<\/code> key. You&#8217;ll need this piece of snippet to enable it:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ Basically adding to the CM Options\r\ncm_opt&#x5B;'extraKeys'] = {\r\n\tTab: function(instance) {\r\n\t\tif (inst.somethingSelected())\r\n\t\t\tCodeMirror.commands.indentMore(inst);\r\n\t\telse\r\n\t\t\tCodeMirror.commands.insertTab(inst);\r\n\t}\r\n}\r\n<\/pre>\n<h2>Final Words<\/h2>\n<p>As far as the client-side part is concerned, we&#8217;re completed. In the beginning, we designed and developed the environment where anyone can write html, css, js code that gets rendered and displayed in an iframe in realtime. Next, we made our environment secured by setting our iframe on a different origin and using the HTML5 postMessage API. Finally, we integrated an amazing Code Editor to build a perfect coding environment.<\/p>\n<p>In the next part, we&#8217;ll take a look at how to present our creations in a gallery like the homepage of <a title=\"CSSDeck\" href=\"http:\/\/cssdeck.com\" target=\"_blank\" rel=\"noopener\">CSSDeck<\/a>, because that&#8217;s how your friends, users, customers, etc. will browser through your mind blowing works!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We have already created our environment to write and render html, css, js code and also made it secured. Now we&#8217;ll add an in-browser code editing tool that supports syntax highlighting, indentation, themes, zen coding and tons of more cool features to help us code even better.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[26,27,25,3],"_links":{"self":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/179"}],"collection":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/comments?post=179"}],"version-history":[{"count":28,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/179\/revisions"}],"predecessor-version":[{"id":184631,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/posts\/179\/revisions\/184631"}],"wp:attachment":[{"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/media?parent=179"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/categories?post=179"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codetheory.in\/wp-json\/wp\/v2\/tags?post=179"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}