Question

我想创建自己的“编辑器”（只有代码视图，没有WYSIWYG），我在插入图像时遇到问题。上传和选择图像是通过blueimp-jQuery-File-Upload完成的。

我想要做的是将它们插入到我的textarea中，就像StackOverflow一样（所以没有一些花哨的画廊，模块等）。我上传它，它会以这种格式自动添加到textarea中

![imageDescription][1]
[1]: http://i.stack.imgur.com/image.jpg

我的问题是如果我的文本区域中存在某些图像（如果我的文本区域中有这两行），那么如何（可能使用jQuery / JavaScript）自动识别，在textarea下面显示这些图像（或其链接））但如果我删除它们（文本行） - 下面的链接/图像会消失。

可能我应该在每个按键上逐行“扫描”？也许使用正则表达式，如果它是真的（对于两条线） - 然后显示下面的图像，而不是它只是一个普通的文本。

Answer 1

如果您想在编辑器下面立即显示这些图像，您别无选择，只能将该事物绑定到按键事件。当您获得文本时，您可以执行一些正则表达式操作来捕获图像并将其插入<img src="my image">。如果在该编辑器中仍然存在图像，那么在每次按下之后进行检查（可能历史是一个不错的选择）。如果没有，请删除<img>标记。

Answer 2

如果仍然需要，这里有一些我做的参考。 Javascript正则表达式替换：

.replace(new RegExp("\_img_([^ ].+?[^ ])\_img_", "g"),"<img src='$1' />")

它实际上是一种可以应用于任何标签的模式。正则表达式如下：

.replace(new RegExp("\___what ever signifier here ___([^ ].+?[^ ])\_____end sign____", "g"),"<tag>$1</tag>")

*请记住在正则表达式中使用twp正斜杠来转义正则表达式中的特殊字符：\\*

另外，如果你想添加更多参数，只需添加另一个（[^]。+？[^]）块，然后在下一个参数的位置用$ 2命名，如下所示：

.replace(new RegExp("\\[([^ ].+?[^ ])\\]\\(([^ ].+?[^ ])\\)", "g"),"<a href='$1'>$2</a>")

请注意我使用双正斜杠转义[ ] ( )。看到它的实际应用：http://jsfiddle.net/xwTGr/

从textarea自动识别图像（如StackOverflow）

2 个答案: