Как вставлять изображения только по URL в CKEditor5 с помощью react

#javascript #reactjs #ckeditor

Вопрос:

Я пытаюсь вставлять изображения исключительно по URL. В CKEditor 5 есть эта функция, но я не уверен, как я могу сделать так, чтобы значок значка img открывался модально для ввода URL.

это то, что у меня есть сейчас внутри конфигурации компонента CKEditor

  config={{
      toolbar: ['imageUpload'],
      image: {
        // ...
        upload: {
          panel: {
            items: ['insertImageViaUrl'],
          },
        },
      },
    }}

Как показано на рисунке ниже, я могу загружать через URL после нажатия выпадающего меню, но, точнее, я хотел бы поменять функциональность загрузки изображений на функциональность загрузки по URL из выпадающего списка

Ответ №1:

Используйте ImageInsertViaUrl плагин. Это позволит использовать только URL-адреса.

Запрос на извлечение: https://github.com/ckeditor/ckeditor5/pull/11980

 plugins: ['ImageInsertViaUrl']
toolbar: ['insertImage']

Ответ №2:

Используя URL изображения, пользователь может легко вставить его в редактор. Чтобы включить эту опцию, установите плагин ImageInsert и добавьте элемент insertImage toolbar на панель инструментов (он заменяет стандартную кнопку uploadImage).

 import ImageInsert from '@ckeditor/ckeditor5-image/src/imageinsert';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ ... , ImageInsert ],
        toolbar: [ ... , 'insertImage' ]
    } )

Это добавит новое выпадающее меню Вставить изображение Вставить изображение на панели инструментов. Чтобы загрузить изображение, нажмите на значок изображения. Чтобы открыть панель и добавить URL изображения, нажмите стрелку рядом с кнопкой изображения. Проверьте демонстрацию ниже, чтобы вставить новое изображение по URL или обновить существующее изображение, выбрав его, открыв выпадающую панель и вставив новый URL.

Источник => https://cutt.ly/vMU5Ey1

1. Это как показано в вопросе. Но вопрос в том, как отключить опцию загрузки; таким образом, прямое нажатие кнопки откроет диалоговое окно URL, а не диалоговое окно загрузки, поскольку в определенных сценариях вы хотите отключить эту опцию (если вы не хотите размещать изображения)

Ответ №3:

Плагин Image регистрирует:

insertImage Команда, которая принимает источник (например, URL) изображения для вставки. Плагин ImageUpload регистрирует:

uploadImageЭто открывает собственный файловый браузер, позволяющий загружать файл непосредственно с вашего диска (для использования на панели инструментов изображений). uploadImage Команда, которая принимает файл для загрузки.