0

将 HTML/任何标签添加到选择的任一侧 - Javascript

问题：

在我的 PHP/html 文件中创建一个 textarea 框后，我希望添加更多功能，并决定制作一个可以使用格式的 textarea，例如

<textarea>
This is text that was inserted. <b>this text was selected and applied a style
via a button<b>
</textarea>

标签是什么并不重要，（由于PHP脚本在接收$_POST数据时会自动应用正确的标签，标签作为样式ID，所以我关心的可能是气泡。不相关）

问题/秒

  • 如何使用 javascript 创建此功能？
  • 有没有可能有帮助的链接？
  • 如果有信息，你能解释一下吗？

编辑：其他接近的例子但不完全是 stackoverflow 的编辑器，请注意我不希望使用 3rd 方脚本，这对我来说是一个学习过程。插入文本中的标签被保存到数据库中，然后当页面被请求时，PHP 用样式 ID 替换标签。如果有不涉及第 3 方脚本的解决方法，请提出建议

而对于谷歌搜索的反研究怀疑论者来说，几乎没有发现有意义的东西，并且有 关于 SOF 的先前研究：
- https://stackoverflow.com/questions/8752123/how-to-make-an-online-html -editor
-为选择添加标签

提前致谢

4

3 回答 3

0

除了 texarea 中的基本格式之外，您不能做任何事情。如果您想要复杂的格式，请考虑将 div 的 contentEditable 属性设置为 true。或者你可以制作一个所见即所得的编辑器，但那是一个大项目。我强烈建议在这个上使用 3rd 方代码。

于 2012-07-21T02:09:20.773 回答
0

我建议你使用 iframe 来实现所见即所得的效果。有一个属性iframe叫做designMode

有关更多信息，请参见此处
https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla

还有一个轻量级的例子，也许你想看看：
http ://code.google.com/p/rte-light/source/browse/trunk/jquery.rte.js

于 2012-07-21T02:32:26.600 回答
0

<textarea>元素不能包含特殊标记，只能包含值。您不能在文本区域中应用任何样式。

您需要做的是伪造文本框通常会做的所有事情，包括绘制光标。正如 hackattack 所说，这是很多工作。

如果您抓住 jQuery 并开始四处寻找，您可以做很多事情。扔一个<div>带有 ID 的标签，然后开始破解。

我从来没有亲自做过，但有很多。HTML5 的 contentEditable 可能会为您提供很大的帮助：http: //html5demos.com/contenteditable/

如果您想将此数据传回服务器，您需要获取容器的 innerHTML 并在提交表单时将其放入隐藏的输入中。

如果您只是在胡闹，还可以查看以下其他一些内容：

编辑：我想我完全误解了

如果您不是在寻找富文本编辑器，而只是想要一些代码帮助按钮，那么 selectionStart 和 selectionEnd 可能就是您所追求的。我不知道浏览器支持是什么，但它在 Chrome 中工作：http: //jsfiddle.net/5yXsd/

于 2012-07-21T02:41:08.717 回答