Что-то захотелось редактируемый профиль пользователя на странице сделать через html contenteditable

Потратил кучу времени, что-то получилось, но в итоге переделал на input

Очень неудобно, особенно с системой байндинга и реактивности Vue
Не делайте так.

#html

В мой vite-plugin-html-injection сделали первый PR

Приятно, чёрт возьми.

Теперь во фрагментах можно использовать Vite env переменные, типа %VITE_API_URL%, которые будут заменены на их значения.

#vite #plugin #lib

Если нужно добавить на страницу поле для редактирования текста, можно использовать атрибут contenteditable, как более приятную замену textarea (для полей больших форм это не очень хорошая замена).

Чтобы ограничить ввод только текстом, можно использовать значение plaintext-only у атрибута contenteditable. Это предотвратит вставку HTML-разметки, картинок или стилей.

<div 
  contenteditable="plaintext-only" 
  data-placeholder="Начните печатать..."
></div>

Дополнительно можно ловить события input и paste, чтобы очищать текст от случайного форматирования. Например, при вставке можно заменить HTML-содержимое на обычный текст через e.clipboardData.getData('text/plain').

Подробнее о тонкостях работы с contenteditable в статье на web.dev

#html