Quill 富文本编辑器调整图像大小仅适用于 IE，但不适用于 Chrome 或 Edge [英] Quill rich text editor resize image only works in IE but not in Chrome or Edge

问题描述

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

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

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

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

先谢谢你！

这是我在 html 中所做的:

<!-- Main Quill 库--><script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script><!-- 主题包括样式表--><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>

<script type="text/javascript">var quill = new Quill('#editor-container', {模块:{工具栏:[[{ 标题:[1, 2, 假] }],[{'字体':[]}]，[{'颜色':[]}，{'背景':[]}]，['粗体', '斜体', '下划线', '罢工', 'blockquote'],[{ 'list': 'ordered' }, { 'list': 'bullet' }],[{ 'indent': '-1' }, { 'indent': '+1' }],//缩进/缩进[{ '对齐': [] }]，['图片'，'链接']，]},主题:雪"//或泡泡"});</script>

解决方案

displaySize: true//默认为 false

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

 var quill = new Quill('#editor', {主题:雪"，模块:{图像调整大小:{displaySize: true//默认为 false},工具栏:[[{'header': [1, 2, 3, 4, 5, 6, false] }],['粗体'，'斜体'，'下划线'，'罢工']，[{'颜色':[]}，{'背景':[]}]，[{ '对齐': [] }]，['链接'，'图片']，['干净的']]}});

I implemented Quill text editor to my web app. I created a web app in asp.net core 2.1

Quill text editor resizing an image working fine in IE but not in Chrome or Edge.

Is this already known issue for other browsers? If so, only IE is suitable for resizing an image thru Quill editor?

If you tell me only IE can resize an image thru Quill, I have to use different text editor I guess.. hope not though.. If I have to use different one, can you recommend one that is open source?

Thank you in advance!

Here is how I have done in 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>

解决方案

displaySize: true // default 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']  
           ]
        }
    });

这篇关于Quill 富文本编辑器调整图像大小仅适用于 IE，但不适用于 Chrome 或 Edge的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！