简单的富文本编辑器实现——用jQuery实现在textarea光标处插入内容

最新推荐文章于 2025-11-11 15:33:05 发布

原创最新推荐文章于 2025-11-11 15:33:05 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#富文本编辑器 #jQuery

本文介绍了一个基于jQuery的实用插件，该插件允许开发者轻松地在文本域中指定位置插入文本内容。适用于需要在富文本编辑器中进行定制化文本插入操作的场景。

(function($)  
{  
 $.fn.extend(  
 {  
     insertContent : function(myValue, t)   
     {  
         var $t = $(this)[0];  
         if (document.selection) { // ie  
             this.focus();  
             var sel = document.selection.createRange();  
             sel.text = myValue;  
             this.focus();  
             sel.moveStart('character', -l);  
             var wee = sel.text.length;  
             if (arguments.length == 2) {  
                 var l = $t.value.length;  
                 sel.moveEnd("character", wee + t);  
                 t <= 0 ? sel.moveStart("character", wee - 2 * t  
                         - myValue.length) : sel.moveStart(  
                         "character", wee - t - myValue.length);  
                 sel.select();  
             }  
         } else if ($t.selectionStart  
                 || $t.selectionStart == '0') {  
             var startPos = $t.selectionStart;  
             var endPos = $t.selectionEnd;  
             var scrollTop = $t.scrollTop;  
             $t.value = $t.value.substring(0, startPos)  
                     + myValue  
                     + $t.value.substring(endPos,  
                             $t.value.length);  
             this.focus();  
             $t.selectionStart = startPos + myValue.length;  
             $t.selectionEnd = startPos + myValue.length;  
             $t.scrollTop = scrollTop;  
             if (arguments.length == 2) {  
                 $t.setSelectionRange(startPos - t,  
                         $t.selectionEnd + t);  
                 this.focus();  
             }  
         } else {  
             this.value += myValue;  
             this.focus();  
         }  
     }  
 })  
})(jQuery);

上面代码放于jQuery的入口函数内部即可。

用法：通过textarea直接调用此方法即可，

如在id为textarea1的文本域插入字符串123：

$(#textarea1).insertContent("123");