InsertAtCursort for Textarea

[mschering]

Here's a plugin for the textarea field that adds a function insertAtPosition(text) to add some text at the cursor position. Hopefully this is helpful to someone.

Just add "plugins:new InsertAtCursorTextareaPlugin()" to the textarea's config object.

/**
 * Copyright Intermesh
 *
 * This file is part of Group-Office. You should have received a copy of the
 * Group-Office license along with Group-Office. See the file /LICENSE.TXT
 *
 * If you have questions write an e-mail to info@intermesh.nl
 *
 * @version $Id: InsertAtCursorTextareaPlugin.js 2353 2009-04-15 11:05:51Z mschering $
 * @copyright Copyright Intermesh
 * @author Merijn Schering <mschering@intermesh.nl>
 */

Ext.namespace("Ext.ux"); 
Ext.ux.InsertAtCursorTextareaPlugin = function (){
    return {
        init : function(textarea){
            textarea.insertAtCursor = function(v) {
                if (Ext.isIE) {
                    this.el.focus();
                    var sel = document.selection.createRange();
                    sel.text = v;
                    sel.moveEnd('character',v.length);
                    sel.moveStart('character',v.length);
                }else
                {
                    var startPos = this.el.dom.selectionStart;
                    var endPos = this.el.dom.selectionEnd;
                    this.el.dom.value = this.el.dom.value.substring(0, startPos)
                    + v
                    + this.el.dom.value.substring(endPos, this.el.dom.value.length);

                    this.el.focus();                
                    this.el.dom.setSelectionRange(endPos+v.length,endPos+v.length);
                }
            }
        }
    }
}; 

[bt_bruno]

Great! But it would be better as an override... Than we just would have to include it and the method would be avaible "automatically".

[mschering]

Yes you could also do:

Ext.override(Ext.form.Textarea,{
insertAtCursor : function(v) {
                if (Ext.isIE) {
                    this.el.focus();
                    var sel = document.selection.createRange();
                    sel.text = v;
                    sel.moveEnd('character',v.length);
                    sel.moveStart('character',v.length);
                }else
                {
                    var startPos = this.el.dom.selectionStart;
                    var endPos = this.el.dom.selectionEnd;
                    this.el.dom.value = this.el.dom.value.substring(0, startPos)
                    + v
                    + this.el.dom.value.substring(endPos, this.el.dom.value.length);

                    this.el.focus();                
                    this.el.dom.setSelectionRange(endPos+v.length,endPos+v.length);
                }
            }
}
); 

[baboen]

hi, I'm new to ExtJs and currently is using ExtJs 4 b3.
I've this function is not working for ExtJs 4 b3. It keeps saying that "selection" is undefined. Even I've used firebug and write it manually in the console.

it couldn't found the

obj.selection.

or even

obj.selection.createRange();

What I actually need is to create a simple WYSIWYG widgets purely using ExtJs if possible or by some DOM help.

[baboen]

also solved with ExtJs4. The DOM is somewhat different. So I refactor my code and access the dom element from the document, not by selecting the textArea then travers to the text/value.

..........................
            var document_id = this.getFocusEl().id;
            var text_field = document.getElementById(document_id);
            var startPos = text_field.selectionStart;
            var endPos = text_field.selectionEnd;
............................

thx anyway

[dorgan]

good job everyone....I just found this plugin/override and it has minimized some of my code by probably a couple of dozen lines or so as I use functionality like this in multiple places...

Great work!!

[ganesh.gk31]

Not Working for IE 8, can any one please provide solution. Thanks in Advance