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

Question

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

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'
});

演示在这里