Question

我正在尝试将ngill-image-resize-module用于ngx-quill。我已经安装了ngx-quill并且它工作正常。现在我需要在编辑器中调整图像大小，所以我试图使用它。我在quill-image-resize-module

找到了它

问题是它是用JavaScript编写的，我试图在typescript文件中使用它（在组件内部），所以我遇到了编译器错误。

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

任何人都可以帮我使用该模块。

由于

Answer 1

首先，你不能使用带有angular-cli的Image-resize。你必须从你的角度cli弹出网络包。

使用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

很抱歉，目前我无法为您提供吸引人的信息。

Answer 2

如github issue中所述羽毛笔图像调整大小模块不适用于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 3

嗨，我想出了如何使这项工作首先，请确保您已安装此模块

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

然后在angular.json中添加

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

然后在component.ts中以这种方式导入Quill

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 4

我正在使用angular / cli 6.0.0，羽毛图像调整大小3.0.9和羽毛图像调整大小模块3.0.0。

以下更改使其有效：

angular.json

"architect": {
            "build": {
                "builder": "@angular-builders/custom-webpack:browser",
                "options": {
                    "customWebpackConfig": {
                       "path": "./extra-webpack.config.js",
                       "replaceDuplicatePlugins": true
                    },
                    "styles": [
                        "node_modules/quill/dist/quill.core.css", 
                        "node_modules/quill/dist/quill.snow.css"
                    ],
                    "scripts": [
                        "./node_modules/quill/dist/quill.min.js"
                    ]

extra-webpack.config.js

var webpack = require("webpack");
var path = require("path");

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

Main.ts

import Quill from 'quill';
import ImageResize from 'quill-image-resize-module'; 
Quill.register('modules/imageResize', ImageResize);

function _window() : any {
    return window;
}


_window().Quill = Quill;
_window().quill = Quill;

正如lordUhuru所述，我添加了

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

到我的index.html

我不确定是否需要所有步骤。我仍然在玩它。

Answer 5

问题在于模块的导入方式，它甚至可以在Angular 9 Ivy中工作，具体取决于 tsconfig.json 中的编译器选项。添加：

"noImplicitAny": false

这还将解决ImageDrop模块的相同问题。

另外，使用ngx-quill签出新版本中的所有新修补程序。

Answer 6

我用jQuery来解决这个问题：

const videos = $('iframe.ql-video);
videos.attr("width","853");
videos.attr("height","480");

工作正常。

Quill Image为Angular 2 quill模块调整大小

6 个答案: