If I have a textarea
block like so...
如果我有一个像这样的textarea块。
<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
.. text area content ...
</textarea>
How can I embed HTML formatted text inside this text block? If I can I had figured the following should work...
如何在文本块中嵌入HTML格式的文本?如果可以的话,我想下面的方法应该可以……
<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
<b>Hello how are you today?</b>
</textarea>
As an example. But that sentence does not show up as bold. Maybe I'm just trying to do something that can't be done?
作为一个例子。但这句话并没有那么大胆。也许我只是想做一些做不到的事?
9 个解决方案
#1
24
I am pretty sure the answer is no -- cannot do it with a textarea.
我很确定答案是否定的,不能用文本框。
From the MDN docs:
从MDN文档:
The HTML <textarea> element represents a multi-line plain-text editing control.
HTML
- Permitted content Text
- 允许内容文本
#3
11
Is not possible with
是不可能的
<textarea>
Use this:
用这个:
<div contenteditable="true">
</div>
#4
6
You can do this (convert the "special" characters):
你可以这样做(转换“特殊”字符):
<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
<b>Hello how are you today?</b>
</textarea>
#5
5
You are correct, it cannot be done.
你是对的,这是不可能的。
According to MDN, "character data" is the only permitted content for a <textarea>
.
根据MDN,“字符数据”是
As other answers have described, what you are looking for is a WYSIWYG editor, like CKEditor, TinyMCE, or Kendo's Editor.
正如其他答案所描述的,您需要的是WYSIWYG编辑器,比如CKEditor、TinyMCE或Kendo的编辑器。
This is beside the point, but interestingly, MDN lists some examples on their HTMLTextAreaElement page on how to enable dynamic adding of HTML tags around text in a <textarea>
and how to enable autogrow behavior for a <textarea>
.
这不是重点,但有趣的是,MDN在他们的HTMLTextAreaElement页面上列出了一些示例,说明如何在
#6
4
Nope! If you validated that in an HTML document, you'd get an error along the lines of
不!如果您在一个HTML文档中验证了它,您将会得到一个沿着
document type does not allow element "b" here
文档类型不允许元素“b”在这里。
What you might be looking for is a What-You-See-Is-What-You-Get editor, which is actually an <iframe>
which is making use of a JavaScript feature designMode
. It's possible to find tutorials on how to create these (archive), but it's a much, much better idea to use an existing one, as for it to be really useful and usable takes a lot of work.
您可能正在寻找的是一个“什么是什么”的编辑器,它实际上是一个使用JavaScript特性设计模式的
Take note that - if you were still interested in validation, which you should be if you're working with HTML - is that you won't be able to use a strict DOCTYPE
declaration, as the WYSIWYG editor will be using an iframe
.
请注意,如果您仍然对验证感兴趣,如果您使用的是HTML,那么您将无法使用严格的DOCTYPE声明,因为WYSIWYG编辑器将使用iframe。
#7
3
You can try this too its simple and if you are using asp.net use lable contron in text area add this as
你可以尝试它的简单,如果你正在使用asp.net使用文本区域中的lable contron,请将其添加为
Text="< stonename >"
"<";stonename">";
#8
1
Here is the answer.
这是答案。
Use this function.
使用这个函数。
function br2nl(varTest) {
return varTest.replace(/<br\s*\/?>/ig, "\r");
}
#9
1
You can not do that inside textarea but what you can do...you can use p tag and parse information to tag by JQuery. Something like this:
你不能在textarea内做,但是你可以做…您可以使用p标记和解析信息来标记JQuery。是这样的:
var stringviewinfo ="aaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaa<b>aaaaaaaa</b>aaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaa<font color=\"red\">AAAA</font>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<b>aaaaaaaaaaaaa<b>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
$('#viewinfo').html(stringviewinfo);
<p style="word-wrap: break-word;" id="viewinfo"></p>
I hope this will help.
我希望这能有所帮助。
#1
24
I am pretty sure the answer is no -- cannot do it with a textarea.
我很确定答案是否定的,不能用文本框。
From the MDN docs:
从MDN文档:
The HTML <textarea> element represents a multi-line plain-text editing control.
HTML
- Permitted content Text
- 允许内容文本
#2
#3
11
Is not possible with
是不可能的
<textarea>
Use this:
用这个:
<div contenteditable="true">
</div>
#4
6
You can do this (convert the "special" characters):
你可以这样做(转换“特殊”字符):
<textarea name="myTextArea" cols="100" rows="20" readonly=readonly>
<b>Hello how are you today?</b>
</textarea>
#5
5
You are correct, it cannot be done.
你是对的,这是不可能的。
According to MDN, "character data" is the only permitted content for a <textarea>
.
根据MDN,“字符数据”是
As other answers have described, what you are looking for is a WYSIWYG editor, like CKEditor, TinyMCE, or Kendo's Editor.
正如其他答案所描述的,您需要的是WYSIWYG编辑器,比如CKEditor、TinyMCE或Kendo的编辑器。
This is beside the point, but interestingly, MDN lists some examples on their HTMLTextAreaElement page on how to enable dynamic adding of HTML tags around text in a <textarea>
and how to enable autogrow behavior for a <textarea>
.
这不是重点,但有趣的是,MDN在他们的HTMLTextAreaElement页面上列出了一些示例,说明如何在
#6
4
Nope! If you validated that in an HTML document, you'd get an error along the lines of
不!如果您在一个HTML文档中验证了它,您将会得到一个沿着
document type does not allow element "b" here
文档类型不允许元素“b”在这里。
What you might be looking for is a What-You-See-Is-What-You-Get editor, which is actually an <iframe>
which is making use of a JavaScript feature designMode
. It's possible to find tutorials on how to create these (archive), but it's a much, much better idea to use an existing one, as for it to be really useful and usable takes a lot of work.
您可能正在寻找的是一个“什么是什么”的编辑器,它实际上是一个使用JavaScript特性设计模式的
Take note that - if you were still interested in validation, which you should be if you're working with HTML - is that you won't be able to use a strict DOCTYPE
declaration, as the WYSIWYG editor will be using an iframe
.
请注意,如果您仍然对验证感兴趣,如果您使用的是HTML,那么您将无法使用严格的DOCTYPE声明,因为WYSIWYG编辑器将使用iframe。
#7
3
You can try this too its simple and if you are using asp.net use lable contron in text area add this as
你可以尝试它的简单,如果你正在使用asp.net使用文本区域中的lable contron,请将其添加为
Text="< stonename >"
"<";stonename">";
#8
1
Here is the answer.
这是答案。
Use this function.
使用这个函数。
function br2nl(varTest) {
return varTest.replace(/<br\s*\/?>/ig, "\r");
}
#9
1
You can not do that inside textarea but what you can do...you can use p tag and parse information to tag by JQuery. Something like this:
你不能在textarea内做,但是你可以做…您可以使用p标记和解析信息来标记JQuery。是这样的:
var stringviewinfo ="aaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaa<b>aaaaaaaa</b>aaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaa<font color=\"red\">AAAA</font>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<b>aaaaaaaaaaaaa<b>aaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</br>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa";
$('#viewinfo').html(stringviewinfo);
<p style="word-wrap: break-word;" id="viewinfo"></p>
I hope this will help.
我希望这能有所帮助。