Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'url' dialogs not supported in v5 (External file managers compatibility issue) #4786

Open
Draghmar opened this Issue Jan 23, 2019 · 10 comments

Comments

Projects
None yet
7 participants
@Draghmar
Copy link

Draghmar commented Jan 23, 2019

Hi.
I'm trying the all new and shiny v5 but I've noticed there is some huge issue in terms of compatibility with integrations for file management that were using tinyMCE.activeEditor.windowManager.open. Most of them (if not every one of them) was simply loading html file into iframe provided by tinyMCE popup. But now with the new UI Dialog that won't work.

So what's the proper solution to get the same result?

I found that the new UI Dialog has an Iframe component so I thought that maybe that's the one...but the truth is I have no idea what is the reason for this component to exists. You can't set src and applying anything at initialData just add it as a text into body of created iframe. So the result gives similar experience to the HtmlPanel (Yup, I can even insert html this way).
And even if I take the random ID of the created iframe and force src to take the URL I want I can't do anything because of the enforced dimensions. So...what's the point of this component? Am I missing something here?

obraz

@fyrkant fyrkant added the 5.x label Jan 23, 2019

@martyf

This comment has been minimized.

Copy link

martyf commented Jan 23, 2019

iframe with a src such as you’re describing are no longer supported. See #4756.

@Draghmar

This comment has been minimized.

Copy link
Author

Draghmar commented Jan 23, 2019

Yeah, I've noticed that. But the two questions are still open:

  1. What's the point of iframe component when it behaves very similar to the HtmlPane component?
  2. Does that mean there's no way of integrating external file manager with tinyMCE? And you have to rely on external way to popup the content? I can do this but it's an additional hassle that previous version was taking care of
@TheSpyder

This comment has been minimized.

Copy link
Member

TheSpyder commented Jan 23, 2019

The iframe component exists primarily because of the preview plugin, it has to load content CSS so the preview renders correctly which wouldn't work in a htmlpane.

You're right, htmlpane is very similar, we have considered excluding it from the release. It's only used by the help plugin at the moment.

The new UI in TinyMCE 5 is a wide scale change, we are aware this is disruptive and are keeping an eye on the feedback to see what we need to address and how quickly.

@Draghmar

This comment has been minimized.

Copy link
Author

Draghmar commented Jan 23, 2019

Yeah...This change will break many external plugins that uses iframe and html to get some advanced things done. As a another example I'm using tinymce-plugin-youtube to insert movies because that was the easiest way to put iframe in a tag I wanted and not in p like tinyMCE does by default. In v5 it doesn't work for the same reason...But maybe in v5 it would be easier to achieve that using native methods but I didn't check that part yet, it would great though.

@martyf

This comment has been minimized.

Copy link

martyf commented Jan 23, 2019

This is a current roadblock for me too - and have been looking at how to achieve it using the new Dialog and UI Components, but am stuck now - hence issue #4783.

@TheSpyder

This comment has been minimized.

Copy link
Member

TheSpyder commented Jan 24, 2019

I can confirm this will not be resolved for the stable release. If iframe dialogs are critical to an integration the only option is to stick with version 4 - we will be supporting it for quite a while yet.

We are very aware of the growing concern around loss of this feature and have flagged that something needs to be done to meet this need post release. I can't promise what exactly, but it will be solved.

@TheSpyder TheSpyder changed the title External file managers - compatibility issue with v5 External file managers - compatibility issue with v5 ('url' dialogs not supported) Jan 29, 2019

@TheSpyder TheSpyder pinned this issue Jan 29, 2019

@TheSpyder TheSpyder changed the title External file managers - compatibility issue with v5 ('url' dialogs not supported) 'url' dialogs not supported in v5 (External file managers compatibility issue) Jan 29, 2019

@sbillard

This comment has been minimized.

Copy link

sbillard commented Jan 29, 2019

This is a deal breaker for me. I need to get a PHP script to run to properly populate my dialog. Note that my plugin is NOT a file manager. Rather it is a tool for inserting cropped images from the application. Sort of a cut and paste support but with options.

@mutekellim

This comment has been minimized.

Copy link

mutekellim commented Feb 14, 2019

It's solved by following,

file_picker_callback: FileManager // tinymce option

function FileManager(callback, value, meta) {
        var windowManagerURL = "/FilManage";// filemanager path
 
        var windowManagerCSS = '<style type="text/css">' +
            '.tox-dialog {max-width: 100%!important; width:97.5%!important; overflow: hidden; height:95%!important; border-radius:0.25em;}' +
            '.tox-dialog__header{ display:none!important; }' +// for custom header in filemanage
            '.tox-dialog__footer { display: none!important; }' +// for custom footer in filemanage
            '.tox-dialog__body { padding: 0!important; }' +
            '.tox-dialog__body-content > div { height: 100%; overflow:hidden}' + 
            '</style > ';
        window.tinymceCallBackURL = '';
        window.tinymceWindowManager = tinymce.activeEditor.windowManager;
        tinymceWindowManager.open({
            title: '',
            body: {
                type: 'panel',
                items: [{
                    type: 'htmlpanel',
                    html: windowManagerCSS+ '<iframe src="' + windowManagerURL + '"  frameborder="0" style="width:100%; height:100%"></iframe>'
                }]
            },
            buttons: [] ,
            onClose: function () {
                if (tinymceCallBackURL!='')
                    callback(tinymceCallBackURL, {}); //to set selected file path
            } 
          
        } );
    }

//In FileManage

var windowManager = top != undefined && top.tinymceWindowManager != undefined ? top.tinymceWindowManager : '';


 if (windowManager != '') {
        if (top.tinymceCallBackURL != undefined)
            top.tinymceCallBackURL = path;
            windowManager.close();
    }
@sbillard

This comment has been minimized.

Copy link

sbillard commented Feb 15, 2019

Thanks much. I have fitted your example to my plugin. It is working great in tinyMCE4, so onward to the migration of netPhotoGraphics to use tinyMCE5.

@gtraxx

This comment has been minimized.

Copy link

gtraxx commented Feb 27, 2019

@Draghmar Hi, I'm looking to update my youtube plugin :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.