Quill 富文本编辑器调整图像大小仅适用于 IE，但不适用于 Chrome 或 Edge

Question

我在我的网络应用中实现了 Quill 文本编辑器。我在 asp.net core 2.1 中创建了一个网络应用程序

Quill 文本编辑器调整图像大小在 IE 中可以正常工作，但在 Chrome 或 Edge 中无法正常工作。

这是其他浏览器的已知问题吗？如果是这样，只有 IE 适合通过 Quill 编辑器调整图像大小？

如果你告诉我只有 IE 可以通过 Quill 调整图像大小，我猜我必须使用不同的文本编辑器.. 但希望不会.. 如果我必须使用不同的，你能推荐一个开源的吗？

提前谢谢你！

这是我在 html 中所做的：

<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<!-- Theme included stylesheets -->
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<div class="col-md-10 col-md-offset-1">
    <div class="form-group">
        <div id="editor-container" style="height:600px"></div>
    </div>
</div>

<script type="text/javascript">
    var quill = new Quill('#editor-container', {
        modules: {
            toolbar: [
                [{ header: [1, 2, false] }],
                [{ 'font': [] }],
                [{ 'color': [] }, { 'background': [] }],
                ['bold', 'italic', 'underline', 'strike', 'blockquote'],
                [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
                [{ 'align': [] }],
                ['image', 'link'],
            ]
        },
        theme: 'snow'  // or 'bubble'
    });
</script>

Answer 1

displaySize: true // 默认 false

<script src="quill-image-resize-module-master/image-resize.min.js"></script>

 var quill = new Quill('#editor', {
        theme: 'snow',
         modules: {
            imageResize: {
              displaySize: true // default false
            },
           toolbar: [
             [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
             ['bold', 'italic', 'underline', 'strike'],
             [{ 'color': [] }, { 'background': [] }], 
             [{ 'align': [] }],
             ['link', 'image'],

             ['clean']  
           ]
        }
    });

Answer 2

我正在使用带有 vue 的 quill 编辑器，我必须安装一些模块来调整图像大小：

1 安装模块

yarn add quill-image-resize-module --save
yarn add quill-image-drop-module --save

或使用 npm：

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

2 导入和注册模块

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

3 添加编辑器选项

editorOption: {
    modules: {
        toolbar: [
            ['bold', 'italic', 'underline', 'strike'],        
              ['blockquote'/*, 'code-block'*/],

              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
              [{ 'indent': '-1'}, { 'indent': '+1' }],          

              [{ 'size': ['small', false, 'large', 'huge'] }],  
              [{ 'header': [/*1,*/ 2, 3, 4, 5, 6, false] }],

              [{ 'color': [] }, { 'background': [] }],          
              [{ 'font': [] }],
              [{ 'align': [] }],

              ['clean']                                         
        ],

        history: {
            delay: 1000,
            maxStack: 50,
            userOnly: false
        },
        imageDrop: true,
        imageResize: {
          displayStyles: {
            backgroundColor: 'black',
            border: 'none',
            color: 'white'
          },
          modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
        }
    }
}

希望对你有帮助。

Answer 3

实现图像调整大小模块跨浏览器的一种简单方法是从 GitHub 下载 ZIP： https://github.com/kensnyder/quill-image-resize-module

提取根文件夹中的内容，然后从 HTML 中调用它。

<!-- Quill HTML WYSIWYG Editor -->
<!-- Include Quill stylesheet -->
<link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet">
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.0.0/quill.js"></script>
<!-- Quill Image Resize Module -->
<script src="quill-image-resize-module-master/image-resize.min.js"></script>

接下来将其添加到您的 Quill 配置中：

var quillObj = new Quill('#editor-container', {
modules: {
imageResize: {},
toolbar: '#toolbar-container'
},
theme: 'snow'
});

Demo Here