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". :D

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