What's New?

[CLOSED] [0.82] Custom tool in HTMLEditor to open window and insert text

  1. #1
    May 27, 2010, 2:19 PM

    [CLOSED] [0.82] Custom tool in HTMLEditor to open window and insert text

    I am trying to implement custom tool in HTMLEditor. The tool will pop up a Ext window and allow user to select something and then insert it into the HtmlEditor. A couple of issues:

    1. The window is shown BEHIND the HtmlEditor.
    2. HtmlEditor.insertAtCursor does not work since the htmleditor looses focus when the window is opened.

    
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>

    <script type="text/javascript">
        Ext.ns('Ext.ux.form.HtmlEditor');
        Ext.ux.form.HtmlEditor.Test = Ext.extend(Ext.util.Observable, {

            // private
            init: function(cmp) {
                this.cmp = cmp;
                this.cmp.on('render', this.onRender, this);
            },
            // private
            onRender: function() {
                var cmp = this.cmp;
                var btn = this.cmp.getToolbar().addButton({
                    iconCls: 'icon-pencil',
                    handler: function() {
                        if (!this.win) {
                            this.win = new Ext.Window({
                                title: 'Test',
                                closeAction: 'hide',
                                width: 300,
                                height: 300,
                                buttons: [{
                                    text: 'Insert',
                                    handler: function() {
                                        this.cmp.insertAtCursor('Success');
                                        this.win.hide();
                                    },
                                    scope: this
                                }, {
                                    text: 'Cancel',
                                    handler: function() {
                                        this.win.hide();
                                    },
                                    scope: this
}]
                                });

                            }
                            this.win.show();
                        },
                        scope: this,
                        tooltip: {
                            title: 'Test Window'
                        }
                    });
                }
            });
           
    </script>

    <form id="Form1" runat="server">
    <ext:ScriptManager ID="ScriptManager1" runat="server" />
    <ext:ViewPort ID="ViewPort1" runat="server">
        <Body>
            <ext:Panel ID="Panel1" runat="server" Width="610" Height="300" Html="Content" BodyStyle="padding:5px;"
                Title="Editor panel" StyleSpec="padding:10px">
                <TopBar>
                    <ext:Toolbar ID="Toolbar1" runat="server">
                        <Items>
                            <ext:ToolbarButton ID="Button1" runat="server" Text="Edit" Icon="Pencil">
                                <Listeners>
                                    <Click Handler="el.setDisabled(true);#{Button2}.setDisabled(false);#{PanelEditor}.startEdit(#{Panel1}.getBody());" />
                                </Listeners>
                            </ext:ToolbarButton>
                            <ext:ToolbarButton ID="Button2" runat="server" Text="Save" Icon="Disk" Disabled="true">
                                <Listeners>
                                    <Click Handler="el.setDisabled(true);#{Button1}.setDisabled(false);#{PanelEditor}.completeEdit();" />
                                </Listeners>
                            </ext:ToolbarButton>
                        </Items>
                    </ext:Toolbar>
                </TopBar>
            </ext:Panel>
            <ext:Editor ID="PanelEditor" runat="server" AutoSize="Fit" Shadow="None">
                <Field>
                    <ext:HtmlEditor ID="HtmlEditor1" runat="server">
                        <Plugins>
                            <ext:GenericPlugin InstanceOf="Ext.ux.form.HtmlEditor.Test">
                            </ext:GenericPlugin>
                        </Plugins>
                    </ext:HtmlEditor>
                </Field>
            </ext:Editor>
        </Body>
    </ext:ViewPort>
    </form>
</body>
</html>
  2. #2
    May 27, 2010, 3:59 PM

    RE: [CLOSED] [0.82] Custom tool in HTMLEditor to open window and insert text

    After searching more on ExtJS forum, I found the solution to my first problem with the window opening behind the htmleditor. I created a new WindowGroup with a higher zseed. However, I still can not resolve my second issue with the insert not working.

    this.winGroup = new Ext.WindowGroup();
    this.winGroup.zseed = Ext.WindowMgr.zseed + 2000;

    this.win = new Ext.Window({
        title: 'Test',
        closeAction: 'hide',
        width: 300,
        height: 300,
        manager: this.winGroup,
        items:[{
            xtype: 'textfield',
            vtype: 'url',
            allowBlank: false,
            fieldLabel: 'URL',
            name: 'url'                                
        }],
        buttons: [{
            text: 'Insert',
            handler: function() {
                this.cmp.insertAtCursor('Success');
                this.win.hide();
            },
            scope: this
        }, {
            text: 'Cancel',
            handler: function() {
                this.win.hide();
            },
            scope: this
}]
        });

    }
  3. #3
    May 27, 2010, 5:45 PM

    RE: [CLOSED] [0.82] Custom tool in HTMLEditor to open window and insert text

    Hi,

    'insertAtCursor' doesn't work at all? Or it inserts at the beginning of the editor and under IE only?
    For me it doesn't work correctly under IE (inserts at the beginning). It is know issue but there is no solution yet

    http://forums.ext.net/showthread.php...3335-16-1.aspx
  4. #4
    May 27, 2010, 6:09 PM

    RE: [CLOSED] [0.82] Custom tool in HTMLEditor to open window and insert text

    It doesn't insert at all unless I click on the HtmlEditor content first. If I just hit Edit, toolbar button, Insert, it wont do anything. It thinks the HTMLEditor is not active. But I fixed that now, along with the inserting at the beginning issue. You can probably update the other thread with this fix.

    Ext.override(Ext.form.HtmlEditor, {
    onEditorEvent: function() {
        if (Ext.isIE) {
            this.currentRange = this.getDoc().selection.createRange();
        }
        this.updateToolbar();
    },
    insertAtCursor: function(text) {
        if (Ext.isIE) {
            this.win.focus();
            var r = this.currentRange || this.doc.selection.createRange();
            if (r) {
                r.collapse(true);
                r.pasteHTML(text);
                this.syncValue();
                this.deferFocus();
            }

        } else if (Ext.isGecko || Ext.isOpera) {
            this.win.focus();
            this.execCmd('InsertHTML', text);
            this.deferFocus();
        } else if (Ext.isSafari) {
            this.execCmd('InsertText', text);
            this.deferFocus();
        }
    }
});
  5. #5
    May 27, 2010, 6:28 PM

    RE: [CLOSED] [0.82] Custom tool in HTMLEditor to open window and insert text

    Hi,

    Nice fix (remember selection range). Thanks a lot
    Also the following plugins can be useful for you
    http://code.google.com/p/ext-ux-htmleditor-plugins/

Similar Threads

  1. [CLOSED] Custom type tool
    By caha76 in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jun 26, 2012, 7:24 AM
  2. [CLOSED] Tool Tip Custom Height and Width
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Nov 21, 2011, 6:12 PM
  3. [CLOSED] Custom Panel Tool?
    By wazige in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 23, 2009, 11:01 AM
  4. [OPEN] HtmlEditor inside ext:window
    By methode in forum Bugs
    Replies: 10
    Last Post: Jan 18, 2009, 2:59 AM
  5. [OPEN] HtmlEditor and Window
    By davidhoyt in forum 1.x Legacy Premium Help
    Replies: 0
    Last Post: Jan 14, 2009, 5:28 PM

Posting Permissions