如何在< textarea>结尾添加图片在用户选择的文本行使用jQuery [英] how to add image on end of <textarea> in user selected text row using jQuery

问题描述

我的需要

在我的页面中有一个textarea html标签..用户可以在该文本区域中键入文档。

In my page have one textarea html tag.. The user can able to type a document in that textarea.

同时，用户对文档的单个句子有任何疑问。在那段时间用户能够选择疑问文本。

At the same time user have any doubt on single sentences of the document. in that time user can able to select the doubt text.

如果用户选择句子作为说明，句子的结尾可以添加为红色标记或标签

If user select the sentences for clarification , end of the sentences a image can added like red mark or tag

我有价值

我已使用jQuery完成所选的行号和所选的文本值

I have done the selected row number and selected text value using jQuery

我的问题是

如何在textarea的末尾添加图片..我在基于行的图像显示

How to add the image on end of textarea.. and i have a problem on line based image display

例如，如果我在第三行有澄清我选择文本和文本的结束[textarea的边框]图像可以标记

for example if i have clarification on third line i select the the text and end of the text[border of the textarea] a image can marked

请帮助我。

提前感谢..

推荐答案

解决方案：
首先需要创建一个< img> 元素，然后计算其未来位置基于包括< textarea> 的 scrollTop 然后，您需要使用CSS定位与一些漂亮的Javascript，将< img> 放置在正确的位置。我创建了一个快速 JSFiddle ，向您展示如何完成此操作的基础知识。如果您要允许文字换行，您可能需要使用库，例如​​这一个。

Solution: You first need to create an <img> element, then calculate its future position based off of several variables including the scrollTop of the <textarea>. Then, you'll need to use CSS positioning in conjunction with some nifty Javascript to place the <img> at the correct location. I've created a quick JSFiddle to show you the basics of how this should be done. If you want to allow text wrapping, you might want to use a library such as this one.

结果：

这篇关于如何在< textarea>结尾添加图片在用户选择的文本行使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！