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.

On Fri, Aug 2, 2019 at 2:49 PM Dang Van Thanh notifications@github.com 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 https://github.com/dangvanthanh/vue-ckeditor2/issues/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. (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.

On Fri, Aug 2, 2019 at 2:49 PM Dang Van Thanh notifications@github.com 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 https://github.com/dangvanthanh/vue-ckeditor2/issues/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 notifications@github.com 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

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 https://github.com/dangvanthanh/vue-ckeditor2/issues/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 :

[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/