Автор оригинала: FreeCodeCamp Community Member.
Андреем Семинь
Эта проблема
Для некоторых из вас это может быть сюрпризом, но DoveS.js не поддерживает изображения из коробки. Чтобы иметь возможность отображать изображения в редакторе, вам нужно установить и настроить Проект-JS-Image-Plugin (Мы не будем покрывать эту тему здесь, так как его документы довольно всеобъемлющиеся). Это также означает, что такая общая функция не поддерживает, например, в редакторе изображений (или любого другого файла). Целью этого поста – показать, как вы можете добавить базовую поддержку файлов вставки (мы сосредоточимся на изображениях).
Решение
Давайте начнем с чтения DoveS.js Документы . Оказывается, есть опора называется HandlePastedFiles в редакторе. Он получает массив файлов и должен предоставлять вам возможность манипулировать файлами на действии вставки. Однако вещи не работают точно так.
Теперь нам нужно определить, какие типы файлов мы собираемся обращаться. Для изображений, это изображение/png. , image/jpeg. и Изображение/GIF Отказ
Теперь, когда мы знаем, что мы собираемся работать только с изображениями, настало время фактически читать данные из файла. Для этого мы реализуем функцию под названием readimageasdatataurl и использовать Filereader API и Readasdataurl методы в частности. Эта комбинация шагов позволяет читать файл и его содержимое в кодировке Base64, которое позже можно использовать в качестве значения SRC атрибут IMG элемент.
Теперь, когда у нас есть наше кодированное изображение BASE64, все, что нам нужно сделать, это сделать создание Encity.js и обновить состояние редактора, чтобы содержать эту сущность.
Мы можем начать с помощью создать Метод Сущность Модуль, который является частью Proke.js. (Имейте в виду, хотя, чтобы документальные состояния Entity.create устаревают, а разработчики должны использовать contentstate.createentity . Последний не работал в то время, когда этот пост был написан. Так что мы будем приступить к использованию Сущность Но отследит это изменение).
Нам нужно предоставить 3 аргумента здесь:
- Первый – тип объекта, который мы собираемся создавать (
Imageв нашем случае) - Второе – это мюмомотамность объекта (
неизменяемоеозначает, что мы не можем редактировать содержание текста, содержащего эту сущность. Если мы попытаемся что-то удалить из него, весь текстовый диапазон будет удален) - И третью является необязательным объектом, содержащим любые данные, которые вы хотите хранить с помощью объекта (в нашем случае это
SRC, который требуется Chank-JS-Image-Plugin).
В ответ мы получим ключ, с помощью которого мы можем решить эту сущность в состоянии редактора. Теперь нам нужно использовать этот ключ, чтобы вставить блок в редактор и прикрепить это точное предприятие на этот блок. Мы будем использовать insertatomicBlock Функция AtomicBlockUtils Модуль из Craft.js. Нам нужно пройти текущее состояние редактора, ключа объекта и символ (которые не должны быть пустой строкой – вот почему мы используем одно пространство), и мы получим новое состояние редактора!
Теперь, когда все установлено, давайте вместе сочетать все вместе и посмотрите на наш Handspastedfiles. Функция:
Воила! Теперь мы можем вставить изображение в Resque.js редактор, просто нажав Ctrl + v. Вы можете продлить эту функциональность каким-либо образом, мы хотим! Например, мы можем позволить нашим пользователям изменить размер изображений с некоторыми модульными интерфейсами.
Если вы прочитали этот пост всю дорогу, вы также можете проверить мой предыдущий пост О проекте.js чары. Вы можете также применить его к вашему проекту.
Оригинал: “https://www.freecodecamp.org/news/how-to-paste-images-directly-into-an-article-in-draft-js-e23ed3e0c834/”