Question

我在让TinyMCE正常运行方面遇到一些麻烦，请参阅下面的屏幕截图，忽略CSS问题。

我的问题是，当我第二次打开弹出窗口时，编辑器根本不会加载。

我发现这篇文章正是我所遇到的问题，但是使用Fancybox - 我试图使用提供的解决方案没有任何乐趣..

任何人都能解释一下吗？

初始化TinyMCE

jQuery(document).ready(function() {
    jQuery('#personalise_html_body').tinymce({
        // Location of TinyMCE script
        script_url : '/core-js/tinymce/4.0.28/tiny_mce.js',
        theme_url: '/core-js/tinymce/4.0.28/themes/modern/theme.js',
        skin_url: '/core-js/tinymce/4.0.28/skins/lightgray',

            // General options
        language : \"".strtolower($lang)."\",
        theme : \"modern\",
        plugins:  [
            \"textcolor code fullscreen link paste preview moxiemanager\"
        ],
        moxiemanager_title: \"{_T_MEDIA_MANAGER_TITLE}\",
        menubar : false,
        toolbar: [
        \"bold italic underline | alignleft aligncenter alignright alignjustify | formatselect fontselect fontsizeselect |\",
        \"cut copy paste | numlist bullist | undo redo | link unlink  | forecolor backcolor |  insertfile | code preview | fullscreen\"
        ],
        convert_urls: false,

    });
});

我尝试在我的Magnific Popup代码中添加回调 （得到了这个想法：TinyMCE & Fancybox - editor won't work on 2nd view）没有成功：

$('a.personalise').magnificPopup({
        type: 'ajax',
    callbacks: {
        open: function() {
                tinyMCE.execCommand('mceToggleEditor', false, 'personalise_html_body');
        tinyMCE.execCommand('mceAddControl', false, 'personalise_html_body');
            },
        close: function() {
                tinyMCE.execCommand('mceFocus', false, 'personalise_html_body');
                tinyMCE.execCommand('mceRemoveControl', true, 'personalise_html_body');
        }
    }
});

Answer 1

使用以下代码解决了这个问题。

这总是很简单的事情......

$('a.personalise').magnificPopup({
    type:       'ajax',
    callbacks:  {
        close: function() {
            tinymce.remove('#personalise_html_body');
        }
    }
});

Answer 2

我找到了以下解决方案，当你点击obeh时会导致popup花费重新初始化TinyMce

function initTiny(){
    setTimeout(function(){
        tinymce.remove(".js-tiny-mce");
        tinymce.init({
            selector: '.js-tiny-mce',
            menubar: false,
            toolbar: [
                'undo redo | bold italic underline | bullist numlist outdent indent'
            ]
        });
    },50); 
}

在AJAX Magnific Popup中加入TinyMCE

2 个答案: