如何通过按一下按钮将 HTML 代码添加到 textarea？答案

【问题标题】：How to add HTML code to textarea with push of a button?如何通过按一下按钮将 HTML 代码添加到 textarea？
【发布时间】：2016-05-09 19:30:11
【问题描述】：

我正在构建一个网页，其中包含我的女朋友可以轻松上传博客文章并将照片添加到该博客的部分...我仍在研究从博客上传将新照片上传到服务器的部分。

同时，我想让她尽可能简单。因此，如果她上传博客，我想在页面上添加一个按钮，该按钮将一个基本的 img src html 代码部分添加到她只需编辑相册和照片名称的文本区域。

经过一番研究，我发现this：

但每次我向其中添加 HTML 代码时，它都会破坏脚本。

是否有另一种方法可以使用按钮/链接将 HTML 代码（如 img src 内容）添加到文本区域？

编辑：

function insertAtCaret(areaId,text) {
	var txtarea = document.getElementById(areaId);
	var scrollPos = txtarea.scrollTop;
	var strPos = 0;
	var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
		"ff" : (document.selection ? "ie" : false ) );
	if (br == "ie") { 
		txtarea.focus();
		var range = document.selection.createRange();
		range.moveStart ('character', -txtarea.value.length);
		strPos = range.text.length;
	}
	else if (br == "ff") strPos = txtarea.selectionStart;
	
	var front = (txtarea.value).substring(0,strPos);  
	var back = (txtarea.value).substring(strPos,txtarea.value.length); 
	txtarea.value=front+text+back;
	strPos = strPos + text.length;
	if (br == "ie") { 
		txtarea.focus();
		var range = document.selection.createRange();
		range.moveStart ('character', -txtarea.value.length);
		range.moveStart ('character', strPos);
		range.moveEnd ('character', 0);
		range.select();
	}
	else if (br == "ff") {
		txtarea.selectionStart = strPos;
		txtarea.selectionEnd = strPos;
		txtarea.focus();
	}
	txtarea.scrollTop = scrollPos;
}

<textarea id="messageBody"></textarea>
<input type="button" value="Insert Smiley" 
onclick="insertAtCaret('<img src="image.jpg" height="150" width="260">',':)');" />

这是我尝试过的，但没有奏效......

【问题讨论】：

如果您向我们展示您目前拥有的东西会容易得多
对不起，我添加了我尝试过的内容

标签： javascript html button textarea

【解决方案1】：

你可以使用一些 jquery 并使用 .text() 函数

【讨论】：

【解决方案2】：

我认为没有办法将图像添加到 textarea .. 为什么要这样做？文本区域返回一个字符串，而不是图像形式的二进制。这就是为什么它有名称textarea！

如果您要将帖子上传到带有图片的博客，请将图片上传到您的服务器（这是最简单的方法，而不是最好的方法），将图片名称存储在变量中.现在，当您单击“发布”时，将所有数据存储在数据库中。

当你想显示图片时，只需获取所有与帖子相关的数据，以接收服务器上的图像位置。

如果您只想使用 JS，我建议您研究 Firebase。 Firebase 使用面向对象的数据库。他们有一些教程，你可以用他们的工具制作一个很棒的博客。如果您几乎没有编码经验，这也可能具有挑战性。 Firebase 在一定限度内是免费的...

我建议购买一本实体书来正确学习 JS，或者关于你想要创建的主题。例如。 SQL、PHP、HTML 等

编辑

不，<textarea> 不支持内联 HTML。它支持 CSS 样式。我记得很久以前在制作高级计算器时，我尝试过，但它不起作用。我最终制作了自己的编辑器，但这需要花费很多额外的时间，而且您需要知道如何使用 JS DOM 节点。

【讨论】：