[CLOSED] Adding Upload Image button in HTML Editor with 4.5.1 version

Hello,
In Ext 2.5 version we are using some plugins for adding upload image button for adding images to HTML editor. After migration with 4.5.1 version this functionality are not working. Below is sample code.
Note: Earlier we have implemented the code as per forum for 2.5 version with reference URL https://forums.ext.net/showthread.php?26577
Same required for 4.5.1 version.

Code:

---

X.HtmlEditor().AutoScroll(true).Value(Model.TemplateText).FieldLabel("").Width(750).Height(430).ID("htmlEditor")
                      .Plugins(plugin => { plugin.Add(Html.X().GenericPlugin()
                      .InstanceName("Ext.ux.form.HtmlEditor.imageUpload")); })
                      .Listeners(c => {
                          c.Sync.Fn = "changeEditor";
                          c.Render.Handler = "htmlEditorRender(this)";}
                          )

---

Giving error after clicking on Insert Image button

Code:

---

Uncaught Error: Invalid component "id": ""
    at new Ext.Error (ext.axd:2029)
    at Function.raise (ext.axd:2069)
    at Object.Ext.raise (ext.axd:2091)
    at constructor (ext.axd:44107)
    at new constructor (ext.axd:8354)
    at Object.widget (ext.axd:9559)
    at constructor.create (ext.axd:17033)
    at constructor.lookupComponent (ext.axd:94736)
    at constructor.prepareItems (ext.axd:95157)
    at constructor.add (ext.axd:94347)

---

Hello @MOHAMMEDRAFI!

Checking the link you provided, I see the link for the custom extension points to an still existing github repository. But I also see that the last commit therein was back in 2014. This means the extension is not compatible with ExtJS 6 at all, which is the base to Ext.NET 4.

ExtJS 6 was released somewhere around 2015, so the extension will need to be ported to ExtJS 6 first.

Well, that's the bad news. The good news is that this shouldn't be a big problem, although that would require debugging. It should just be a matter of getting to the structure that's failing and referring to ExtJS documentation to understand how that should look like now.

But the fact is that it won't work until the extension is made compatible with Ext JS 6.x.

I hope this helps!

Thanks for the update.
Now it has become a breaking change for us . Are you going to release a patch with updated Js so that this feature will work.
Please provide the alternative solution asap.

Hello @MOHAMMEDRAFI,

Sorry it was not clear. We are talking about a third-party extension as discussed here: add a toobar item to the htmleditor for uploading pictures?

According to the topic above, the extension was available here: https://github.com/samiracho/HtmlEditorImageUpload)

And currently it shows the last commit was back in May 21, 2014, which is a while before Ext JS 6.0 was released. Ext JS 6.0 came bundled to Ext.NET 4.0.0, so 4.x series of Ext.NET uses Ext JS 6.x.

So, simply the plugin did not develop since then and naturally didn't get patches to work on recent Ext JS versions (thus recent Ext.NET versions).

That's a third-party software and we are not able to provide continued support for it. I agree that's a breaking change to your perspective, but that's beyond our control.

Hope you understand, let us know if the situation is still not clear for you.

Anyway, we can log this as a feature request to implement such functionality to Ext.NET if you want.

EDIT: By the third party extension's license file, we are not allowed to integrate it on Ext.NET at all:
"Commercial use is permitted to the extent that the code/component(s) do NOT become part of another Open Source or Commercially licensed development library or toolkit without explicit permission." (https://github.com/samiracho/HtmlEditorImageUpload/blob/master/README.txt)

EDIT2: Please refrain from using asap and similar terms and expressions, as in accordance to our Forum Guidelines For Posting New Topics item #5 and More Information Required item #4, as this may lead to delays in getting your response.

Thanks for the update.
Please let's log this as a feature request and provide solution within couple of weeks. Because this feature is part of our next deployment which is going to happen at 8-July-2018. Hence please provide an update prior to release so that we can incorporate the same.

HI MOHAMMEDRAFI,

You can contact the original author of the extension and request a fix.

Hi All,
Now my issue resolved i made required changes in Ext.ux.form.HtmlEditor.imageUpload javascript.
After doing changes its work perfectly as expected. But after adding image to html editor when i double click on image then same image upload window dialog has to open which is not opening(which is opening in Ext 2.5 version). Since double click of mouse event is not getting triggered.
Could you let's know how do get this.

Hello @MOHAMMEDRAFI!

You should isolate the code on that feature that's handling the double click event and review it.

I believe a good reference on how this should be done in current Ext.NET versions would be the grid cell editing plugin, when it has ClicksToEdit set to 2.

You can check that code here: Ext.grid.plugin.CellEditing.initEditTriggers() source

See how it uses me.mon() to bind the double click event (if ClicksToEdit is not 1). You probably should do something like that in your reviewed code for the image upload extension.

Hope this helps!

Thanks for your reply.
I tried as per the document. Now there is no errors. But the mouse event is not firing after selection of image in html editor.
Please let's know where is the issue.

Code:

---

init: function (panel) {
        this.cmp = panel;
        this.cmp.on('render', this.onRender, this);
        this.cmp.on('initialize', this.initialize, this);
        this.cmp.on('beforedestroy', this.beforeDestroy, this);
    },
       
    initialize: function () {
        var me = this;
        var cmpDoc = this.cmp.getDoc();
        me.flyDoc = Ext.fly(cmpDoc);
        // Inject custom css file to iframe's head in order to simulate image control selector on click, over webKit and Opera browsers
      // if ((Ext.isWebKit || Ext.isOpera)) me._injectCss(me.cmp, me.iframeCss);

        // attach context menu
        if(me.enableContextMenu)me._contextMenu();
        //me.cmp.mon('dblclick', me._dblClick, me);
                // attach events to control when the user interacts with an image
        me.cmp.mon(me.flyDoc, 'dblclick', me._dblClick, me, { delegate: "img" });
                me.cmp.mon(me.flyDoc, 'mouseup', me._docMouseUp, me);
                me.cmp.mon(me.flyDoc, 'paste', me._removeSelectionHelpers, me);
               
        // mousewheel resize event
        if ((Ext.isWebKit || Ext.isOpera) && me.wheelResize) {       
                        me.cmp.mon(me.flyDoc, 'mousewheel', me._wheelResize, me, {delegate : "img"});
        }

        // mouse drag resize event
        if (Ext.isWebKit && me.dragResize) {       
                        me.cmp.mon(me.flyDoc, 'drag', me._dragResize, me, {delegate : "img"});
        }
    },
       
    beforeDestroy: function () {
        var me = this;
        if (me.uploadDialog) me.uploadDialog.destroy();
        if (me.contextMenu) me.contextMenu.destroy();
    },
       
    onRender: function () {
 
        var me = this;
                var imageButton = Ext.create('Ext.button.Button', {
                    iconCls: 'x-edit-sourceedit', //'x-htmleditor-imageupload',
            handler: me._openImageDialog,
            scope: me,
            tooltip: me.t('Insert/Edit Image'),
            overflowText: me.t('Insert/Edit Image')
        });

        var toolbar = me.cmp.getToolbar();

        // we save a reference to this button to use it later
        me.imageButton = imageButton;

        me.cmp.getToolbar().add(imageButton);

    },
       
        //private
    _contextMenu: function () {
        var me = this;

        if (!me.contextMenu) {
            var editAction = Ext.create('Ext.Action', {
                text: me.t('Edit'),
                iconCls: 'x-htmleditor-imageupload-editbutton',
                disabled: false,
                handler: me._openImageDialog,
                scope: me
            });

            var deleteAction = Ext.create('Ext.Action', {
                iconCls: 'x-htmleditor-imageupload-deletebutton',
                text: me.t('Delete'),
                disabled: false,
                handler: function () {
                    me.cmp.execCmd('delete')
                }
            });

            var contextMenu = Ext.create('Ext.menu.Menu', {
                closeAction: 'hide',
                items: [editAction, deleteAction]
            });
            me.contextMenu = contextMenu;
        }

                me.cmp.mon(me.flyDoc, 'contextmenu', function (e, htmlEl) {
                                e.stopEvent();
                                e.stopPropagation();
                                var iframePos = this.cmp.getPosition();
                                var elementPos = e.getXY();
                                var pos = [iframePos[0] + elementPos[0], iframePos[1] + elementPos[1] + 30];
                                if (e.getTarget().tagName == 'IMG');
                                Ext.Function.defer(function () {
                                        me.contextMenu.showAt(pos)
                                }, 100);
                        },
                        me,
                        {delegate:'img'}
                );
    },
       
    //private
    // instead of overriding the htmleditor header method we just append another css file to it's iframe head
    _injectCss: function (cmp, cssFile) {
        var frameName = cmp.iframeEl.dom.name;
        var iframe;

        if (document.frames) iframe = document.frames[frameName];
        else iframe = window.frames[frameName];

        // we have to add our custom css file to the iframe
        var ss = iframe.document.createElement("link");
        ss.type = "text/css";
        ss.rel = "stylesheet";
        ss.href = cssFile;

        if (document.all) iframe.document.createStyleSheet(ss.href);
        else iframe.document.getElementsByTagName("head")[0].appendChild(ss);

    },
       
    // private
    _dblClick: function (evt) { 
        debugger;
        var me = this;
        var target = evt.getTarget();

        if (target.tagName == "IMG") {
            me._openImageDialog()
        }
    },

---

Hello @MOHAMMEDRAFI!

Unfortunately, I don't see anything obviously wrong in the code snippet you posted. As far as I understand here, you are implementing the very event handling for images within the html editor component.

Looking up the documentation on the HTMLEditor component, I couldn't find and helpful event to handle that. If I switch over (via the last toolbar setting in the first example in the documentation page) to source edit, I can make an image display in the editor by adding a hand-crafted IMG HTML tag.

So if you just bind the dblclick event

Code:

---

<img src="url_to_uploaded_image" ondblclick="parent.Ext.toast('Triggered double click event.');" />

---

You'll probably be able to call the upload dialog again.

We can't really go down to further details here, as this goes beyond Ext.NET support, but I hope these directions help you figure out how to bind the events to the images and handle them as you used to in version 2.