1. #1
    Sencha User george.antoniadis's Avatar
    Join Date
    Jul 2007
    Posts
    107
    Vote Rating
    1
    george.antoniadis is on a distinguished road

      0  

    Default [2.x] Ext.ux.plugins.HtmlEditorImageInsert

    [2.x] Ext.ux.plugins.HtmlEditorImageInsert


    Ext.ux.plugins.HtmlEditorImageInsert v.0.1

    This is a very first draft of a plugin I needed for the HtmlEditor.
    Allows the user to add images in the editor by specifying their URL.

    Example:
    http://noodles.gr/resources/javascri...ageInsert.html

    Usage:
    Code:
    <script type="text/javascript">
    Ext.onReady(function(){
        Ext.QuickTips.init();
    
        new Ext.FormPanel({
            renderTo: 'form',
            defaultType: 'textfield',
            items: [{
                xtype:'htmleditor',
                    fieldLabel:'some label',
                    width: 650,
                    height: 350,
                    plugins: new Ext.ux.plugins.HtmlEditorImageInsert({
                        popTitle: 'Image url?',
                        popMsg: 'Please insert an image URL...',
                        popWidth: 400,
                        popValue: 'http://www.google.gr/intl/en_com/images/logo_plain.png'
                    })
                }
            ]
        });
    }); 
    </script>
    Ext.ux.plugins.HtmlEditorImageInsert.js:
    Code:
    Ext.namespace('Ext.ux', 'Ext.ux.plugins');
    
    Ext.ux.plugins.HtmlEditorImageInsert = function(config) {
        
        config = config || {};
        
        Ext.apply(this, config);
        
        this.init = function(htmlEditor) {
            this.editor = htmlEditor;
            this.editor.on('render', onRender, this);
        };
        
        this.imageInsertConfig = {
            popTitle: config.popTitle || 'Image URL',
            popMsg: config.popMsg || 'Please select the URL of the image you want to insert:',
            popWidth: config.popWidth || 350,
            popValue: config.popValue || ''
        }
        
        this.imageInsert = function(){
            Ext.MessageBox.show({
                title: this.imageInsertConfig.popTitle,
                msg: this.imageInsertConfig.popMsg,
                width: this.imageInsertConfig.popWidth,
                buttons: Ext.MessageBox.OKCANCEL,
                prompt: true,
                value: this.imageInsertConfig.popValue,
                scope: this,
                fn: function(btn, text){ if ( btn == 'ok' ) this.editor.relayCmd('insertimage', text); }
           });
        }
        
        function onRender() {
            if (!Ext.isSafari) {
                this.editor.tb.add({
                    itemId : 'htmlEditorImage',
                    cls : 'x-btn-icon x-edit-insertimage',
                    enableToggle: false,
                    scope: this,
                    handler:function(){ this.imageInsert(); },
                    clickEvent:'mousedown',
                    tabIndex:-1
                });
            }
        }
        
    }
    All plugin params are optional and for now are only used for the prompt message box.
    This is very basic but should work ok...

    I'm trying to make this play nice with something like JSakalos' fileTree thingie...
    If anyone has any suggestions on the structure of the plugin please let me know cause it's my first attempt at one and I ain't sure it's the right way to go...

    based on cmendez21's post...

  2. #2
    Ext User tidal's Avatar
    Join Date
    Apr 2007
    Location
    Berlin / Germany
    Posts
    50
    Vote Rating
    0
    tidal is on a distinguished road

      0  

    Default


    Hi!

    This is very basic but should work ok...
    Thx a lot, this very cool

    Basics teach everybody a lot more then featuritis

    So don

  3. #3
    Ext User
    Join Date
    Sep 2007
    Posts
    2
    Vote Rating
    0
    zican is on a distinguished road

      0  

    Default insert image at the current cursor position

    insert image at the current cursor position


    I change the source a little
    insert image at the current cursor position
    when MessageBox shown, focus in Editor losted
    IE & FF OK
    please fix my poor english skill, sorry all
    Code:
        this.imageInsert = function(){
            var range;
            if(Ext.isIE) range = this.editor.doc.selection.createRange();
            Ext.MessageBox.show({
                title: this.imageInsertConfig.popTitle,
                msg: this.imageInsertConfig.popMsg,
                width: this.imageInsertConfig.popWidth,
                buttons: Ext.MessageBox.OKCANCEL,
                prompt: true,
                value: this.imageInsertConfig.popValue,
                scope: this,
                fn: function(btn, text) { 
    	    if ( btn == 'ok' ) {
    	        if(Ext.isIE) range.select();
    	        this.editor.relayCmd('insertimage', text); 
    	    }
    	}
           });
        }

  4. #4
    Sencha User
    Join Date
    Apr 2007
    Posts
    90
    Vote Rating
    0
    marcing is on a distinguished road

      0  

    Default


    Is there any way to put the image button before the source edit button?

    I noticed that You htmleditor generates valid xhtml (<span style="">), while mine generates "<font face="times new roman">", any ideas why could it be?

    EDIT: I know the solution for the font/span issue - the problem was the "black theme", others work well.

  5. #5
    Ext User
    Join Date
    Apr 2007
    Posts
    132
    Vote Rating
    0
    apaa is on a distinguished road

      0  

    Default


    Maybe add the tooltip to the button make sense,so I add some code like this:
    Code:
        function onRender() {
            if (!Ext.isSafari) {
                this.editor.tb.add({
                    itemId : 'htmlEditorImage',
                    cls : 'x-btn-icon x-edit-insertimage',
                    enableToggle: false,
                    scope: this,
                    handler:function(){ this.imageInsert(); },
                    clickEvent:'mousedown',
                    tooltip : config.buttonTip || {
    		title: 'Insert Image',
    		text: 'Insert Image to htmlEditor',
    		cls: 'x-html-editor-tip'
    	   }
                    tabIndex:-1
                });
            }
        }

  6. #6
    Ext User
    Join Date
    Nov 2007
    Posts
    41
    Vote Rating
    0
    fgerneth is on a distinguished road

      0  

    Thumbs up


    Looks quite good for me & i like the idea of the imageselect adapter. Just one thing which would be helpfull, is to be able to set some css-properties of the window (like the textflow) so that you can really include pictures into your text without having these breaks in your text. Anyway good work

  7. #7
    Sencha User george.antoniadis's Avatar
    Join Date
    Jul 2007
    Posts
    107
    Vote Rating
    1
    george.antoniadis is on a distinguished road

      0  

    Default


    I'm trying to figure out a way to add a plugin for the plugin :P
    I've finished a crude and hard-coded file manager instead of the "type-a-url" aproach but needs to be stripped down a bit and made into an actuall plugin.

    Image properties is a must for me too... but still need the plugin-in-plugin way figured >_<

  8. #8
    Ext User
    Join Date
    Apr 2007
    Posts
    132
    Vote Rating
    0
    apaa is on a distinguished road

      0  

    Default


    desired to see it....

  9. #9
    Sencha User fangzhouxing's Avatar
    Join Date
    Mar 2007
    Posts
    464
    Vote Rating
    1
    fangzhouxing is on a distinguished road

      0  

    Default


    This plugin is very useful, but I encountered a problem:
    My htmleditor is in a popup window, when I click the insert image button, the MessageBox show behind the popup window.
    How can I bringit to Front?
    I have used WindowMgr.bringToFront method, but not succeed!
    Can anyone help me ? Thanks in advance.

  10. #10
    Sencha User george.antoniadis's Avatar
    Join Date
    Jul 2007
    Posts
    107
    Vote Rating
    1
    george.antoniadis is on a distinguished road

      0  

    Default


    I've got the same exact problem when I click the button and try to load another window... :/

    I've tried everything from css z-index, window manager visibility and stuff... no luck...

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar