PDA

View Full Version : Ext.ux.plugins.EditAreaEditor



ludoo
14 Jan 2008, 5:48 AM
Based on the Simple Tiny Mce Plugin (http://extjs.com/forum/showthread.php?t=22965), i do the EditArea plugin.

It's a first version. I hope realized a "full window size" version.
Destroy must be reviewed (same pb as tinyMCE plugin)

http://img205.imageshack.us/img205/7935/editareapluginzi2.png (http://imageshack.us)

Code JS :


/*
* EditArea Plugin
* HTML sample :
<!-- Editeur HTML : EditArea (v0.7) -->
<script type="text/javascript" src="ux/HtmlEditor/editarea/edit_area/edit_area_full.js"></script>
<script type="text/javascript" src="ux/HtmlEditor/Ext.ux.EditArea.js"></script>
*
* JS Sample :
// EditArea configs
editAreaConf1={
start_highlight: true // if start with highlight
,allow_resize: "both"
,allow_toggle: true
,language: "en"
,syntax: "php"
};

editAreaConf2={
start_highlight: true
,allow_toggle: false
,language: "en"
,syntax: "html"
,toolbar: "search, go_to_line, |, undo, redo, |, select_font, |, syntax_selection, |, change_smooth_selection, highlight, reset_highlight, |, help"
,syntax_selection_allow: "css,html,js,php,python,vb,xml,c,cpp,basic,pas,brain"
,is_multi_files: true
,EA_load_callback: "editAreaLoaded"
};

editAreaConf3={
start_highlight: true
,font_size: "8"
,font_family: "verdana, monospace"
,allow_resize: "y"
,allow_toggle: false
,language: "fr"
,syntax: "css"
,toolbar: "new_document, save, load, |, charmap, |, search, go_to_line, |, undo, redo, |, select_font, |, change_smooth_selection, highlight, reset_highlight, |, help"
,load_callback: "my_load"
,save_callback: "my_save"
,plugins: "charmap"
,charmap_default: "arrows"

};

editAreaConf4={
//start_highlight: true // if start with highlight
//,font_size: "10"
,allow_resize: "no"
,allow_toggle: true
,language: "de"
,syntax: "python"
,load_callback: "my_load"
,save_callback: "my_save"
,display: "later"
,replace_tab_by_spaces: 4
,min_height: 350
};
// callback functions
function my_save(id, content){
alert("Here is the content of the EditArea '"+ id +"' as received by the save callback function:\n"+content);
}
function my_load(id){
editAreaLoader.setValue(id, "The content is loaded from the load_callback function into EditArea");
}

var localForm = new Ext.form.FormPanel({
....
,items: [{
xtype:'textarea'
,fieldLabel:'Entete'
,name:'entete'
,anchor:'100%'
,height:100
,plugins:new Ext.ux.plugins.EditAreaEditor(editAreaConf1)
}]});
*/
Ext.namespace('Ext.ux.plugins');

Ext.ux.plugins.EditAreaEditor = function(config){
Ext.apply(this, {config:config});
};

Ext.extend(Ext.ux.plugins.EditAreaEditor, Ext.util.Observable, {
config:{start_highlight: true,allow_toggle: false,language: "en",syntax: "php"}
,onRender:function(o){
Ext.apply(this.config, { id: o.id});
editAreaLoader.init(this.config);
//tinyMCE.init(this.config);
//tinyMCE.execCommand('mceAddControl', false, o.id);
}
,init:function(textarea) {
textarea.on('render', this.onRender, this);
Ext.apply(textarea, {
setValue:textarea.setValue.createSequence(function(ct, position) {
//alert('update:'+textarea.id);
editAreaLoader.setValue(textarea.id, textarea.getValue())
})
,beforeDestroy:textarea.beforeDestroy.createSequence(function(ct, position) {
//if (tinyMCE.getInstanceById(textarea.id) != null){
//alert('destroy: '+textarea.id);
// TO DO: fond the problem
//tinyMCE.execCommand( 'mceRemoveControl', false, textarea.id );
}
//}
)
});
}
});

// register xtype
Ext.reg('editarea', Ext.ux.plugins.EditAreaEditor);


HTML sample :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>EditArea plugin</title>

<link rel="stylesheet" type="text/css" href= "../ext-2.0/resources/css/ext-all.css">

<!-- extjs: -->
<script type="text/javascript" src="../ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-2.0/ext-all.js"></script>

<!-- editarea-plugin: -->
<script type="text/javascript" src="../../editors/editarea_0_7/edit_area/edit_area_full.js"></script>
<script type="text/javascript" src="Ext.ux.EditArea.js"></script>

<script type="text/javascript">

// EditArea configs
var editAreaConf1={
start_highlight: true // if start with highlight
,allow_resize: "both"
,allow_toggle: false
,language: "en"
,syntax: "php"
//,debug: true
};

Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');

button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
id:'hello-win',
layout:'fit',
width:600,
height:300,
closeAction:'hide',
plain: true,
items: new Ext.form.FormPanel({
id : 'myForm'
,items: [{
xtype:'textarea'
,fieldLabel:'MyText'
,name:'my text'
,anchor:'100%'
,height:200
,plugins:new Ext.ux.plugins.EditAreaEditor(editAreaConf1)
}]}),

buttons: [{
text:'Submit',
disabled:true
},{
text: 'Close',
handler: function(){
win.hide();
}
}]
});
}
win.show(this);
});
});
</script>
</head>
<body>

<input type="button" id="show-btn" value="Show Window"/>

</body>
</html>

Chida
28 May 2008, 8:43 AM
Can we have Ext.ux.EditArea.js?
editarea is very interesting, and I can not doing that, Can you help me?

Chida
28 May 2008, 1:59 PM
Found:)


<script type="text/javascript">
Ext.namespace('Ext.ux.plugins');

Ext.ux.plugins.EditAreaEditor = function(config){
Ext.apply(this, {config:config});
};

Ext.extend(Ext.ux.plugins.EditAreaEditor, Ext.util.Observable, {
config:{start_highlight: true,allow_toggle: false,language: "it",syntax: "php"}
,onRender:function(o){
Ext.apply(this.config, { id: o.id});
editAreaLoader.init(this.config);
//tinyMCE.init(this.config);
//tinyMCE.execCommand('mceAddControl', false, o.id);
}
,init:function(textarea) {
textarea.on('render', this.onRender, this);
Ext.apply(textarea, {
setValue:textarea.setValue.createSequence(function(ct, position) {
//alert('update:'+textarea.id);
editAreaLoader.setValue(textarea.id, textarea.getValue())
})
,beforeDestroy:textarea.beforeDestroy.createSequence(function(ct, position) {
//if (tinyMCE.getInstanceById(textarea.id) != null){
//alert('destroy: '+textarea.id);
// TO DO: fond the problem
//tinyMCE.execCommand( 'mceRemoveControl', false, textarea.id );

}
//}
)
});

}

});

// register xtype
Ext.reg('editarea', Ext.ux.plugins.EditAreaEditor);
</script>


I hope realized a "full window size" version, but I can't.:((
I visit your site and you use a "full window size" in your project.=D>
Please inform all of us as you did. An example.
Thank you

ludoo
29 May 2008, 1:07 PM
This version works as a field so it has not the ability to be full-window
What you see on the picture is another version based on a window.
But (like other iframe based wysiwyg) there is a lot of problem like correct resizing...
It's pretty unstable for the moment so i prefer share a near-stable code :)

Chida
29 May 2008, 1:19 PM
a solution is this:

items: [{
xtype:'textarea'
,name:'my text'
,width:'100%'
,height: '100%'
,plugins:new Ext.ux.plugins.EditAreaEditor(editAreaConf1)
}]

I use this in a layout window!

btallman
6 Jul 2008, 1:19 PM
Has anyone used the EditArea plugin successfully to get posted results back?

DrAries77
16 Oct 2008, 12:52 AM
Dear All,
I have any idea if someone has resolved this issue, so I post my solution.

You can add this function inside
Ext.apply(textarea, {
....
setTextAreaValue:textarea.getValue.createSequence(function(ct, position) {
textarea.setValue(editAreaLoader.getValue(textarea.id));
})

....

So, to get the real textArea value you have to call setTextAreaValue before call textArea.getValue().

Have you found something better?
Bye.

gaellafond
21 Aug 2011, 9:26 PM
Hello,

I developed my own version of EditArea Field. It's quite stable, it can takes the full window width, handle setValue and getValue. It simply extends TextArea Field and should allow you to control it as it was a simple TextArea.

I also manage to make it works with multiple instances. It's totally awful in IE 6 and 7, works ok in IE 8 and 9, it has some "Ghosting" artefact in Chrome and works quite nice in FF. Most issues are related to EditArea itself so there is nothing I can do to fix it.

If someone is interested, ask me and I will upload it.

Gael

soeren
30 Jan 2012, 12:15 PM
Hi Gael,

I'm interested in your version of the EditArea UX for ExtJS, because I use it in my eXtplorer script. Could you please upload it here?

Thank you!

ciao, Sören