charj charj - 8 months ago 111
Javascript Question

Include TinyMCE in AJAX Magnific Popup

I'm having some trouble with getting TinyMCE to function correctly, see the screenshot below, ignore the CSS issues.

My problem is that when I open the popup a second time, the editor simply won't load.

I found this post which is exactly the problem I am having, but using Fancybox - I've tried to use the solutions provided with no joy..

Can anybody shed some light?

Initialising TinyMCE

jQuery(document).ready(function() {
// 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,


I've tried adding callbacks to my Magnific Popup code
(got the idea here: TinyMCE & Fancybox - editor won't work on 2nd view) without success:

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


This was solved using the following code.

It's always the simple things...

    type:       'ajax',
    callbacks:  {
        close: function() {