Ext.ux.plugins.EditAreaEditor

[ludoo]

Based on the Simple Tiny Mce Plugin, 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)



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]

Can we have Ext.ux.EditArea.js?
editarea is very interesting, and I can not doing that, Can you help me?

[Chida]

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.
Please inform all of us as you did. An example.
Thank you

[ludoo]

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]

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]

Has anyone used the EditArea plugin successfully to get posted results back?

[DrAries77]

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]

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]

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