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

我正在尝试将quill-image-resize-sodule用于ngx-quill.i已安装了ngx-quill，并且工作正常。现在，我需要调整编辑器内的图像大小，因此我正在尝试使用它。我在这里找到了Quill-image-resize-Module

问题是它是用JavaScript编写的，我正在尝试在打字稿文件（在组件内）中使用它，因此我有一个编译器错误。

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

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

谢谢

，如GitHub问题所述Quill-image-resizizizizizizizizizizizizizizizizizizizizizizizizizizizizizizizizize模块不适用于Angular 6。而是使用https://github.com/fandom-oss/quill-blot-formatter。首先，通过NPM安装此模块

npm安装 - 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

一起工作。

嗨，我弄清楚如何使这项工作首先确保已安装此模块

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。如果您有任何疑问可以随时询问他们，我会尽力帮助您。

首先，您不能使用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>

否则，图像尺寸的小部件将无法正常工作。

请参阅killercodemonkey的示例

对不起，我目前无法为您提供Plunker或STH。

我正在使用Angular/CLI 6.0.0，Quill-Image-Resize 3.0.9和Quill-Image-Resize-Resize-Module 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"
                    ]

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

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

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

"noImplicitAny": false

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

另外，请使用NGX-Quill查看所有新版本中的所有新修复程序。

我用jQuery解决了这个问题：

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

工作正常。

相关内容

最新更新

热门标签：