{"id":15341,"date":"2016-11-30T12:15:31","date_gmt":"2016-11-30T10:15:31","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=15341"},"modified":"2016-11-29T18:39:34","modified_gmt":"2016-11-29T16:39:34","slug":"writing-simple-js-editor","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/","title":{"rendered":"Writing a very simple JS editor"},"content":{"rendered":"<p>There are nice web editors out there which are ready to be used: you just download them and plug them in your page. I have used myself both CodeMirror and ACE in the past. For example I wrote a plugin for <a href=\"http:\/\/tomassetti.me\/an-approach-to-uml-diagrams-and-er-models-bearable-for-a-software-engineer\/\">CodeMirror to support PlantUML<\/a>. However there is an issue with these editors: they are difficult to extend and difficult to understand.<\/p>\n<p>When I look at the code of these products I see something that I cannot easily understand, something I do not feel confident building upon.<\/p>\n<p>Now, my philosophy is to build simple tools, that work, can be understood, combined and extended. So I wanted to try another approach, building my own simple web editor from scratch.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/11\/webeditor2.gif\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-15344\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2016\/11\/webeditor2.gif\" alt=\"webeditor2\" width=\"606\" height=\"172\" \/><\/a><\/p>\n<p>Following the rule of putting your code where your mouth is, here comes the GitHub repo:\u00a0<a href=\"https:\/\/github.com\/ftomassetti\/simple-web-editor\">https:\/\/github.com\/ftomassetti\/simple-web-editor<\/a><\/p>\n<h3>HTML<\/h3>\n<p>Let\u2019s start slow, with some HTML:<\/p>\n<pre class=\"brush:xml\">&lt;html&gt;\r\n&lt;head&gt;\r\n    &lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"css\/style.css\" media=\"screen\" \/&gt;\r\n    &lt;script src=\"js\/jquery-3.1.1.min.js\"&gt;&lt;\/script&gt;\r\n    &lt;script src=\"js\/webeditor.js\"&gt;&lt;\/script&gt;\r\n    &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Source+Code+Pro\" rel=\"stylesheet\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n    &lt;h1&gt;My Simple Web Editor&lt;\/h1&gt;\r\n    &lt;div id=\"editor\"&gt;        \r\n    &lt;\/div&gt;\r\n    &lt;span class=\"blinking-cursor\"&gt;|&lt;\/span&gt;    \r\n&lt;body&gt;    \r\n&lt;\/html&gt;<\/pre>\n<p>What we have here?<\/p>\n<ul>\n<li>jquery, of course<\/li>\n<li>some CSS<\/li>\n<li>a cool font from Google<\/li>\n<li>a JS file with all of our code (wededitor.js)<\/li>\n<li>a div (<em>editor<\/em>) and a span for our blinking editor<\/li>\n<\/ul>\n<h2>TypeScript<\/h2>\n<p>Now, we are going to use TypeScript with the hope that it can reduce a little bit the pain of using JavaScript. And also because I want to try it out. For people who have never used it before TypeScript is basically a superset of JavaScript which permits to optionally specify types. Types are used to check for errors and then forgot because in the end we generate JavaScript. You can use JavaScript libraries in TypeScript and when you want to do that you may want to import a description of all the types in that library. This is what we import in the first line.<\/p>\n<pre class=\"brush:java\">\/\/\/ &lt;reference path=\"defs\/jquery.d.ts\" \/&gt;\r\n \r\nclass Editor {\r\n    private caretIndex: number;\r\n    private text: string;\r\n \r\n    constructor() {\r\n        this.caretIndex = 0;\r\n        this.text = \"\";\r\n    }\r\n \r\n    textBeforeCaret() {\r\n        if (this.caretIndex == 0) {\r\n            return \"\";\r\n        } else {\r\n            return this.text.substring(0, this.caretIndex);\r\n        }\r\n    }\r\n \r\n    textAfterCaret() {\r\n        if (this.caretIndex  == this.text.length) {\r\n            return \"\";\r\n        } else {\r\n            return this.text.substring(this.caretIndex );\r\n        }\r\n    }\r\n \r\n    generateHtml() {\r\n        return this.textBeforeCaret() \r\n                + \"&lt;span class='cursor-placeholder'&gt;|&lt;\/span&gt;\"\r\n                + this.textAfterCaret();\r\n    }\r\n \r\n    type(c:string) {\r\n        this.text = this.textBeforeCaret() + c + this.textAfterCaret();\r\n        this.caretIndex = this.caretIndex + 1;\r\n    }\r\n \r\n    deleteChar() : boolean {\r\n        if (this.textBeforeCaret().length &gt; 0) {\r\n            this.text = this.textBeforeCaret().substring(0, this.textBeforeCaret().length - 1) + this.textAfterCaret();\r\n            this.caretIndex--;\r\n            return true;\r\n        } else {\r\n            return false;\r\n        }\r\n    }\r\n \r\n    moveLeft() : boolean {\r\n        if (this.caretIndex == 0) {\r\n            return false;\r\n        } else {\r\n            this.caretIndex--;\r\n            return true;\r\n        }\r\n    }\r\n \r\n    moveRight() : boolean {\r\n        if (this.caretIndex == this.text.length) {\r\n            return false;\r\n        } else {\r\n            this.caretIndex++;\r\n            return true;\r\n        }\r\n    }    \r\n}\r\n \r\nvar updateHtml = function() {   \r\n    $(\"#editor\")[0].innerHTML = (window as any).editor.generateHtml();\r\n    var cursorPos = $(\".cursor-placeholder\").position();\r\n    var delta = $(\".cursor-placeholder\").height() \/ 4.0;\r\n    $(\".blinking-cursor\").css({top: cursorPos.top, left: cursorPos.left - delta});        \r\n};\r\n \r\n$( document ).ready(function() {        \r\n    (window as any).editor = new Editor();\r\n \r\n    updateHtml();\r\n    $(document).keypress(function(e){\r\n        var c = String.fromCharCode(e.which);   \r\n        (window as any).editor.type(c);        \r\n        updateHtml();\r\n    });\r\n    $(document).keydown(function(e){\r\n        if (e.which == 8 &amp;&amp; (window as any).editor.deleteChar()) {            \r\n            updateHtml();\r\n        };\r\n        if (e.which == 37 &amp;&amp; (window as any).editor.moveLeft()) {\r\n            updateHtml();\r\n        };\r\n        if (e.which == 39 &amp;&amp; (window as any).editor.moveRight()) {\r\n            updateHtml();\r\n        };\r\n    });\r\n});<\/pre>\n<p>Ok, let\u2019s look at the code now. We have:<\/p>\n<ul>\n<li>the Editor class<\/li>\n<li>the function updateHTML<\/li>\n<li>the wiring in\u00a0<em>$(document).ready(\u2026)<\/em><\/li>\n<\/ul>\n<h3>The editor class<\/h3>\n<p>The editor class is where we do the heavy lifting. We store two things:<\/p>\n<ol>\n<li>the text contained in the editor<\/li>\n<li>the position of the caret within the text<\/li>\n<\/ol>\n<p><em>TextBeforeCaret<\/em> and\u00a0<em>TextAfterCaret\u00a0<\/em>obviously give us all the text before or after the caret (surprised?).<\/p>\n<p>What\u00a0<em>generateHTML\u00a0<\/em>does? It generate the HTML code for the text placing a span to indicate the position of the caret: this element is the caret placeholder. Why we do not put the caret itself? Because the caret has a size, so if we would move it around inside the text we would cause all the text to move all the time. Instead we move the caret placeholder, which has zero size and then we use place the caret above the caret placeholder but at a different z-index. In this way we basically see the caret where we want to see it without moving the text left or right to leave place for the caret.<\/p>\n<p>The remaining methods permit to:<\/p>\n<ul>\n<li>insert a character<\/li>\n<li>delete a character<\/li>\n<li>move the caret left<\/li>\n<li>move the caret right<\/li>\n<\/ul>\n<h3>The function updateHTML<\/h3>\n<p>The function<em>\u00a0updateHTML\u00a0<\/em>implement the trick we have seen for the caret:<\/p>\n<pre class=\"brush:js\">var updateHtml = function() {   \r\n    $(\"#editor\")[0].innerHTML = (window as any).editor.generateHtml();\r\n    var cursorPos = $(\".cursor-placeholder\").position();\r\n    var delta = $(\".cursor-placeholder\").height() \/ 4.0;\r\n    $(\".blinking-cursor\").css({top: cursorPos.top, left: cursorPos.left - delta});        \r\n};<\/pre>\n<p>First we update the content of the editor, then we find the position of the caret placeholder and then we move the blinking-cursor (a.k.a. the caret) just above the placeholder. We actually move it a little bit on the left because in this way it looks nicer.<\/p>\n<h3>The wiring<\/h3>\n<p>The wiring consist in attaching event handler to:<\/p>\n<ul>\n<li>get when we type a character<\/li>\n<li>get when we delete a character<\/li>\n<li>get when we use the left and right arrow<\/li>\n<\/ul>\n<p>We then just call methods from the Editor class.<\/p>\n<h2>Conclusions<\/h2>\n<p>Ok, we started with something simple: a very minimal editor where we can type, delete, and moving around using the arrow. This is not the most impressive editor ever seen. But it is simple and it works. We can build on top of that something sensible, that does what we need and it still understandable and extensible.<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td><span class=\"reference\">Reference: <\/span><\/td>\n<td><a href=\"http:\/\/tomassetti.me\/writing-simple-js-editor\/\">Writing a very simple JS editor<\/a> from our <a href=\"http:\/\/www.webcodegeeks.com\/join-us\/wcg\/\">WCG partner<\/a> Federico Tomassetti at the <a href=\"http:\/\/tomassetti.me\/\">Federico Tomassetti<\/a> blog.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>There are nice web editors out there which are ready to be used: you just download them and plug them in your page. I have used myself both CodeMirror and ACE in the past. For example I wrote a plugin for CodeMirror to support PlantUML. However there is an issue with these editors: they are &hellip;<\/p>\n","protected":false},"author":149,"featured_media":920,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-15341","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Writing a very simple JS editor - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"There are nice web editors out there which are ready to be used: you just download them and plug them in your page. I have used myself both CodeMirror and\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Writing a very simple JS editor - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"There are nice web editors out there which are ready to be used: you just download them and plug them in your page. I have used myself both CodeMirror and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2016-11-30T10:15:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Federico Tomassetti\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@raindancer\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Federico Tomassetti\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/\"},\"author\":{\"name\":\"Federico Tomassetti\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/4d63f143f3c969ad223bc081c0284951\"},\"headline\":\"Writing a very simple JS editor\",\"datePublished\":\"2016-11-30T10:15:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/\"},\"wordCount\":675,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"articleSection\":[\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/\",\"name\":\"Writing a very simple JS editor - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"datePublished\":\"2016-11-30T10:15:31+00:00\",\"description\":\"There are nice web editors out there which are ready to be used: you just download them and plug them in your page. I have used myself both CodeMirror and\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Writing a very simple JS editor\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/4d63f143f3c969ad223bc081c0284951\",\"name\":\"Federico Tomassetti\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/10d3414571edf95f2255d57c9c02759daba20499f6761de9228c1cbbbd2fab6c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/10d3414571edf95f2255d57c9c02759daba20499f6761de9228c1cbbbd2fab6c?s=96&d=mm&r=g\",\"caption\":\"Federico Tomassetti\"},\"description\":\"Federico has a PhD in Polyglot Software Development. He is fascinated by all forms of software development with a focus on Model-Driven Development and Domain Specific Languages.\",\"sameAs\":[\"http:\/\/tomassetti.me\/\",\"https:\/\/fr.linkedin.com\/in\/federicotomassetti\",\"https:\/\/x.com\/raindancer\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/federico-tomassetti\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Writing a very simple JS editor - Web Code Geeks - 2026","description":"There are nice web editors out there which are ready to be used: you just download them and plug them in your page. I have used myself both CodeMirror and","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/","og_locale":"en_US","og_type":"article","og_title":"Writing a very simple JS editor - Web Code Geeks - 2026","og_description":"There are nice web editors out there which are ready to be used: you just download them and plug them in your page. I have used myself both CodeMirror and","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2016-11-30T10:15:31+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","type":"image\/jpeg"}],"author":"Federico Tomassetti","twitter_card":"summary_large_image","twitter_creator":"@raindancer","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Federico Tomassetti","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/"},"author":{"name":"Federico Tomassetti","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/4d63f143f3c969ad223bc081c0284951"},"headline":"Writing a very simple JS editor","datePublished":"2016-11-30T10:15:31+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/"},"wordCount":675,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","articleSection":["JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/","name":"Writing a very simple JS editor - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","datePublished":"2016-11-30T10:15:31+00:00","description":"There are nice web editors out there which are ready to be used: you just download them and plug them in your page. I have used myself both CodeMirror and","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/js-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/writing-simple-js-editor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Writing a very simple JS editor"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/4d63f143f3c969ad223bc081c0284951","name":"Federico Tomassetti","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/10d3414571edf95f2255d57c9c02759daba20499f6761de9228c1cbbbd2fab6c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/10d3414571edf95f2255d57c9c02759daba20499f6761de9228c1cbbbd2fab6c?s=96&d=mm&r=g","caption":"Federico Tomassetti"},"description":"Federico has a PhD in Polyglot Software Development. He is fascinated by all forms of software development with a focus on Model-Driven Development and Domain Specific Languages.","sameAs":["http:\/\/tomassetti.me\/","https:\/\/fr.linkedin.com\/in\/federicotomassetti","https:\/\/x.com\/raindancer"],"url":"https:\/\/www.webcodegeeks.com\/author\/federico-tomassetti\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/15341","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/149"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=15341"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/15341\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/920"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=15341"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=15341"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=15341"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}