{"id":194,"date":"2016-05-08T06:03:49","date_gmt":"2016-05-08T06:03:49","guid":{"rendered":"http:\/\/muthu.co\/?p=194"},"modified":"2021-01-02T14:06:02","modified_gmt":"2021-01-02T14:06:02","slug":"contenteditable-div-tag-directive","status":"publish","type":"post","link":"http:\/\/write.muthu.co\/contenteditable-div-tag-directive\/","title":{"rendered":"contenteditable DIV tag directive"},"content":{"rendered":"<p>Are you looking for a super simple WYSWYG editor and you don&#8217;t want to include any heavy library into your application. Then why not make your own using just a div. Take a look at the below directive.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"null\">myApp.directive(\"contenteditable\", function() {\r\n  return {\r\n    restrict: \"A\",\r\n    require: \"ngModel\",\r\n    link: function(scope, element, attrs, ngModel) {\r\n\r\n      function read() {\r\n        ngModel.$setViewValue(element.html());\r\n      }\r\n\r\n      ngModel.$render = function() {\r\n        element.html(ngModel.$viewValue || \"\");\r\n      };\r\n\r\n      element.bind(\"blur keyup change\", function() {\r\n        scope.$apply(read);\r\n      });\r\n    }\r\n  };\r\n});<\/pre>\n<p>To turn your\u00a0div into an editor all you \u00a0need is to add contenteditable attribute to your div.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">&lt;div contenteditable&gt;&lt;\/div&gt;<\/pre>\n<p data-height=\"400\" data-theme-id=\"dark\" data-slug-hash=\"LNqyeJ\" data-default-tab=\"js,result\" data-user=\"Muthukrishnan\" data-embed-version=\"2\" class=\"codepen\">See the editor live: <a href=\"http:\/\/codepen.io\/Muthukrishnan\/pen\/LNqyeJ\/\">Angular Directive for making simple WYSWYG Editor<\/a> by Muthukrishnan (<a href=\"http:\/\/codepen.io\/Muthukrishnan\">@Muthukrishnan<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p><script async src=\"\/\/assets.codepen.io\/assets\/embed\/ei.js\"><\/script> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Are you looking for a super simple WYSWYG editor and you don&#8217;t want to include any heavy library into your application. Then why not make your own using just a div. Take a look at the below directive. myApp.directive(&#8220;contenteditable&#8221;, function() { return { restrict: &#8220;A&#8221;, require: &#8220;ngModel&#8221;, link: function(scope, element, attrs, ngModel) { function read() [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,2],"tags":[45,52],"_links":{"self":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/194"}],"collection":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/comments?post=194"}],"version-history":[{"count":1,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/194\/revisions"}],"predecessor-version":[{"id":1653,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/posts\/194\/revisions\/1653"}],"wp:attachment":[{"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/media?parent=194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/categories?post=194"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/write.muthu.co\/wp-json\/wp\/v2\/tags?post=194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}