How can i add browse option for image upload and also resize image once user selects the image

[srishti-sqm]

I am using vue-ckeditor2 and I want to upload image from local machine and resize it, I have downloaded plugings but where to place them and how vue-ckeditor2 node module will use that

[dangvanthanh]

Hi @srishti-sqm

What is plugin of ckeditor, you use?

[srishti-sqm]

I have used uploadImage and uploadWidget plugin , I have added the plugings and wrote in the config like this : config :{ toolbar : [ { name: 'colors', items: [ 'TextColor'] }, { name: 'styles', items: [ 'FontSize' ] }, { name: 'editing', items: [ ] }, { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike','Underline',] }, { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'Outdent', 'Indent', '-', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-',] }, { name: 'links', items: [ 'Link' ] }, { name: 'clipboard', items: [ 'Cut']}, { name: 'insert', items: [ 'Image'] }, { name: 'clipboard', items: [ 'Undo', 'Redo' ] }, ] , extraPlugins : ['uploadImage' , 'uploadWidget'], height: 115, } But I don't know how vue-ckeditor will use this plugins as its a node module , so where I need to add this plugin. <vue-ckeditor id="editor2" :config='config' v-model="createInviteObj. message_body_additional"></vue-ckeditor>

…

On Fri, Aug 2, 2019 at 2:49 PM Dang Van Thanh ***@***.***> wrote: Hi @srishti-sqm <https://github.com/srishti-sqm> What is plugin of ckeditor, you use? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#96?email_source=notifications&email_token=AJCGVEVSAJAZ2IP2B7NV46TQCP32XA5CNFSM4II2VIXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3NGHHI#issuecomment-517628829>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJCGVESDAPY42W7CUT3DYHLQCP32XANCNFSM4II2VIXA> .

--

[srishti-sqm]

I have added the plugin in ckeditor/plugins folder and given the path of that file in index.html using script tag. But now I am getting this error : Cannot read property 'icons' of null at CKEDITOR.resourceManager.<anonymous> (ckeditor.js:269) On Fri, Aug 2, 2019 at 2:53 PM Srishti Singhal < srishti.singhal@squintmetrics.com> wrote:

…

I have used uploadImage and uploadWidget plugin , I have added the plugings and wrote in the config like this : config :{ toolbar : [ { name: 'colors', items: [ 'TextColor'] }, { name: 'styles', items: [ 'FontSize' ] }, { name: 'editing', items: [ ] }, { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike','Underline',] }, { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'Outdent', 'Indent', '-', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-',] }, { name: 'links', items: [ 'Link' ] }, { name: 'clipboard', items: [ 'Cut']}, { name: 'insert', items: [ 'Image'] }, { name: 'clipboard', items: [ 'Undo', 'Redo' ] }, ] , extraPlugins : ['uploadImage' , 'uploadWidget'], height: 115, } But I don't know how vue-ckeditor will use this plugins as its a node module , so where I need to add this plugin. <vue-ckeditor id="editor2" :config='config' v-model="createInviteObj. message_body_additional"></vue-ckeditor> On Fri, Aug 2, 2019 at 2:49 PM Dang Van Thanh ***@***.***> wrote: > Hi @srishti-sqm <https://github.com/srishti-sqm> > > What is plugin of ckeditor, you use? > > — > You are receiving this because you were mentioned. > Reply to this email directly, view it on GitHub > <#96?email_source=notifications&email_token=AJCGVEVSAJAZ2IP2B7NV46TQCP32XA5CNFSM4II2VIXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3NGHHI#issuecomment-517628829>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AJCGVESDAPY42W7CUT3DYHLQCP32XANCNFSM4II2VIXA> > . >

--

[dangvanthanh]

With Ckeditor4 doesn't support such as modules.

You can add normal with folder and path such as:

ckeditor4
  |- plugins
    |- image
    |- uploadwidget
  |- ckeditor.js

Then you insert in html file

<script src="/path/to/ckeditor/ckeditor.js"></script>

and use with vue-ckeditor2 such as your code.

[srishti-sqm]

I have done exactly the same way. But I am getting the below error in console : TypeError: Cannot read property 'icons' of null at CKEDITOR.resourceManager (ckeditor.js:269)

…

On Fri, Aug 2, 2019 at 3:16 PM Dang Van Thanh ***@***.***> wrote: With Ckeditor4 doesn't support such as modules. You can add normal with folder and path such as: ckeditor4 |- plugins |- image |- uploadwidget |- ckeditor.js Then you insert in html file <script src="/path/to/ckeditor/ckeditor.js"></script> and use with vue-ckeditor2 such as your code. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#96?email_source=notifications&email_token=AJCGVEXX5PZOBVS7XFBMW2DQCP66XA5CNFSM4II2VIXKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD3NINYI#issuecomment-517637857>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJCGVEQ2MWFSYU6W5HSYUNDQCP66XANCNFSM4II2VIXA> .

--

[dangvanthanh]

Can you send me example code. I will investigate and fix for you.

[srishti-sqm]

ckeditor.zip

Code for vue file :

<script> import VueCkeditor from 'vue-ckeditor2'; export default { components: { VueCkeditor }, data() { return { content: '', config :{ toolbar : [ { name: 'colors', items: [ 'TextColor'] }, { name: 'styles', items: [ 'FontSize' ] }, { name: 'editing', items: [ ] }, { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Strike','Underline',] }, { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', 'Outdent', 'Indent', '-', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-',] }, { name: 'links', items: [ 'Link' ] }, { name: 'clipboard', items: [ 'Cut']}, { name: 'insert', items: [ 'Image'] }, { name: 'clipboard', items: [ 'Undo', 'Redo' ] }, { name: 'uploadImage', items: [ 'uploadImage' ] }, { name: 'uploadWidget', items: [ 'uploadWidget' ] } ] , extraPlugins : ['uploadImage' , 'uploadWidget'], // imageUploadUrl :'/uploader/upload.php?type=Images', height: 115, } }; }, methods: { onBlur(evt) { console.log(evt); }, onFocus(evt) { console.log(evt); }, onContentDom(evt) { console.log(evt); }, onDialogDefinition(evt) { console.log(evt); }, onFileUploadRequest(evt) { console.log(evt); }, onFileUploadResponse(evt) { console.log(evt); } } }; </script>

[srishti-sqm]

This error got resolved, can you please tell me what I need to edit in the config so that browse or upload options come for image upload?

[dangvanthanh]

Hi @srishti-sqm

I will investigate your issues.

Besides, you can see demo use upload image with easyimage plugin in https://vue-ckeditor2.surge.sh/classic/