{"id":19177,"date":"2017-11-29T16:15:27","date_gmt":"2017-11-29T14:15:27","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=19177"},"modified":"2017-12-19T12:55:21","modified_gmt":"2017-12-19T10:55:21","slug":"html5-text-editor-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/","title":{"rendered":"HTML5 Text Editor Example"},"content":{"rendered":"

In this post, we will take a look at the implementation of an In-browser text editor. The editor will provide basic editing functionality like making the text bold, italic, underline, strikeout and indentation, alignment of blocks of text. A text editor provides useful functionality that can be leveraged in blog comments section apart from other kinds of websites.<\/p>\n

1. Introduction<\/h2>\n

We will be using the contenteditable<\/code> attribute along with execCommand<\/code> method of the document<\/code> object. So, let’s get started.
\n 
\n 
\n[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n

2. Tools & Technologies<\/h2>\n
    \n
  1. HTML5<\/li>\n
  2. CSS3<\/li>\n
  3. JavaScript<\/li>\n
  4. Nodejs v6.3.0<\/a><\/li>\n
  5. Express<\/a><\/li>\n
  6. Visual Studio Code IDE<\/a><\/li>\n<\/ol>\n

    NodeJS, in essence, is JavaScript on the server-side. The Express module is used to create a barebones server to serve files and resources to the browser. I have used the Visual Studio Code IDE since I am the most familiar with it although you could others as per preference.<\/p>\n

    3. Project Layout<\/h2>\n

    The layout of our project is as shown in the screen grab below:<\/p>\n

    \"\"<\/a>
    Project Layout<\/figcaption><\/figure>\n

    CSS Folder<\/em><\/strong>
    \nThis folder hosts our CSS files, namely, html5.accordion.example.css<\/code>. We stylize our UI with classes in this file.
    \nJS Folder<\/em><\/strong>
    \nOur client side JavaScript files reside here. These are referenced in our HTML page(s).
    \nindex.js<\/em><\/strong>
    \nI have used NodeJS and Express module to spin up a barebones Web Server for this example.
    \nindex.html<\/em><\/strong>
    \nThis is our Markup file, it hosts the UI of this example.<\/p>\n

    4. Implementation<\/h2>\n

    To implement our editor we will proceed as in the steps listed below:<\/p>\n

    4.1. HTML Markup<\/h3>\n

    We add a series of buttons, sort of like a toolbar, with each being responsible for one feature. Like a button with text “bold” to make any text selection bold and so on and so forth. The HTML markup for the same looks like below:<\/p>\n

    index.html<\/em><\/span><\/p>\n

    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n    <head>\r\n        <meta charset=\"utf-8\">\r\n        <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\r\n        <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\r\n<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->\r\n        <title>WCG -- HTML5 Text Editor Example<\/title>\r\n\r\n        <link rel=\"stylesheet\" href=\"css\/html5.text.editor.css\" \/>\r\n\r\n<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->\r\n<!-- WARNING: Respond.js doesn't work if you view the page via file:\/\/ -->\r\n<!--[if lt IE 9]>\r\n<script src=\"https:\/\/oss.maxcdn.com\/html5shiv\/3.7.3\/html5shiv.min.js\"><\/script>\r\n<script src=\"https:\/\/oss.maxcdn.com\/respond\/1.4.2\/respond.min.js\"><\/script>\r\n<![endif]-->\r\n    <\/head>\r\n    <body>\r\n        <h1>WCG -- HTML5 Text Editor Example<\/h1>\r\n        <div>\r\n            <button id=\"btnBold\" >Bold<\/button>\r\n            <button id=\"btnItalic\" >Italic<\/button>\r\n            <button id=\"btnUnderline\" >Underline<\/button>\r\n            <button id=\"btnStrike\" >Strike Through<\/button>\r\n            <button id=\"btnSubscript\" >Subscript<\/button>\r\n            <button id=\"btnSuperscript\" >Superscript<\/button>\r\n            <button id=\"btnRemoveFormat\" >Remove Format<\/button>\r\n        <\/div>\r\n        <div>\r\n            <button id=\"btnCenter\" >Justify Center<\/button>\r\n            <button id=\"btnRight\" >Justify Right<\/button>\r\n            <button id=\"btnLeft\" >Justify Left<\/button>\r\n            <button id=\"btnIndent\" >Indent<\/button>\r\n            <button id=\"btnOutdent\" >Outdent<\/button>\r\n        <\/div>\r\n        <div id=\"editor\" contenteditable=\"true\" spellcheck=\"false\" >\r\n        <\/div>\r\n\r\n        <script type=\"text\/javascript\" src=\"js\/html5.text.editor.js\"><\/script>\r\n    <\/body>\r\n<\/html>\r\n<\/pre>\n
    Below our toolbar we add a div<\/code> where the user is able to type and edit text. To make the div<\/code> editable we decorate it with the contenteditable=\"true\"<\/code> attribute.<\/p>\n
    4.2. CSS Rules<\/h3>\n
    We setup CSS rules to style our text editor and to set the height<\/code>, width <\/code> and a border<\/code> around it. We also make the display of the editor div<\/code> as block<\/code>. Our CSS file should look like below:<\/p>\n
    html5.text.editor.css<\/em><\/span><\/p>\n
    #editor{\r\n    width: 50%;\r\n    height: 400px;\r\n    display: block;\r\n    border: 2px solid lightblue;\r\n    margin-top: 4px;\r\n}\r\n<\/pre>\n
    4.3. JavaScript<\/h3>\n
    To make our editor tick we handle the mousedown<\/code> events of each of our toolbar button. In the event handler we pass the appropriate parameters to the execCommand()<\/code> method of the document<\/code> object. Our JavaScript code looks like below:<\/p>\n
    html5.text.editor.js<\/em><\/span><\/p>\n
    var btnBold = document.getElementById(\"btnBold\");\r\nvar btnItalic = document.getElementById(\"btnItalic\");\r\nvar btnUnderline = document.getElementById(\"btnUnderline\");\r\nvar btnStrike = document.getElementById(\"btnStrike\");\r\nvar btnSubscript = document.getElementById(\"btnSubscript\");\r\nvar btnRemoveFormat = document.getElementById(\"btnRemoveFormat\");\r\nvar btnSuperscript = document.getElementById(\"btnSuperscript\");\r\nvar btnCenter = document.getElementById(\"btnCenter\");\r\nvar btnRight = document.getElementById(\"btnRight\");\r\nvar btnLeft = document.getElementById(\"btnLeft\");\r\nvar btnIndent = document.getElementById(\"btnIndent\");\r\nvar btnOutdent = document.getElementById('btnOutdent');\r\nbtnOutdent.addEventListener('mousedown', function(event){\r\n    document.execCommand(\"outdent\")\r\n    event.preventDefault();\r\n});\r\nbtnIndent.addEventListener(\"mousedown\", function(event){\r\n    document.execCommand(\"indent\");\r\n    event.preventDefault();\r\n});\r\nbtnLeft.addEventListener(\"mousedown\", function(event){\r\n    document.execCommand(\"justifyLeft\");\r\n    event.preventDefault();\r\n});\r\nbtnRight.addEventListener(\"mousedown\", function(event){\r\n    document.execCommand(\"justifyRight\");\r\n    event.preventDefault();\r\n});\r\nbtnCenter.addEventListener('mousedown', function(event){\r\n    document.execCommand(\"justifyCenter\");\r\n    event.preventDefault();\r\n});\r\nbtnSuperscript.addEventListener(\"mousedown\", function(event){\r\n    \r\n    document.execCommand(\"superscript\");\r\n    event.preventDefault();\r\n    \r\n});\r\nbtnRemoveFormat.addEventListener(\"mousedown\", function(event){\r\n    \r\n    document.execCommand(\"removeFormat\");\r\n    event.preventDefault();\r\n    \r\n});\r\nbtnSubscript.addEventListener(\"mousedown\", function(event){\r\n    \r\n    document.execCommand(\"subscript\");\r\n    event.preventDefault();\r\n    \r\n});\r\nbtnStrike.addEventListener(\"mousedown\", function(event){\r\n    \r\n    document.execCommand(\"strikethrough\");\r\n    event.preventDefault();\r\n    \r\n});\r\nbtnBold.addEventListener(\"mousedown\", function(event){\r\n    \r\n    document.execCommand(\"bold\");\r\n    event.preventDefault();\r\n\r\n});\r\nbtnItalic.addEventListener(\"mousedown\", function(event){\r\n    \r\n    document.execCommand(\"italic\");\r\n    event.preventDefault();\r\n    \r\n});\r\nbtnUnderline.addEventListener(\"mousedown\", function(event){\r\n    \r\n    document.execCommand(\"underline\");\r\n    event.preventDefault();\r\n    \r\n});\r\n\r\n<\/pre>\n
    5. Running the Project<\/h2>\n
    Now that we have everything setup let us go ahead and run the project and look at the output. Firstly, we need to run the following commands at the root of the project.<\/p>\n
    >npm install\r\n<\/pre>\n
    and<\/p>\n
    >node index.js\r\n<\/pre>\n
    Now we need to navigate to the URL http:\/\/localhost:8090\/index.html<\/code>, We should see the below screen:<\/p>\n
    \"\"<\/a>
    Screen Layout<\/figcaption><\/figure>\n
    6. Download the Source Code<\/h2>\n
    That wraps up our look at building an In-browser text editor.<\/p>\n
    Download<\/strong>
    \nYou can download the full source code of this example here :     WCG — HTML5 Text Editor Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
    In this post, we will take a look at the implementation of an In-browser text editor. The editor will provide basic editing functionality like making the text bold, italic, underline, strikeout and indentation, alignment of blocks of text. A text editor provides useful functionality that can be leveraged in blog comments section apart from other …<\/p>\n","protected":false},"author":213,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[58],"class_list":["post-19177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5","tag-html5-2"],"yoast_head":"\nHTML5 Text Editor Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this post, we will take a look at the implementation of an In-browser text editor. The editor will provide basic editing functionality like making the\" \/>\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\/html5\/html5-text-editor-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Text Editor Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this post, we will take a look at the implementation of an In-browser text editor. The editor will provide basic editing functionality like making the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/\" \/>\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=\"2017-11-29T14:15:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T10:55:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-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=\"Siddharth Seth\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Siddharth Seth\" \/>\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\/html5\/html5-text-editor-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/\"},\"author\":{\"name\":\"Siddharth Seth\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592\"},\"headline\":\"HTML5 Text Editor Example\",\"datePublished\":\"2017-11-29T14:15:27+00:00\",\"dateModified\":\"2017-12-19T10:55:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/\"},\"wordCount\":502,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"keywords\":[\"html5\"],\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/\",\"name\":\"HTML5 Text Editor Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2017-11-29T14:15:27+00:00\",\"dateModified\":\"2017-12-19T10:55:21+00:00\",\"description\":\"In this post, we will take a look at the implementation of an In-browser text editor. The editor will provide basic editing functionality like making the\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Text Editor Example\"}]},{\"@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\/9c939eb4c915443c7e493c813d979592\",\"name\":\"Siddharth Seth\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g\",\"caption\":\"Siddharth Seth\"},\"description\":\"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.\",\"sameAs\":[\"https:\/\/www.webcodegeeks.com\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Text Editor Example - Web Code Geeks - 2026","description":"In this post, we will take a look at the implementation of an In-browser text editor. The editor will provide basic editing functionality like making the","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\/html5\/html5-text-editor-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Text Editor Example - Web Code Geeks - 2026","og_description":"In this post, we will take a look at the implementation of an In-browser text editor. The editor will provide basic editing functionality like making the","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2017-11-29T14:15:27+00:00","article_modified_time":"2017-12-19T10:55:21+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Siddharth Seth","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Siddharth Seth","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/"},"author":{"name":"Siddharth Seth","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/9c939eb4c915443c7e493c813d979592"},"headline":"HTML5 Text Editor Example","datePublished":"2017-11-29T14:15:27+00:00","dateModified":"2017-12-19T10:55:21+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/"},"wordCount":502,"commentCount":1,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","keywords":["html5"],"articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/","name":"HTML5 Text Editor Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2017-11-29T14:15:27+00:00","dateModified":"2017-12-19T10:55:21+00:00","description":"In this post, we will take a look at the implementation of an In-browser text editor. The editor will provide basic editing functionality like making the","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-text-editor-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Text Editor Example"}]},{"@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\/9c939eb4c915443c7e493c813d979592","name":"Siddharth Seth","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86a5133a5e9d79f7997e2649b1afe58e895c0d88df47b3359103ec4c1a2077d6?s=96&d=mm&r=g","caption":"Siddharth Seth"},"description":"Siddharth is a Software Development Professional with a Master degree in Computer Applications from IGNOU. He has over 14 years of experience. And currently focused on Software Architecture, Cloud Computing, JavaScript Frameworks for Client and Server, Business Intelligence.","sameAs":["https:\/\/www.webcodegeeks.com"],"url":"https:\/\/www.webcodegeeks.com\/author\/siddharth-seth\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19177","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\/213"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=19177"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/19177\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=19177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=19177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=19177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}