причина
Процесс вещей такой: 👉У нас есть экзаменационная система, в которой есть функция записи вопросов (то есть редактирования в форматированном тексте), во многих случаях у нас будет еще и готовый ворд документ (то есть, некоторые вопросы), поэтому, как только мы можем скопировать заголовок из слова в форматированный текст, заголовок вводится. Но вот проблема, если я скопирую изображение и текст вместе (можно разделить изображение и текст), изображение не будет отображаться, как и следующее👇:
Итак, можно ли отображать изображения? Не знаю, не могу найти, могу только попробовать. Кстати, в примере в тексте используется
vue-quill-editorБогатый текстовый редактор, но, в конце концов, эта проблема не имеет ничего общего с самим quill.
погруженный в размышления
Во-первых, уточните первоначальный замысел задачи: ⭕ — разрешить форматированному тексту отображать картинку в графической информации, скопированной из слова.Изображение либо преобразуется в формат base64 внешним интерфейсом, либо передается на серверную часть, чтобы вернуть src для отображения, пример base64.
идея первая
Первоначальная идея заключалась в поиске всех видов Луо 🤔, а потом. . . Не удалось. Это. . . Вы можете сделать это только сами.
Первая общая идея - посмотреть, выставляет ли сам редактор какой-либо интерфейс, чтобы вы могли самостоятельно обрабатывать скопированный контент.Посмотрев его, да, он есть, и я очень доволен 😁, как показано на следующих картинках:
Итак, мы успешно распечатали содержимое узла и дельты, как показано на следующем рисунке👇:Неважно, что вы не знаете дельту (вы можете описать формат данных форматированного текста), вам нужно только знать, что в нем есть поле изображения, и вывод в форматированный текст, вероятно, будет выглядеть так:
<img src="insert 里面的 image" width="attributes 里面的 width" height="attributes 里面的 height">. Но, к сожалению, это поле изображения не пригодится, потому что браузеры из соображений безопасности 😒, мы используем толькоfile://xxxЭтот путь не может получить доступ к локальным ресурсам, поэтому мы не можем прочитать образ, о чем мы изначально сообщили в консоли:Но здесь я просто скопировал картинку в формате base64, чтобы заменить поле изображения, и картинка может отображаться нормально. Тогда наша следующая цель — найти способ читать картинки в графике.
идея вторая
Итак, я пошел в quill, чтобы узнать, есть ли какие-то интерфейсы, выставленные ранее, которые могут позволить нам обрабатывать скопированный контент раньше, потому что вышеприведенный интерфейс, очевидно, уже обработанный контент, нам нужно идти на шаг быстрее 🚀.Найти и найти, найти и найти, найти хорошего друга.Жаль, не нашла, а в голове потихоньку потухло 😯. . .
Закрыв глаза и немного отдохнув, я действительно не знал, что делать, поэтому я взглянул на исходный код quill, чтобы увидеть, что в нем сделано👀:
Из приведенных выше двух графиков мы ясно видим, что искомые файлы изображений должны находиться вe.clipboardData.filesВнутри, но логика нашей жизни 🀄 должна быть такойthis.onPaste(range, { html, text }), очевидно, что этот метод не проходит в файлы, поэтому он не должен обрабатываться соответствующим образом. Кажется, что мы должны изменить чужой код, но все еще есть пороги для изменения чужого кода, и его трудно поддерживать после долгого времени, поэтому давайте начнем с малого, сначала добавим событие вставки сами, и посмотрим на оригинальную вставку Может ли событие получить файл изображения и преобразовать его в base64, если это возможно, продолжайте идти дальше😎.
идея три
Итак, мы добавили собственное событие вставки в форматированный текст и распечатали результат, как показано на следующем рисунке:
Мы получили изображение в формате base64, как и хотели, а затем скопировали base64 и открыли его в браузере.
😬Я был тронут ing, и изображение было отображено, поэтому я напрямую изменил код пакета quill (это quill не та версия, что показана выше), как показано ниже:
Затем пробуем вставить и результат такой:
Блин, 🐂🍺, это на самом деле работает, Удивительно! Но, кажется, что-то не так. Если присмотреться, то картинка на самом деле сама добавила текст. Что это за фарсовая операция, не правда ли, превью в браузере сейчас нормально 😐 ? Думаем об этом 🤔. . . . . . Не будем продавать. На самом деле, это просто не сработало. Давайте перенесем время немного вперед и вернемся к превью картинки. На этот раз я изменил фон на белый, и вы найдете:Эта Нима 🙌, она изначально была неправильной (поэтому к перу это не имеет никакого отношения), что заставило меня долго писать. После того, как скачут тысячи лошадей, все равно приходится помолчать и подумать, почему текст вмешивается в картинку? Я действительно в этом не разбираюсь, и не нашел после поиска (наверное из-за механизма реализации буфера обмена), а потом дело подошло к концу (простите за поспешность 😅), потому что исходник неверно, нет необходимости продолжать дальше.
не удалось
Хотя конец немного резковат, но оглядываясь назад и размышляя об этом, если картинка верна, эта функция не кажется сложной для реализации.Если вы можете ее реализовать, фреймворк может помочь вам ее реализовать. не справиться с такой графической логикой.В этом месте есть ямы, нужно быть бдительным.
Кроме того, если вы посмотрите внимательнее, то обнаружите, что изображения, которые мы читаем, имеют формат png, а локальные ресурсыfile://xxx/clip_image002.gifЭто действительно гифка, что очень странно, но судя по названию файлаclip_image002.gifГлядя на это, вероятно, должно быть возможно, что буфер обмена произвел с ним какую-то обработку, но что именно, неизвестно. Здесь, кстати, открыта папка этого пути к файлу, а содержимое показано на следующем рисунке:Удивительно 😳, здесь картинки в двух форматах, и они могут отображаться корректно, но, к сожалению, мы не можем читать картинки только по этому пути, поэтому результата пока нет. Вот, кстати, сохраните ворд как файл .htm, откройте экспортированный html и обнаружите, что картинки тоже в формате gif, как показано на следующем рисунке:
Не знаю насколько сильно 😳. . .
В конце концов, я также намеренно попробовал редакторы других продуктов, чтобы увидеть, каков эффект, но, к счастью, это не сработало:
Однако неожиданно было обнаружено, что собственная уценка Nuggets действительно может вставлять изображения и тексты, как показано ниже:
Это дополнение к base64, о котором я сказал, но, к счастью, результат тот же, изображение также будет содержать текст, так что я могу быть уверен, хахахаха 😁😁😁. . . .
😏 Также слышал, как слово, переданное для Backend Analytic, отдайте перед передним дисплеем, но кажется немного большим вредом, чем хорошим.
🌺Если есть большие парни, которые знают странные трюки, пожалуйста, оставьте сообщение ниже. . .