如何创建一个输入字段，您可以自然地键入，然后将其转换为HTML？

Question

我正在尝试使用textarea输入字段，就像发布新的StackOverflow问题一样。你可以有行间距，你可以加粗文字，你可以插入链接等。

但是，当您按某种按钮时，所有这些按钮都会转换为长HTML字符串（例如，空格变为<p>或<br>，粗体变为<strong>，链接变为<a>）。有没有办法用某种JS插件来做到这一点？

Answer 1

你所描述的是你所看到的是什么（WYSIWYG）编辑器。

Google“WYSIWYG编辑器库”

示例：

https://prosemirror.net/

https://www.tinymce.com/

Answer 2

如果我理解了你的要求，你需要学习正则表达式。一切都是基于文本替换的上下文。 示例：因为textarea不显示超链接，按钮，我可以像stackoverflow中那样做一些事情。   对于超链接，我可以写一些链接[＃http://facebook.com]或[link] http://facebook.com [link];

稍后，我提取http://facebook.com并将其包装在<a></a>元素之间。

Answer 3

此问题已在Rendering HTML inside textarea

中得到解答

您需要的是WYSIWYG（所见即所得）编辑器。 有很多。

你可以看看这些：

Ckeditor The best web editor for everyone

TinyMCE Full featured web editing

它们非常易于使用。

Answer 4

上面所说的每个人都是真的，你想看一个WISYWG编辑器。

如果您使用的是Bootstrap，可能需要查看Summernote。

我与他们没有任何关系，但我将其用于我的一个项目并且非常高兴。