{"id":469,"date":"2021-04-06T17:50:28","date_gmt":"2021-04-06T20:50:28","guid":{"rendered":"https:\/\/garridom.cl\/?p=469"},"modified":"2021-04-06T17:50:28","modified_gmt":"2021-04-06T20:50:28","slug":"how-to-add-custom-plugins-to-ckeditor-using-vuejs","status":"publish","type":"post","link":"https:\/\/www.garridom.cl\/en\/2021\/04\/06\/how-to-add-custom-plugins-to-ckeditor-using-vuejs\/","title":{"rendered":"How to add custom plugins to ckeditor using vuejs"},"content":{"rendered":"\n

After a long time struggle with this i finally could writte a post explaining it<\/p>\n\n\n\n

for me was not easy to understand the documentation, but after a lot of catch and errors i could do<\/p>\n\n\n\n

we need to do two things<\/p>\n\n\n\n

first, we need to download or cloning the ckeditor, in my case ckeditor-4 and then we move into the \/dev folder and then into the \/builder folder and execute .\/build command to generate a locally version of ckeditor.<\/p>\n\n\n\n

now we copy the generated folder inside the \/release folder called \/ckeditor and put this on the \/public folder of our vue project.<\/p>\n\n\n\n

after that y put my plugins inside the \/plugins folder that is inside the \/ckeditor folder in our \/public folder.<\/p>\n\n\n\n

now, i can call this like<\/p>\n\n\n\n

<\/ckeditor><\/code><\/pre>\n\n\n\n
the var editorUrl<\/strong> have the path to the our ckeditor, in my case \/js\/ckeditor<\/strong> which are inside of \/public<\/strong> folder<\/p>\n\n\n\n
import CKEditor from 'ckeditor4-vue';\nexport default {\n  name: 'myComponent',\n  data () {\n    return {\n      editorConfig: {\n        extraPlugins: 'myplugin1, myplugin2',\n        toolbar: [ [ 'Bold', 'MyPlugin1', 'Italic', 'MyPlugin2' ] ]\n      },\n      editorUrl: '\/js\/ckeditor\/ckeditor.js'\n    }\n  },\n  ...,\n  components: {\n    ckeditor: CKEditor.component\n  },\n}<\/code><\/pre>\n\n\n\n
if we dont use the attribute editor-url and only add extraPlugins, the editor will try to find our plugins in his own CDN rather than our.<\/p>\n","protected":false},"excerpt":{"rendered":"
After a long time struggle with this i finally could writte a post explaining it for me was not easy to understand the documentation, but after a lot of catch and errors i could do we need to do two things first, we need to download or cloning the ckeditor, in my case ckeditor-4 and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[3,2,5,6],"class_list":["post-469","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-ckeditor-4","tag-ckeditor","tag-vue","tag-vuejs"],"_links":{"self":[{"href":"https:\/\/www.garridom.cl\/en\/wp-json\/wp\/v2\/posts\/469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.garridom.cl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garridom.cl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garridom.cl\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garridom.cl\/en\/wp-json\/wp\/v2\/comments?post=469"}],"version-history":[{"count":0,"href":"https:\/\/www.garridom.cl\/en\/wp-json\/wp\/v2\/posts\/469\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garridom.cl\/en\/wp-json\/wp\/v2\/media?parent=469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garridom.cl\/en\/wp-json\/wp\/v2\/categories?post=469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garridom.cl\/en\/wp-json\/wp\/v2\/tags?post=469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}