将 img 标签添加到文本区域以输入到文本文件中答案

【问题标题】：Adding img tag to text area for input into a text file将 img 标签添加到文本区域以输入到文本文件中
【发布时间】：2018-05-25 11:41:50
【问题描述】：

我正在尝试制作一个将 img 标签输入到文本区域的按钮，以便我可以手动输入图像 src，然后在我提交表单后图像标签将保存到文本文档中。

我已经设置好了，所以一切正常，除了当单击按钮添加 img 标记时，它会在 textarea 标记之间的页面上添加一个 html 元素。我想要一个包含"<img src='' alt='' title=''>" 的字符串显示在文本区域内。

我将如何使用 jquery 来做到这一点？

当前代码（一些冗余变量等，试图修复错误）：

#img-insert-button是有问题的按钮，供参考。

 <body style="background-color:#131313; color: white; font-family: 'Gadugi'; padding: 10px;">
    <script>
        var str1 = "<";
        var str2 = "img src='images/Computer.jpeg' alt='pc image' title=''";
        var str3 = ">";
        var str4 = str1.concat(str2);
        var img_tag = str4.concat(str3);
        $(document).ready(function(){
          $("#img-insert-button").click(function(){
              $('#article-main-body').append(img_tag);
          });
        });
    </script>

    <a class="home-link" href="index.php">Go Home</a>
    <div class="heading">Write a Post</div>
    <button id="img-insert-button">Insert Image</button>
    <form method="post" action="create-article.php" enctype='multipart/form-data'>
        <table style="width: 100%;">
            <tr>
                <td>
                    <label>Post Image</label>
                </td>
                <td>
                    <input type="file" name="image" required="" placeholder="Article Image" oninvalid="this.setCustomValidity('Please upload an article image')">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Title</label>
                </td>
                <td>
                    <input name="post-title" type="text" maxlength="50">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Sub-heading</label>
                </td>
                <td>
                    <input type="text" name="post-subheading" maxlength="130">
                </td>
            </tr>
            <tr>
                <td>
                    <label>Main Body</label>
                </td>
                <td>
                    <textarea name="post-main-body" style="height: 300px; width: 100%;" id="article-main-body"></textarea>
                </td>
            </tr>
        </table>
        <button type="submit" name="submit-button" style="margin: 5px;">Create Post</button>
    </form>
</body>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您不能附加到文本区域，您需要将其更改为value

尝试改变

 $('#article-main-body').append(img_tag);

到

 $('#article-main-body').val(function(_, currVal){
    return currVal + img_tag;
 });

【讨论】：