Можно ли иметь несколько разных текстовых цветов в одной текстовой области?

Question

Мне бы хотелось, чтобы несколько слов / фаз в текстовой области отображались разными цветами ... Как бы я поступил так?Ниже приведен пример, я хотел бы, чтобы слово зеленый отображалось зеленым и т. Д. И т. Д.

<textarea style="width: 100%; height: 100%; resize: none;">
Is it possible to have multiple colors in a textarea? 
How would i set certain phases or words to be different colors? 
"Green"
"Red"
"Blue"
</textarea>

Answer 1

Вы не можете сделать это внутри a <textarea>, но это не то, что можно редактировать. Похоже, вам нужен WYSIWYG редактор , большинство из которых использует <iframe> для этого.

Есть несколько вариантов JavaScript для этого, чтобы назвать несколько:

• TinyMCE
• CKEditor

Answer 2

Вы не можете сделать это с тегом textarea или input. Однако, как уже упоминалось @naikus, вы можете использовать атрибут contenteditable. Это выглядит следующим образом:

<div id="mytxt" contenteditable="true">
   Hello, my name is <span style="color: blue;">Bob</span>
   and I have a friend name <span style="color: green;">Joe</span>.
</div>

<div id="mytxt" contenteditable="true">
       Hello, my name is <span style="color: blue;">Bob</span> and I have a friend name <span style="color: green;">Joe</span>.
    </div>

Answer 3

Я не думаю, что это возможно сделать только с помощью textarea и html. Что вам нужно, это поле Rich Text Box Вы можете либо свернуть свой собственный , изменив iframe, либо использовать популярные

Другой вариант, который вы можете использовать при настройке браузеров с поддержкой html5, - это атрибут contentEditable . Вы можете использовать его для создания текстового элемента управления

Answer 4

Это невозможно в обычной текстовой области.

• Для подходов, подобных подсветке синтаксиса, см. Ответы на этот вопрос .

• Более сложное, полноценное решение WYSIWYG, которое может выполнять цвет, а также другое форматирование, изображения и т. Д., См. В редакторе WYSIWYG, например CKEditor .

Answer 5

Это невозможно с текущими спецификациями w3c. Если вы ищете обходной путь, проверьте codemirror или editArea для их обходных путей для выделения синтаксиса.

Answer 6

Вы не можете сделать это с помощью элементов управления HTML по умолчанию.Вы можете использовать редакторы Rich Text Box, чтобы получить то, что вы хотите, например, проверьте этот вопрос:

Какой самый лучший редактор rich texttarea для jQuery?