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

Question

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

同时，我想让她尽可能简单。 所以我想在她上传博客的页面上添加一个按钮，将一个基本的 img src html 代码部分添加到她只需要编辑相册和照片名称的 textarea 中。

经过一番研究，我发现了这一点：

但是每次我向其中添加 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">',':)');" />

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

Answer 1

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

Answer 2

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

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

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

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

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

编辑

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