PDA

View Full Version : Inline HtmlEditor - Howto?



spsoni
20 Sep 2009, 7:11 PM
Hi All,

I am looking for ideas, how I can implement inline HtmlEditor.

In any Html Rendering component, we should be able to click on some div or paragraph and inline HtmlEditor should wrap content of clicked div/paragraph. This way we should load only part of html content and edit and update part of the overall content.

Is it possible?

In above explanation, I used the click event to load the part (div/paragraph) of the overall content, as an example to trigger inline HtmlEditor.

Another event source could be somewhat similar to office 2007, where as soon we select some text, we can see html toolbar right above the selected text.

So, either event source based inline HtmlEditor possible? Please advice or suggest other event sources?

Please guide me steps, I could follow to implement the same.

aconran
21 Sep 2009, 4:21 AM
Use an Ext.Editor which uses an Ext.form.HtmlEditor as its field configuration.

You can then use that editor instance to begin editing on a particular element:


myEditor.startEdit(myEl);

Condor
21 Sep 2009, 4:38 AM
The fact that HtmlEditor doesn't fire events for Enter and Esc keys does require you to create a way to apply or cancel the entered text.

Example:

var ed = new Ext.Editor(new Ext.form.HtmlEditor({
listeners: {
render: function(c){
c.tb.add('->');
var b1 = c.tb.add({
text: 'Apply',
handler: function(){
ed.completeEdit();
}
}), b2 = c.tb.add({
text: 'Cancel',
handler: function(){
ed.cancelEdit();
}
});
c.tb.doLayout();
Ext.fly(b1.btnEl).setStyle('background', 'transparent');
Ext.fly(b2.btnEl).setStyle('background', 'transparent');
}
}
}),{
autoSize: 'width',
updateEl: true
});
Ext.select('.editable').unselectable();
Ext.getBody().on('dblclick', function(e, target) {
ed.startEdit(target);
}, null, {delegate: '.editable'});

(this example expects all editable element to be marked with class="editable")

aconran
21 Sep 2009, 4:41 AM
Thanks for the drop in example Condor!! :D

mschwartz
21 Sep 2009, 7:59 AM
This is quite awesome!

Is there anyway to trap keystrokes from the editor? For example, I'd like to have ctrl-s fire and event or call my callback so I can save the contents of the editor, ctrl-w to close the editor (assume it's in a tab or something), ESC to cancel, and so on.

spsoni
21 Sep 2009, 4:39 PM
The fact that HtmlEditor doesn't fire events for Enter and Esc keys does require you to create a way to apply or cancel the entered text.

(this example expects all editable element to be marked with class="editable")

Hi,

Thank you very much. This is what exactly I was looking for.

I am very new to ExtJS, please bear with me.

I am now trying to build this as a panel extension.

So that, whatever content/html we put into a panel, we should be able to make certain part of that content/html editable (e.g. using class="editable").

Following is my code, but it is not working properly, can anyone help me?

I would like to do inline editing, rather than seperate htmleditor popping up anywhere.


/**
* Ext.ux.form.SmartEditor Extension Class for Ext 3.x Library
*
* @author Sury Prakash Soni
* @version Ext.ux.form.SmartEditor.js
*
* @class Ext.ux.form.SmartEditor
* @extends Ext.Container
*/

//Creating namespace.
//Ext.ns("Ext.ux");

//Extending the container class.
Ext.ux.form.SmartEditor = Ext.extend(Ext.Panel, {
//contructor
initComponent:function(config) {
//load user defined configurations.
Ext.apply(this, config);
// call parent initComponent
Ext.ux.form.SmartEditor.superclass.initComponent.call(this);

}, // end of function initComponent

//OnRender override
onRender:function(ct, position) {
//call parent onRender
Ext.ux.form.SmartEditor.superclass.onRender.call(this, ct, position);

//now load editor instance
ed = new Ext.Editor(new Ext.form.HtmlEditor({
listeners: {
render: function(c){
c.tb.add('->');
var b1 = c.tb.add({
text: 'Apply',
handler: function(){
ed.completeEdit();
}
}), b2 = c.tb.add({
text: 'Cancel',
handler: function(){
ed.cancelEdit();
}
});
c.tb.doLayout();

//Following do not work in firefox for some reason?

//Ext.fly(b1.btnEl).setStyle('background', 'transparent');
//Ext.fly(b2.btnEl).setStyle('background', 'transparent');
}
}
}),{
//autoSize: 'width',
updateEl: true
});

Ext.select('.editable').unselectable();
Ext.getBody().on('dblclick', function(e, target) {
ed.startEdit(target);
}, null, {delegate: '.editable'});

}, // end of function onRender
});

// register xtype
Ext.reg('smarteditor', Ext.ux.form.SmartEditor);

// end of file

Condor
22 Sep 2009, 12:59 AM
Try:

Ext.ux.form.SmartEditor = Ext.extend(Ext.Panel, {
afterRender: function(container){
Ext.ux.form.SmartEditor.superclass.afterRender.call(this, container);
this.editor = new Ext.Editor(new Ext.form.HtmlEditor({
listeners: {
render: function (c) {
c.tb.add('->');
var b1 = c.tb.add({
text: 'Apply',
handler: function () {
this.editor.completeEdit();
},
scope: this
}),
b2 = c.tb.add({
text: 'Cancel',
handler: function () {
this.editor.cancelEdit();
},
scope: this
});
c.tb.doLayout();
Ext.fly(b1.btnEl).setStyle('background', 'transparent');
Ext.fly(b2.btnEl).setStyle('background', 'transparent');
},
scope: this
}
}), {
updateEl: true
});
Ext.select('.editable', this.body).unselectable();
this.mon(body, 'dblclick', startEdit, this, {delegate: '.editable'});
},
startEdit: function(e, target){
this.editor.startEdit(target);
},
onDestroy: function(){
Ext.ux.form.SmartEditor.superclass.onDestroy.call(this);
this.editor.destroy();
}
});
Ext.reg('smarteditor', Ext.ux.form.SmartEditor);

spsoni
22 Sep 2009, 4:04 PM
this.mon(body, 'dblclick', startEdit, this, {delegate: '.editable'});

Code is failing on above line.

It works with the following update:



this.mon(this.body, 'dblclick', this.startEdit, this, {delegate: '.editable'});
Many thanks once again.

Code is much clean now and works.





Ext.fly(b2.btnEl).setStyle('background', 'transparent');


Above line of code still fails, I am using ExtJS 3.0. When I comment out that line of code, it works.

Condor
22 Sep 2009, 10:27 PM
This is Ext 3.0 code. I assume you are using Ext 2.x?

ps. If this is correct, you posted in the wrong forum.