富文本編輯器相信很多程序員都用過(guò)，但是如何自己制作一個(gè)仿富文本的編輯器來(lái)解決一些簡(jiǎn)單的或自定義的需求呢？下面給大家共享一個(gè)使用JavaScript實(shí)現(xiàn)在textarea光標(biāo)處插入指定文本內(nèi)容以及字符串。

點(diǎn)擊按鈕，可以把按鈕的內(nèi)容插入到textarea文本框內(nèi)光標(biāo)處，光標(biāo)默認(rèn)在文本框開(kāi)頭。

通過(guò)其他的js就可以實(shí)現(xiàn)文本框插入表情、選中文字加粗、內(nèi)容中插入圖片等等。

HTML代碼：

<form id="form1" name="form1" method="post" action="">
    <label>
        <textarea name="text" id="text" cols="45" rows="10">
        這是測(cè)試內(nèi)容，請(qǐng)?jiān)谌我馕恢貌迦雰?nèi)容。
        這是測(cè)試內(nèi)容，請(qǐng)?jiān)谌我馕恢貌迦雰?nèi)容。
        這是測(cè)試內(nèi)容，請(qǐng)?jiān)谌我馕恢貌迦雰?nèi)容。
        這是測(cè)試內(nèi)容，請(qǐng)?jiān)谌我馕恢貌迦雰?nèi)容。
        這是測(cè)試內(nèi)容，請(qǐng)?jiān)谌我馕恢貌迦雰?nèi)容。
        這是測(cè)試內(nèi)容，請(qǐng)?jiān)谌我馕恢貌迦雰?nèi)容。
        這是測(cè)試內(nèi)容，請(qǐng)?jiān)谌我馕恢貌迦雰?nèi)容。
        這是測(cè)試內(nèi)容，請(qǐng)?jiān)谌我馕恢貌迦雰?nèi)容。
        這是測(cè)試內(nèi)容，請(qǐng)?jiān)谌我馕恢貌迦雰?nèi)容。
        這是測(cè)試內(nèi)容，請(qǐng)?jiān)谌我馕恢貌迦雰?nèi)容。
        這是測(cè)試內(nèi)容，請(qǐng)?jiān)谌我馕恢貌迦雰?nèi)容。
        這是測(cè)試內(nèi)容，請(qǐng)?jiān)谌我馕恢貌迦雰?nèi)容。
        </textarea>

        <a id="insert" href="javascript:void(0);">{PHP code here}</a>
    </label>
</form>

Javascript代碼：

<script type="text/javascript">
    var text = document.getElementById('text');
    var insert = document.getElementById('insert');
    insert.onclick = function () {
        insertAtCursor(text, this.innerHTML);
    };

    function insertAtCursor(myField, myValue) {
        if (document.selection) {
            //IE support
            myField.focus();
            sel = document.selection.createRange();
            sel.text = myValue;
            sel.select();
        } else if (myField.selectionStart || myField.selectionStart == '0') {
            //MOZILLA/NETSCAPE support
            var startPos = myField.selectionStart;
            var endPos = myField.selectionEnd;
            var beforeValue = myField.value.substring(0, startPos);
            var afterValue = myField.value.substring(endPos, myField.value.length);

            myField.value = beforeValue + myValue + afterValue;

            myField.selectionStart = startPos + myValue.length;
            myField.selectionEnd = startPos + myValue.length;
            myField.focus();
        } else {
            myField.value += myValue;
            myField.focus();
        }
    }
</script>