how to upload content of plugin to website?

[caiyawen]

I want to add a plugin of img upload,but i am confuse about the sentence 'upload content of plugin to website' at https://github.com/dangvanthanh/vue-ckeditor2/wiki/Toolbar. Is there someone could tell me the steps? thanks very much~

[huhongliang]

The button already exists,But it's hidden,Now I don't know where to configure

[dangvanthanh]

@huhongliang Can you show your code or your configure to display button. I will help you configure.

[heyluffy]

how to add a plugin of img upload, Is there someone could tell me the steps?

[LXHFIGHT]

how to add a plugin of youtube, Is there someone could tell me the steps?

[quangnhattran]

Hello Author, Can you help because I still can't add extraPlugin like 'image2'? Thanks :)

[dangvanthanh]

Hi @quangvision

I add guide to add extraPlugin like image2: https://github.com/dangvanthanh/vue-ckeditor2/wiki/Multiple-Plugins-with-extraPlugins and with demo in http://vue-ckeditor2.surge.sh/

[hpaicf]

@dangvanthanh hello, author, i want to add easy plugin (an upload image plugin easy plugin ) to my ckeditor, how can i do? is there an example ? thank you very much.

[dangvanthanh]

Hi @hpaicf

You can reference to intergrate easyimage to vue-ckeditor2

This is example I use Example.vue

<template>
  <div id="app" class="app">
    <vue-ckeditor v-model="multiplePlugins.content" :config="multiplePlugins.config" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      multiplePlugins: {
        content:`
          <p>Use multiple plugins image2 and autogrow and easyimage</p>
          <figure class="easyimage easyimage-full">
            <img alt="Three Monks walking on ancient temple." width="912" sizes="100vw" src="https://cdn.dribbble.com/users/458522/screenshots/4615441/attachments/1043210/deadpool_love_add.jpg" />
            <figcaption></figcaption>
          </figure>
        `,
        config: {
          toolbar: [
            ['Image']
          ],
          height: 200,
          extraPlugins: 'image2,autogrow,xml,ajax,cloudservices,balloonpanel,balloontoolbar,imagebase,easyimage',
          emovePlugins: 'image',
          cloudServices_tokenUrl: 'https://33372.cke-cs.com/token/dev/kquv5QAPjvSD8p7GYFSFa3uKP6OcikCtjcyDpqW1Aqy3eotwe2pPLVdAjJVu',
          cloudServices_uploadUrl: 'https://33372.cke-cs.com/easyimage/upload/',
          easyimage_styles: {
            gradient1: {
              group: 'easyimage-gradients',
              attributes: {
                  'class': 'easyimage-gradient-1'
              },
              label: 'Blue Gradient',
              icon: 'https://sdk.ckeditor.com/../samples/assets/easyimage/icons/gradient1.png',
              iconHiDpi: 'https://sdk.ckeditor.com/../samples/assets/easyimage/icons/hidpi/gradient1.png'
            },
            gradient2: {
              group: 'easyimage-gradients',
              attributes: {
                  'class': 'easyimage-gradient-2'
              },
              label: 'Pink Gradient',
              icon: 'https://sdk.ckeditor.com/../samples/assets/easyimage/icons/gradient2.png',
              iconHiDpi: 'https://sdk.ckeditor.com/../samples/assets/easyimage/icons/hidpi/gradient2.png'
            },
            noGradient: {
              group: 'easyimage-gradients',
              attributes: {
                  'class': 'easyimage-no-gradient'
              },
              label: 'No Gradient',
              icon: 'https://sdk.ckeditor.com/../samples/assets/easyimage/icons/nogradient.png',
              iconHiDpi: 'https://sdk.ckeditor.com/../samples/assets/easyimage/icons/hidpi/nogradient.png'
            }
          },
          easyimage_toolbar: ['EasyImageFull', 'EasyImageSide', 'EasyImageGradient1', 'EasyImageGradient2', 'EasyImageNoGradient', 'EasyImageAlt'],
          autoGrow_minHeight: 200,
          autoGrow_maxHeight: 600
        }
      }
    };
  }
};
</script>

<style scoped>
.ckeditor {
  font-size: 13px;
}
</style>

cloudServices_tokenUrl and cloudServices_uploadUrl you can found in Ckeditor Dashboard

You can see using easyimage plugin in demo with Multiple Plugins