调整Angular 2 Quill模块的quill图像大小

Question

我正在尝试为ngx-quill使用quill-image-resize-module。我已经安装了ngx-quill，它工作得很好。现在我需要在编辑器中调整图像的大小，所以我尝试使用它。我在这里找到的quill-image-resize-module

问题是它是用JavaScript编写的，我试图在typescript文件(在组件中)中使用它，所以我得到了一个编译器错误。

正如他们所说的，我必须导入并注册ImageResize模块，但我在导入时遇到了编译器错误。

有没有人可以帮助我使用这个模块。

谢谢

Answer 1

正如在GitHub中提到的那样，issue -issue-resize-module不能与angular 6一起工作。相反，请使用https://github.com/Fandom-OSS/quill-blot-formatter。首先，通过npm安装此模块

npm install --save quill-blot-formatter

然后在你的组件中-

    import Quill from 'quill';

    // from the index, which exports a lot of useful modules
    import BlotFormatter from 'quill-blot-formatter';

    // or, from each individual module
    import BlotFormatter from 'quill-blot-formatter/dist/BlotFormatter';

    Quill.register('modules/blotFormatter', BlotFormatter);

modules = {
    toolbar: {
      container:  [
        ['bold', 'italic', 'underline'],        // toggled buttons
        ['link', 'image', 'video']  ,           // link and image, video
      ],  // Selector for toolbar container
    },
    blotFormatter: {
      // empty object for default behaviour.
    }
    
  }

我使用angular@7.2.5、angular-cli@7.3.2和ngx-quill@4.6.11实现了这一点

Answer 2

您好，我想知道如何使此工作，首先，请确保您已安装此模块

npm install quill --save
npm install quill-image-resize-module --save

然后在angular.json中添加这个

    "scripts": [
        ...,
        "../node_modules/quill/dist/quill.min.js"
    ]

然后在您的component.ts导入羽毛笔中以这种方式

import * as QuillNamespace from 'quill';
let Quill: any = QuillNamespace;
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);

this.editor_modules = {
      toolbar: {
        container: [
          [{ 'font': [] }],
          [{ 'size': ['small', false, 'large', 'huge'] }],
          ['bold', 'italic', 'underline', 'strike'],
          [{ 'header': 1 }, { 'header': 2 }],
          [{ 'color': [] }, { 'background': [] }],
          [{ 'list': 'ordered' }, { 'list': 'bullet' }],
          [{ 'align': [] }],
          ['link', 'image']
        ]
      },
      imageResize: true
    };

以这种方式导入quill-image-resize-module将100%工作，顺便说一下，我使用的是Angular 7。如果你有任何问题，请随时向他们提问，我会尽力帮助你。

Answer 3

首先，不能将Image-resize与angular-cli一起使用。你必须从你的angular-cli中弹出web pack。

使用ng eject创建webpack.config.js文件

在webpack.config.js文件内部，在顶部的某处粘贴

const webpack = require('webpack')

检查插件数组，在末尾添加

new webpack.ProvidePlugin({
  'window.Quill': 'quill/dist/quill.js'
})

不要忘记将以下内容添加到index.html文件中

<link href="https://fonts.googleapis.com/css?family=Aref+Ruqaa|Mirza|Roboto" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha1/katex.min.css" integrity="sha384-8QOKbPtTFvh/lMY0qPVbXj9hDh+v8US0pD//FcoYFst2lCIf0BmT58+Heqj0IGyx" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.9.0-alpha1/katex.min.js" integrity="sha384-GR8SEkOO1rBN/jnOcQDFcFmwXAevSLx7/Io9Ps1rkxWp983ZIuUGfxivlF/5f5eJ" crossorigin="anonymous"></script>

否则，调整图像大小的小部件将无法工作。

refer to killerCodeMonkey's example

很抱歉，我现在不能给你提供活塞环或其他东西。