Javascript 是否将生成的内容环绕文本区域中选定的文本？

我正试图为我正在从事的一个项目设计一个文本编辑器，当涉及到从文本区域中选择文本，然后点击一个按钮将文本环绕在其周围时，我陷入了困境

例如： 我会有一个按钮说，

Insert-

一旦点击并选中文本

选择我

将变成

-选择我

以下是我当前的HTML（）：

我不知道从哪里开始使用javascript来实现这一点。

JSFiddle-

HTML

---

这里有一个答案@LShetty，这是很久以前写的，也许有一个jQuery方法这似乎也不适用于

textrea

No，因为jQuery只是JS的一个包装器@ManuelBitto我已经说过

我不知道从哪里开始使用javascript来实现这一点。

<div class="container wrapper">
    <form class="create post" method="post" action="action.php?a=createPost">
        <h1>Create a Post</h1>
        <input name="title" type="text" placeholder="Title" autocomplete="off" autofocus="autofocus" maxlength="100" required/>
        <textarea name="introduction" placeholder="Introduction" maxlength="255"></textarea>
        <ul class="options">
            <li><p>Article Edits:</p></li>
            <li>
                <a class="fa fa-italic" trigger="italic">icon-placeholder</a>
            </li>
        </ul>
        <textarea name="content" placeholder="Article" required="required"></textarea>
        <input type="submit" value="Submit for Review" />
    </form>
</div>

form.create.post {
    height:auto;
    overflow:auto;
}
    form.create.post > h1 {
        font-weight:800;
        font-size:46px;
        letter-spacing:-5px;
        text-transform:uppercase;
    }
    form.create.post > input,
    form.create.post > textarea {
        display:block;
        margin:0 0 5px;
        padding:5px 10px;
        border:solid 1px #CCC;
        border-radius:2px;
    }
    form.create.post > input[name=title] {
        width:50%;
    }
    form.create.post > input[type=submit] {
        width:25%;
        background-image:linear-gradient(#F7F7F7,#E7E7E7);
    }
    form.create.post > textarea {
        width:calc(100% - 22px);
    }
    form.create.post > textarea[name=content] {
        height:300px;
    }
    /*-- text editor --*/
    form.create.post > ul {
        height:auto;
        overflow:auto;
        margin-bottom:5px;
        list-style-type:none;
    }
        form.create.post > ul > li {
            display:inline-block;
        }
        form.create.post > ul > li > p {
            padding:5px;
        }
        form.create.post > ul > li > a {
            display:block;
            padding:5px;
            cursor:pointer;
        }

<div class="container wrapper">
    <form class="create post" method="post" action="action.php?a=createPost">
        <h1>Create a Post</h1>
        <input name="title" type="text" placeholder="Title" autocomplete="off" autofocus="autofocus" maxlength="100" required/>
        <textarea name="introduction" placeholder="Introduction" maxlength="255"></textarea>
        <ul class="options">
            <li><p>Article Edits:</p></li>
            <li>
                <a class="fa fa-italic" trigger="italic">icon-placeholder</a>
            </li>
        </ul>
            <input type="button" value="Insert -" onclick="insert('-');" />
        <textarea name="content" id="content" placeholder="Article" required="required"></textarea>
        <input type="submit" value="Submit for Review" />
    </form>
</div>

function insert(val) {
    var editor = document.getElementById("content");
    var editorHTML = editor.value;
    var selectionStart = 0, selectionEnd = 0;
    if (editor.selectionStart) selectionStart = editor.selectionStart;
    if (editor.selectionEnd) selectionEnd = editor.selectionEnd;

    if (selectionStart != selectionEnd) {
        var editorCharArray = editorHTML.split("");
        editorCharArray.splice(selectionEnd, 0, val);
        editorCharArray.splice(selectionStart, 0, val); //must do End first
        editorHTML = editorCharArray.join("");
        editor.value = editorHTML;
    }
}