Page 1 of 3 123 LastLast
Results 1 to 10 of 23

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

  1. #1
    Sencha User george.antoniadis's Avatar
    Join Date
    Jul 2007
    Posts
    107
    Vote Rating
    1
      0  

    Default [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
      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
      0  

    Default 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
    91
    Vote Rating
    0
      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
      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
      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
      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
      0  

    Default

    desired to see it....

  9. #9
    Sencha User fangzhouxing's Avatar
    Join Date
    Mar 2007
    Posts
    471
    Vote Rating
    2
      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
      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...

Page 1 of 3 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •