围绕来自文本区域的选定文本包装生成的内容？

Question

我正在尝试为我正在处理的项目提供文本编辑器，但在从文本区域中选择文本然后单击按钮将文本环绕在其周围时，我陷入了困境。

示例： 我会有一个按钮说Insert -，一旦单击并选择了文本 select me 会变成-select me-

这是我当前的 HTML (jsfiddle mirror)：

<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>

这是我当前的 CSS：

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;
        }

我不知道从哪里开始使用 javascript。

Answer 1

JSFiddle - http://jsfiddle.net/bp0cs3ts/10/

HTML

<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>

Javascript

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;
    }
}