TinyMCE with FancyBox

Question

I am currently struggling to get a FancyBox popup to work with a few embedded tinyMCE text areas. I have looked all over the internet, including pretty much every post on here and remain unsuccessful.

The FancyBox will load correctly and display the multiple tinyMCE text areas (the button toolbars all display correctly). The problem is that it will not actually display any text in the textboxes, and the actual text box is not editable.

My tinyMCE init code is:

tinyMCE.init({ 
    theme : "advanced",
    mode : "exact",
    elements : "Cause",
    // Theme options - button# indicated the row# only
    theme_advanced_buttons1: "bold,italic,underline,strikethrough,separator,bullist,numlist,separator,outdent,indent,separator,undo,redo",
    theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,separator,code,separator,radspell",
    theme_advanced_buttons3: "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "none"
});

And my call to FancyBox is:

$('#PopupAdd').fancybox({
        titlePosition: 'none',
        autoscale: false,
        showCloseButton: false,
        centerOnScroll: false,
        onComplete: function () { 
            tinyMCE.execCommand('mceAddControl',true,'Cause');
        },
        onCleanup: function () { 
            tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause'); 
        }

    });

I have tried nearly every variation of the above code I can think of. If anyone has any new ideas as to how to approach this, it would be greatly appreciated!

Update:

My HTML is:

<lcmp:LittleButton ID="AddStatusButton" Tooltip="Add a new Status." OnClick="addStatusPopup(); return false;" />

Which creates a button that when clicked calls

 function addStatusPopup()
{

    $('#PopupAdd').trigger('click');
}

What is your html to open fancybox? How are you loading the tinyMCE? — Macsupport, Oct 02 '14 at 19:12
Follow this Answer for latest version of fancybox 2.1.5 I guess http://stackoverflow.com/a/34474232/612987 — Wasim A., Dec 26 '15 at 18:57

score 3 · Answer 1 · answered Apr 06 '15 at 20:46

3

I had exactly the same problem. What worked for me was to run the tinyMce.init after the FancyBox opened.

answered Apr 06 '15 at 20:46

Amir Shaked

31
3

score 0 · Answer 2 · edited Jan 20 '20 at 15:34

0

I don't see how your loading the embedded text areas (inline, ajax, iframe?) but try adding a "type"

$('#PopupAdd').fancybox({
    titlePosition: 'none',
    type: 'iframe' // Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html' 
    autoscale: false,
    showCloseButton: false,
    centerOnScroll: false,
    onComplete: function () { 
        tinyMCE.execCommand('mceAddControl',true,'Cause');
    },
    onCleanup: function () { 
        tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause'); 
    }

});

Not seeing a fiddle or example makes it difficult but one could do a manual call like this:

$("#PopupAdd").click(function() {
    $.fancybox({
        href: '#PopupAdd',
        type: 'inline',
        titlePosition: 'none',
        autoscale: false,
        showCloseButton: false,
        centerOnScroll: false,
        onComplete: function () { 
            tinyMCE.execCommand('mceAddControl',true,'Cause');
        },
        onCleanup: function () { 
            tinyMCE.EditorManager.execCommand('mceRemoveControl', true, 'Cause'); 
        }
    });
});

edited Jan 20 '20 at 15:34

joseantgv

1,943
1
26
34

answered Oct 02 '14 at 19:16

Macsupport

5,406
4
29
45

I am loading them inline. I tried putting 'inline' as the type explicitly and it had no effect. I also tried the various other supported types, and that obviously had very strange unwanted results. – oh_no Oct 02 '14 at 19:28
I tried that as well and unfortunately still no luck. Is this something that may require going in and actually making modifications to the fancybox script? – oh_no Oct 03 '14 at 12:37
One more option. Using the manual call code change '$("#PopupAdd").click(function() {' to '$("#AddStatusButton").click(function() {' and your change your button html to '' – Macsupport Oct 03 '14 at 15:13
That ended up not even opening up the popup. – oh_no Oct 03 '14 at 15:44
BTW, You are using an old version of Fancybox from 2010. Current version is 2.15. – Macsupport Oct 03 '14 at 15:54

Shane Lowry · Answer 3 · 2014-10-21T22:49:10.287

All the above code looks complicated to me, keep things simple and use this tutorial - WordPress TinyMCE Editor Tips | How to Add Custom Buttons, Styles, Dropdowns & Pop-ups. All the working code examples are there to download and customise as well. https://www.gavick.com/blog/wordpress-tinymce-custom-buttons/

The snippet below will add a "popup" to your tinyMCE editor .

'
 (function() {
    tinymce.PluginManager.add('gavickpro_tc_button', function( editor, url ) {
    editor.addButton( 'gavickpro_tc_button', {
        title: 'My test button',
        type: 'menubutton',
        icon: 'icon gavickpro-own-icon',
        menu: [
            {
                text: 'Custom Headline',
                onclick: function() {
                    editor.windowManager.open( {
                        title: 'Insert h3 tag',
                        body: [{
                            type: 'textbox',
            name: 'title',
                            label: 'Your title'
                        }],
                        onsubmit: function( e ) {
                            editor.insertContent( '<h3>' + e.data.title + '</h3>');
                        }
                    });
                }
            }'

TinyMCE with FancyBox

3 Answers3