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

我在 vue 中使用 quill editor，我必须安装一些模块来调整图像大小:

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' ]
        }
    }
}

希望对你有所帮助。