带有FancyBox的TinyMCE

Question

我目前正在努力使FancyBox弹出窗口可用于一些嵌入式tinyMCE文本区域。我浏览了整个互联网，包括此处的几乎所有帖子，但都失败了。

FancyBox将正确加载并显示多个tinyMCE文本区域（按钮工具栏均正确显示）。问题在于它实际上不会在文本框中显示任何文本，并且实际的文本框不可编辑。

我的tinyMCE初始化代码是：

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"
});  

我打给FancyBox的电话是：

$('#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'); 
        }

    });  

我已经尝试了我能想到的上述代码的几乎所有变体。如果有人对如何解决这个问题有任何新的想法，将不胜感激！

更新：

我的HTML是：

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

哪个会创建一个在单击时会打电话的按钮

 function addStatusPopup()
{

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

Answer 1

我有完全相同的问题。对我有用的是在FancyBox打开之后运行tinyMce.init。

Answer 2

我看不到如何加载嵌入式文本区域（内联，ajax，iframe？），但尝试添加“类型”

$('#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'); 
    }

}); 

[看不到小提琴或例子很难，但可以像这样手动打电话：

$("#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'); 
        }
    });
}); 

Answer 3

以上所有代码对我来说看起来都很复杂，请保持简单并使用本教程-WordPress TinyMCE编辑器提示|如何添加自定义按钮，样式，下拉菜单和弹出窗口。所有的工作代码示例都可以下载并进行自定义。https://www.gavick.com/blog/wordpress-tinymce-custom-buttons/

下面的代码片段将在您的tinyMCE编辑器中添加一个“弹出窗口”。

'
 (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>');
                        }
                    });
                }
            }'