vite 怎么加quill-image-resize-module 插件

Question

vite 怎么加quill-image-resize-module 插件

Answer 1

• 这篇文章：vue 引入quill-image-resize-module 插件报错 也许有你想要的答案，你可以看看
• 除此之外, 这篇博客: vue中使用quill富文本编辑器及其拓展插件中的 二、在页面中使用 quill 及其插件：quill-image-drop-module、quill-image-resize-module 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• //myQuill.vue
  
  <div id="quillEditor"></div>
  
  
  ---------------------------------------------------------------------------------------------------------------------------------
  
  
  
  //myQuill.js
  
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import * as Quill from 'quill'  //引入编辑器
  
  
  //quill图片可拖拽上传,可复制粘贴
  import { ImageDrop } from 'quill-image-drop-module';
  Quill.register('modules/imageDrop', ImageDrop);
  
  //quill图片可拖拽改变大小
  import ImageResize from 'quill-image-resize-module';
  Quill.register('modules/imageResize', ImageResize);
  
  
  //为quill添加字体（需要增加一个对应的font.css文件，并在项目的main.js文件中引入进而生效）
  var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif'];
  var Font = Quill.import('formats/font');
  Font.whitelist = fonts; //将字体加入到白名单 
  Quill.register(Font, true);
  
  export default {
      data(){
          return {
              quillObj:null,
              quillOption:{
                  modules: {
                      imageDrop: true,
                      imageResize: {
                          displayStyles: {
                              backgroundColor: 'black',
                              border: 'none',
                              color: 'white'
                          },
                          modules: ['Resize', 'DisplaySize', 'Toolbar']
                      },
                      toolbar: [
                          ['bold', 'italic', 'underline', 'strike'],          //加粗，斜体，下划线，删除线
                          [{ 'size': ['small', false, 'large', 'huge'] }],    // 字体大小
                          [{ 'header': [1, 2, 3, 4, 5, 6, false] }],          //几级标题
                          [{ 'color': [] }, { 'background': [] }],            // 字体颜色，字体背景颜色
                          [{ 'font': fonts }], //引入上方的自定义字体
                          [{ 'align': [] }],                                  //对齐方式
                          [{ 'indent': '-1' }, { 'indent': '+1' }],           // 缩进
                          [{ 'list': 'ordered' }, { 'list': 'bullet' }],      //列表
                          [{ 'script': 'sub' }, { 'script': 'super' }],       // 上下标
                          ['blockquote', 'code-block'],                       //引用，代码块
                          ['clean'],                                          //清除字体样式
                          ['image', 'video']                                  //上传图片、上传视频
                      ]
                  },
                  theme: 'snow'
              }
          }
      },
      mounted() {
          this.initQuill();
      },
      beforeDestroy() {
          this.quillObj = null
          delete this.quillObj
      }, 
      methods: {
          //初始化quill编辑器
          initQuill() {
              this.quillObj = new Quill('#quillEditor', this.quillOption);
          },
          //获取编辑的html内容
          getQuillHtmlText() {
              let text = this.quillObj.container.firstChild.innerHTML;
              console.log('quill text =====>>>', text);
          }
      }
  }

• 以下回答由chatgpt基于相关博客总结生成:

  根据参考资料提供的代码，可以尝试以下步骤来在Vite项目中添加quill-image-resize-module插件:

  1. 在项目中安装相关依赖: 打开终端，进入项目目录，执行以下命令: npm install quill npm install quill-image-drop-module npm install quill-image-resize-module

  2. 创建一个名为MyQuill.vue的文件，并在该文件中编写以下代码: ```html
  <script></script>

  ```

  1. 在你的项目中的任何需要使用quill的地方，可以引入MyQuill.vue组件，并加入以下代码: ```html
  <script></script>

  ```

  这样，在Vite项目中就可以成功引入并配置quill-image-resize-module插件了。请确保你的Vite项目依赖已经正确安装，并按照以上步骤进行配置。