TinyMCE issues?

help
1

I am having trouble getting the TinyMCE package to work, using Blaze and FlowRouter. I am using the teamon:tinymce package.

My problem is it is working properly on the first load, but then if routing to a different page and back, it doesn’t load properly the second time.

Init is added to the onRendered function, I tried both with and without autorun. Also tried a console log that is confirming the render is happening, but TinyMCE is not loading.

Here is a gif showing an example of my issue: http://screencast.com/t/o0HVJ8e7

Here is my current onRendered function:

Template.newDocuments.onRendered( function () {

    this.autorun(function () {

        tinymce.init({
            selector: '#myTextArea',
            skin_url: '/packages/teamon_tinymce/skins/lightgray',
            plugins: [
                'autoresize autosave advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code textcolor wordcount',
                'insertdatetime media table contextmenu paste code'
            ],
            fontsize_formats: "8pt 10pt 12pt 14pt 18pt 24pt 36pt 42pt 50pt 72pt",
            toolbar: 'insertfile undo redo | styleselect | bold italic underline | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image  ',
            content_css: [
                '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
                '//www.tinymce.com/css/codepen.min.css'
            ]

        });
    });

});

As mentioned, I tried both with and without the autorun. Both have the same issue.

Also, if I actually reload/refresh the page, it will load properly, but again will not load for repeated attempts.

Any advice? I haven’t ran in to any issues with using DOM manipulation in onRendered before.

2

Thoughts

I’m not super familiar with TinyMCE, but it makes me wonder if it has some code to prevent tinymce.init(...) from working twice on the same selector.

Debugging ideas

  1. Sanity check the calls with a console.log(...) just before the tinymce.init(...) calls also.
  2. Make a dynamic selector that gives a new ID to the element you’re injecting TinyMCE into each time the template is rendered. (If my suspicion is correct this could help)
  3. Look for a TinyMCE atmosphere package that’s dealt with these issues for Meteor specifically already (I’m just assuming someone’s done it, TinyMCE is pretty popular). Although arguably pulling from NPM is a better supported choice if you’re doing that already.
3

Thanks for replying.

Already attempted the sanity check, still no dice.

I went with the atmosphere package over the NPM package, since I thought the atmosphere package would be more attuned to how Meteor handles the DOM. But it seems that may not be the case.

I will try #2 suggestion!

4

4 - Another approach could be to keep the initialized TinyMCE in the dom somewhere. Perhaps in your layout, and just show/hide as needed. This would be more performant I think at the cost of memory and probably code complexity. It feels hackish.

Hope something here pans out for you~

5

I am doing this (removing and re-adding instance), which works fine.

Template.notes.onRendered(function() {
    tinymce.EditorManager.editors = []; //we need to remove the old instances. 
    tinymce.init({
      selector: '#notes',
      height : 300,
      skin_url: '/packages/teamon_tinymce/skins/lightgray',
      menubar: false,
      statusbar: false
    });
});
5 Likes
6

@miriam7 This solution worked for me!

Thanks so much!

7

+1 thanks a million @miriam7

8

I haven’t the opposite issue as this person. And the advised fix isn’t working as it did for them. It only displays a textarea unless I refresh the page, which then it displays the editor. I’m using blaze and viewmodel for it. The rest of the code is here.

  autorun() {
    Meteor.subscribe('items', undefined, itemId());
    Meteor.subscribe('collaborate', itemId());
    tinymce.activeEditor && tinymce.activeEditor.setContent(this.collaborate().description);
  },
  onRendered() {
    tinymce.EditorManager.editors = [];
    tinymce.EditorManager.init({
      selector: 'textarea',
      theme: 'modern',
      plugins: 'link, noneditable',
      skin_url: '/packages/teamon_tinymce/skins/lightgray',
      toolbar: 'bold italic underline | blockquote indent outdent | link unlink',
      browser_spellcheck: true,
      menubar: false,
      statusbar: false,
      force_p_newlines : false,
      forced_root_block: ''
    });
  },
9

FINALLY IT WORKS! Thank you. Here’s my full working code.

Template.notes.onRendered(function() {

tinymce.EditorManager.editors = []; //we need to remove the old instances. 

//Set "About" section to a TinyMCE editor.
tinymce.init({
  selector: 'textarea',
  skin_url: '/packages/teamon_tinymce/skins/lightgray',
  menubar: false,
  toolbar: 'insert | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist',
});
tinymce.get('pageContent').setContent(page.content);

});