Я использую contenteditable с v-model, для подсвечивания некоторых слов которые

Question

Я использую contenteditable с v-model, для подсвечивания некоторых слов которые

нахожу через регулярку

<div
contenteditable
v-html="modelValue"
@paste.prevent="pasteAsPlainText"
@input="event => $emit('update:modelValue', event.target.textContent)"
/>

Но из-за v-html если изначальный текст содержит html тэги, они вставляются как тэги, а не текст

Как избежать такое поведение?

Мне нужно чтобы он вёл себя как обычный textarea, но чтобы там подсвечивались (оборачивались в тэг) только некоторые слова из регулярок и ничего больше

#programming #russian #vue.js

0

09.05.2022

8 ответов

22 просмотра

Антипов 🇺🇦 Автор вопроса

Kirill 🍅 Romanov
не использовать v-html)

ок, допустим заменим на v-text, но тогда те слова которые я оборачиваю в тэг не будут работать

0

09.05.2022

Stanislav Lashmanov

Антипов 🇺🇦
ок, допустим заменим на v-text, но тогда те слова ...

Как ты будешь отличать что должно быть тегом, а что нужно конветировать в html entity?

0

09.05.2022

Антипов 🇺🇦 Автор вопроса

Stanislav Lashmanov
Как ты будешь отличать что должно быть тегом, а чт...

мб нужно держать 2 текста, 1 как обычный текст в v-model, а другой для вывода где слова будут оборачиватся в тэг

0

09.05.2022

Stanislav Lashmanov

Антипов 🇺🇦
мб нужно держать 2 текста, 1 как обычный текст в v...

Текст ты можешь получить через el.textContent

0

09.05.2022

Stanislav Lashmanov

Короткий ответ: не пытаться написать свой вариант визивига, а брать готовый. Уже проходил эту историю несколько раз. Конец с самописными решениями всегда был печальный.

0

09.05.2022

Антипов 🇺🇦 Автор вопроса

я брал, но там столкнулся с багом который нельзя решить, неправильно копирует переносы + из-за этого проблемы с v-model (нельзя адекватно посчитать количество символов, тк "лишние" переносы он убирает) :( копирует как "test test" (с 1 переносом вместо 2)

0

09.05.2022

Stanislav Lashmanov

Антипов 🇺🇦
я брал, но там столкнулся с багом который нельзя р...

Визивигов десятки, найдите тот который работант)

0

09.05.2022

Kirill 🍅 Romanov · Accepted Answer

Kirill 🍅 Romanov

не использовать v-html)

0

09.05.2022

169 похожих чатов

Я использую contenteditable с v-model, для подсвечивания некоторых слов которые

8 ответов

Похожие вопросы