如何添加在TextArea中键入的按钮？

Question

我有一个文本区域，管理员可以在其中将帖子写到页面中。 这样做的方式是您必须手动键入html代码（例如<p>New entry</p>）。

为了简化操作，我想要一个用于创建标签的按钮（就像任何论坛的粗体，斜体等一样）

我已经搜索了方法，但是没有用。

            <label class="control-label col-md-2">Report: (Use HTML code)</label>
            <div class="col-md-10">
                <script type="text/javascript">

                    function formatText() {
                        var selectedText = document.selection.createRange().text;

                        if (selectedText != "") {
                            var newText = "<p>" + selectedText + "</p>";
                            document.selection.createRange().text = newText;
                        }
                    }
                </script>
                <input type="button" value="create p" onclick="formatText();" />

                @Html.TextAreaFor(model => model.Content, new { htmlAttributes = new { @class = "form-control" } })

                @Html.ValidationMessageFor(model => model.Content, "", new { @class = "text-danger" })
            </div>
        </div>

我以为这可以用，但是什么也没做，可能是因为当我按下按钮时它停止选择文本区域。

此外，不用担心@Html.TextAreaFor，正常的textarea标签当然也可以。

Answer 1

最好的方法是您可以使用iframe使其正常工作！ 例如：-

gur.com/6NNGC.png

Answer 2

上面代码的结果：-