Текстовый редактор Quill с изменением размера изображения работает только в IE, но не в Chrome или Edge

Я внедрил текстовый редактор 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>


javascript text-editor wysiwyg quill
person Seong E Kim    schedule 26.07.2018    source источник
comment
хорошая статья об изменении размера изображения blog.almightytricks.com/2020/ 21 октября/ngx-quill-image-resize   -  person Sangram Badi    schedule 21.10.2020

Ответы (3)


arrow_upward
1
arrow_downward

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']  
           ]
        }
    });
person Zanyar J.Ahmed    schedule 07.06.2020

arrow_upward
0
arrow_downward

Я использую редактор quill с 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' ]
        }
    }
}

Надеюсь поможет вам.

person Angel M.    schedule 28.07.2018
comment
Где вы пишете модули импорта и регистрации? - person Seong E Kim; 30.07.2018
comment
M, Можете ли вы попробовать в Chrome и увидеть, как работает изменение размера изображения ?? - person Seong E Kim; 01.08.2018
comment
M, Мой Chrome не может изменить размер изображения по ссылке, которую вы мне дали: codepen.io/tesis/pen/djddgg Мой Chrome — самая последняя версия. - person Seong E Kim; 08.08.2018
comment
Инструмент разработчика показывает ошибку quill Невозможно импортировать модули/imageResize. Вы уверены, что оно было зарегистрировано? - person Seong E Kim; 08.08.2018
comment
@SeongEKim в ручке кода - это просто пример того, как это сделать. Я не добавил ссылку для изменения размера изображения, но она есть в вашей папке node_modules. - person Angel M.; 10.08.2018
comment
Можете ли вы сделать codepen для меня? Я до сих пор не могу решить эту проблему. Спасибо!! - person Seong E Kim; 20.08.2018
comment
Информация старая. Многие зависимости устарели. - person hdoitc; 15.04.2020

arrow_upward
0
arrow_downward

Простой способ реализовать кроссбраузерный модуль изменения размера изображения — загрузить ZIP-файл с GitHub: 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'
});

Демо здесь

person ArabianMaiden    schedule 14.10.2018