Vue CLI 3 . image responsive module

[volkanciloglu]

please any module add can you given example for vue cli 3.

[volkanciloglu]

1 - npm install vue-quill-editor 2 - maint ts ;

import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor);

3 - this fine working without modules

I'm trying to install image resize module

1 - npm install quill-image-resize-module github

2 - main ts change

• import Quill from 'quill';
• import resizeImage from 'quill-image-resize-module/image-resize.min.js'
• Quill.register('modules/resizeImage', resizeImage)

import VueQuillEditor from 'vue-quill-editor' import 'quill/dist/quill.core.css' import 'quill/dist/quill.snow.css' import 'quill/dist/quill.bubble.css' Vue.use(VueQuillEditor);

3 - return console log "Uncaught TypeError: Cannot read property 'imports' of undefined"

[priteshkadiwala]

Okay so I was able to solve this problem for SPA apps by doing this:

1. You will have to make a new file called vue.config.js

2. Paste this code in there:

var webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      }),
    ]
  }
}

What this does is it helps Vue import quill and help register the Image resize module

3. Finally paste the code below in your component:

import Quill from 'quill'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

and in the options for quill, make the modules true as such:

editor_option: {
 modules: {
   imageDrop: true,
   imageResize: true,
 },
 theme: 'snow'
},

and voila! The image resize and drop should work.

[BruceZhangC]

Okay so I was able to solve this problem for SPA apps by doing this:

1. You will have to make a new file called vue.config.js
2. Paste this code in there:

var webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        'window.Quill': 'quill/dist/quill.js',
        'Quill': 'quill/dist/quill.js'
      }),
    ]
  }
}

What this does is it helps Vue import quill and help register the Image resize module

1. Finally paste the code below in your component:

import Quill from 'quill'
import { ImageDrop } from 'quill-image-drop-module'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageDrop', ImageDrop)
Quill.register('modules/imageResize', ImageResize)

and in the options for quill, make the modules true as such:

editor_option: {
 modules: {
   imageDrop: true,
   imageResize: true,
 },
 theme: 'snow'
},

and voila! The image resize and drop should work.

that help me a lot ,i finde this question for a few days . thanks

[ghost]

My problem is slightly different: I have everything installed and no errors in the console but image resize still isn't working... any ideas as to what might be causing that?

quillEditor.vue

import { quillEditor, Quill } from 'vue-quill-editor'
import ImageResize from 'quill-image-resize';

// Register ImageResize module
Quill.register('modules/imageResize', ImageResize);

 editorOption: {
      modules: {
         imageResize:   [{
  displayStyles: {
               backgroundColor: 'black',
                  border: 'none',
                  color: 'white'
              },
              modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            },
 }