[Скрипты][Вайб-лонгинг] Вставляем картинки и гифки с сервисов в редактор dtf

На неделе на нашем сайте отвалился поиск гифок в комментах. Я немного поресёчил работу того скрипта и сделал аналогичный только для Codex Editor, редактора постов dtf.ru.

Теперь можно вставлять в редактор картинки и боевые гифочки не меняя вкладки браузера!

Три пользовательских скрипта (UserScript) для вставки картинок и гифок с сервисов klipy.com, giphy.com, serper.dev. Первые два для гифок, serper.dev для картинок.
Ставить можно все три или по выбору.

Бесконечная прокрутка
Выбор доступных размеров картинок/гифок для вставки

Важное замечание: у dtf.ru нет API для работы с редактором и мои скрипты работают через "хаки". Работа ничем не гарантирована. ¯\_(ツ)_/¯

MutationObserver отслеживает событие запуска редактора
В тулбар редактора добавляется новая кнопка
При нажатии на кнопку запускается форма поиска и выбора картинки/гифки
При выборе картинки/гифки её ссылка вставляется в последнее редактируемое поле редактора через вставку из буфера обмена

Ничего сложного

Мне стоит сделать обучающую статью по теме как работают эти скрипты?

Канеш, мне интересно, делай!

Пошёл на х..й

Сделаю пост если наберется 100 проголосовавших за первый вариант или пойду погуляю, если наберется 100 проголосовавших за второй...

Сделайте правильный выбор

Скрипты работают с сервисами в "тестовых" режимах с моими API-ключами. Надо понимать что никто не будет Вам на халяву давать сжигать ресурсы и за всё надо платить. Поэтому Вам надо самим озаботиться приобретением собственных API-ключей, благо это быстро и бесплатно делается. Ваши API-ключи надо прописать в скриптах.

Скрипт для работы с klipy.com: в админке я не нашёл ограничений тестового режима. API-ключи брать здесь:

partner.klipy.com

KLIPY Partner Dashboard

Скрипт для работы с giphy.com: тестовый режим позволяет делать 100 запросов в час. API-ключи брать здесь:

developers.giphy.com

Dashboard | GIPHY Developers

Скрипт для работы с serper.dev: при регистрации Вам дается 2500 кредитов. Простой запрос на 10 картинок стоит 1 кредит, запрос на 100 картинок стоит 2 кредита. Далее можно продолжить работу API-ключа по курсу 1 доллар - 1000 кредитов.

API-ключи брать здесь:

serper.dev

Скрипты для работы с klipy.com и giphy.com возможно проработают месяцы или годы не меняя API-ключ. Точно я не знаю.
Скрипт для работы с serper.dev работает на ключе, у которого сейчас 2400 кредитов, это 1200 запросов. Десяток дтферов израсходуют его за неделю. Поэтому работа этого скрипта скоро закончится - замените на свой API-ключ.

1. Использовал ли ты, мразь, нейросети для создания данных скриптов? А? А?? А??? <предосудительно смотрит и грозит пальцем>

Да, Deepseek любезно помог мне с вёрсткой и CSS ( я уже слишком стар для этого дерьма ). Всё остальное моё.

Эх сейчас бы в 2К26 оправдываться за использование нейронок!

2. Сколько стоят эти скрипты <достаёт кредитку и тычет в монитор>?

b90987us.beget.tech

http://b90987us.beget.tech/share/dtf_editor/dtf_editor_giphy.user.js

b90987us.beget.tech

http://b90987us.beget.tech/share/dtf_editor/dtf_editor_klipy.user.js

b90987us.beget.tech

http://b90987us.beget.tech/share/dtf_editor/dtf_editor_serper.user.js

Установить в своем веб-браузере расширение для работы с UserScript, например Тampermonkey
Установить в этом расширении скрипт(ы). Есть как минимум 3 способа установки: создать скрипт и вставить текст, перенести (drag'n'drop) файл на страницу расширения или установить скрипт через ссылку.