{"action":"created","issue":{"url":"https://api.github.com/repos/artf/grapesjs/issues/135","repository_url":"https://api.github.com/repos/artf/grapesjs","labels_url":"https://api.github.com/repos/artf/grapesjs/issues/135/labels{/name}","comments_url":"https://api.github.com/repos/artf/grapesjs/issues/135/comments","events_url":"https://api.github.com/repos/artf/grapesjs/issues/135/events","html_url":"https://github.com/artf/grapesjs/issues/135","id":240060007,"number":135,"title":"Form Elements are not available in Github project. But available in online demo.","user":{"login":"fzs1994","id":10684213,"avatar_url":"https://avatars1.githubusercontent.com/u/10684213?v=3","gravatar_id":"","url":"https://api.github.com/users/fzs1994","html_url":"https://github.com/fzs1994","followers_url":"https://api.github.com/users/fzs1994/followers","following_url":"https://api.github.com/users/fzs1994/following{/other_user}","gists_url":"https://api.github.com/users/fzs1994/gists{/gist_id}","starred_url":"https://api.github.com/users/fzs1994/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/fzs1994/subscriptions","organizations_url":"https://api.github.com/users/fzs1994/orgs","repos_url":"https://api.github.com/users/fzs1994/repos","events_url":"https://api.github.com/users/fzs1994/events{/privacy}","received_events_url":"https://api.github.com/users/fzs1994/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2017-07-03T03:36:56Z","updated_at":"2017-07-04T05:24:56Z","closed_at":"2017-07-03T06:08:40Z","body":""},"comment":{"url":"https://api.github.com/repos/artf/grapesjs/issues/comments/312783225","html_url":"https://github.com/artf/grapesjs/issues/135#issuecomment-312783225","issue_url":"https://api.github.com/repos/artf/grapesjs/issues/135","id":312783225,"user":{"login":"saiaungpyae","id":22905877,"avatar_url":"https://avatars0.githubusercontent.com/u/22905877?v=3","gravatar_id":"","url":"https://api.github.com/users/saiaungpyae","html_url":"https://github.com/saiaungpyae","followers_url":"https://api.github.com/users/saiaungpyae/followers","following_url":"https://api.github.com/users/saiaungpyae/following{/other_user}","gists_url":"https://api.github.com/users/saiaungpyae/gists{/gist_id}","starred_url":"https://api.github.com/users/saiaungpyae/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/saiaungpyae/subscriptions","organizations_url":"https://api.github.com/users/saiaungpyae/orgs","repos_url":"https://api.github.com/users/saiaungpyae/repos","events_url":"https://api.github.com/users/saiaungpyae/events{/privacy}","received_events_url":"https://api.github.com/users/saiaungpyae/received_events","type":"User","site_admin":false},"created_at":"2017-07-04T05:24:56Z","updated_at":"2017-07-04T05:24:56Z","body":"Hello @gkumarOB \r\nYou can simply add components ( or blocks, Commands, ... ) in your own plugin.\r\n\r\nHere is my sample-form-plugin ( copy paste from form plugin :D )  which adds form elements using BlockManager. \r\n\r\n{\r\ngrapesjs.plugins.add('sample-form-plugin', function(editor, options){\r\n  var blockManager = editor.BlockManager;\r\n  blockManager.add(\"form\", {\r\n                label: '\\n      <svg class=\"gjs-block-svg\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\\n        <path class=\"gjs-block-svg-path\" d=\"M22,5.5 C22,5.2 21.5,5 20.75,5 L3.25,5 C2.5,5 2,5.2 2,5.5 L2,8.5 C2,8.8 2.5,9 3.25,9 L20.75,9 C21.5,9 22,8.8 22,8.5 L22,5.5 Z M21,8 L3,8 L3,6 L21,6 L21,8 Z\" fill-rule=\"nonzero\"></path>\\n        <path class=\"gjs-block-svg-path\" d=\"M22,10.5 C22,10.2 21.5,10 20.75,10 L3.25,10 C2.5,10 2,10.2 2,10.5 L2,13.5 C2,13.8 2.5,14 3.25,14 L20.75,14 C21.5,14 22,13.8 22,13.5 L22,10.5 Z M21,13 L3,13 L3,11 L21,11 L21,13 Z\" fill-rule=\"nonzero\"></path>\\n        <rect class=\"gjs-block-svg-path\" x=\"2\" y=\"15\" width=\"10\" height=\"3\" rx=\"0.5\"></rect>\\n      </svg>\\n      <div class=\"gjs-block-label\">Form</div>',\r\n                category: \"Forms\",\r\n                content: '\\n        <form class=\"form\">\\n          <div class=\"form-group\">\\n            <label class=\"label\">Name</label>\\n            <input placeholder=\"Type here your name\" class=\"input\"/>\\n          </div>\\n          <div class=\"form-group\">\\n            <label class=\"label\">Email</label>\\n            <input type=\"email\" placeholder=\"Type here your email\" class=\"input\"/>\\n          </div>\\n          <div class=\"form-group\">\\n            <label class=\"label\">Gender</label>\\n            <input type=\"checkbox\" class=\"checkbox\" value=\"M\">\\n            <label class=\"checkbox-label\">M</label>\\n            <input type=\"checkbox\" class=\"checkbox\" value=\"F\">\\n            <label class=\"checkbox-label\">F</label>\\n          </div>\\n          <div class=\"form-group\">\\n            <label class=\"label\">Message</label>\\n            <textarea class=\"textarea\"></textarea>\\n          </div>\\n          <div class=\"form-group\">\\n            <button type=\"submit\" class=\"button\">Send</button>\\n          </div>\\n        </form>\\n      '\r\n  });\r\n  blockManager.add(\"input\", {\r\n                label: '\\n      <svg class=\"gjs-block-svg\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\\n        <path class=\"gjs-block-svg-path\" d=\"M22,9 C22,8.4 21.5,8 20.75,8 L3.25,8 C2.5,8 2,8.4 2,9 L2,15 C2,15.6 2.5,16 3.25,16 L20.75,16 C21.5,16 22,15.6 22,15 L22,9 Z M21,15 L3,15 L3,9 L21,9 L21,15 Z\"></path>\\n        <polygon class=\"gjs-block-svg-path\" points=\"4 10 5 10 5 14 4 14\"></polygon>\\n      </svg>\\n      <div class=\"gjs-block-label\">' + \"Input\" + \"</div>\",\r\n                category: \"Forms\",\r\n                content: '<input class=\"input\"/>'\r\n  });\r\n});\r\n}\r\n\r\nHow to add blocks => https://github.com/artf/grapesjs/wiki/Blocks\r\n"}}
{"actor":{"display_login":"saiaungpyae"}}