Question

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

Quill文本编辑器重新调整图像大小，可以在IE中正常运行，但不能在Chrome或Edge中运行。

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

如果您告诉我只有IE可以通过Quill调整图像大小，那么我猜我必须使用其他文本编辑器。.希望不是。如果我必须使用其他文本编辑器，您能推荐一个开源的吗？ / p>

提前谢谢！

这是我在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中使用了羽毛笔编辑器，必须安装一些模块来调整图像大小：

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>

接下来将其添加到您的羽毛笔配置中：

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

Demo Here

鹅毛笔丰富的文本编辑器调整图像大小仅在IE中有效，而在Chrome或Edge中无效

3 个答案: