TinyMCE Editor not rendering

I want to include the TinyMCE editor into my app. This is how my controller code looks atm

Edit I edited my code based on some suggestions in the answers

Template.guide_create.onRendered(function () {
    this.autorun(function () {
        // hack to force the autorun to reevaluate
        Template.currentData();

        tinymce.init({
            selector: "textarea",
            theme: "modern",
            plugins: [
                "advlist autolink lists link image preview hr",
                "searchreplace wordcount visualblocks visualchars fullscreen",
                "insertdatetime media nonbreaking save table contextmenu directionality",
                "paste textcolor colorpicker textpattern"
            ],
            toolbar1: "insertfile undo redo | bold italic | forecolor backcolor | link image jbimages",
            toolbar2: "alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | card |",
            image_advtab: true,
            relative_urls: false,

            setup: function (editor) {
                // Register example button
                editor.addButton("card", {
                    title: "card",
                    image: "/images/tinymce_icons/card.png",
                    onclick: function () {
                        editor.insertContent('[card]Card name[/card]');
                    }
                });
            }
        });
    });
});

People can create guides for a video game on my website. The workflow is like this: A person chooses a hero and after that a new site is getting called. On this site the actual guide is created. When I render the template first my textarea is getting transformed into a tinymce textarea. But when I go to another section on my website and then later on go back to the guide creation site the textarea just stays a simple textarea. Those are currently my routes

Router.route('/select-hero', function () {
    this.render('select_hero');
}, {name: 'select_hero'});

Router.route('/create-guide/:hero', function () {
    this.render('guide_create');
}, {name: 'guide_create'});

And these are my templates:

template(name="select_hero")
    .format-properly
        // 1st row 
        a(href="/create-guide/warrior")
            .square.img_1-1
        a(href="/create-guide/shaman")
            .square.img_1-2
        a(href="/create-guide/rogue")
            .square.img_1-3

        // 2nd row
        a(href="/create-guide/paladin")
            .square.img_2-1
        a(href="/create-guide/hunter")
            .square.img_2-2
        a(href="/create-guide/druid")
            .square.img_2-3

        // 3rd row
        a(href="/create-guide/warlock")
            .square.img_3-1
        a(href="/create-guide/mage")
            .square.img_3-2
        a(href="/create-guide/priest")
            .square.img_3-3


template(name="guide_create")
    .format-properly
        br
        center
            h3 Create your awesome guide! :D
        br
        hr
        form.form-horizontal(id="guideForm" method="POST" action="/create-guide")
            .form-group
                label.col-sm-2.control-label(for="title") Title
                .col-sm-10
                    input.form-control(name="title" id="title")
            hr
            .form-group
                .col-sm-offset-2.col-sm-10
                    .checkbox
                        label
                            input(name="isPublic" type="checkbox")
                            p Make your guide public
            hr
            .form-group
                label.col-sm-2.control-label(for="cards") Cards
                .col-sm-10
                    input.form-control(name="cards" id="cards")
            hr
            .form-group
                label.col-sm-2.control-label(for="content") Your guide content
                .col-sm-10
                    textarea.form-control(name="content" id="content")
        button.btn.btn-primary#new-guide(type="submit" style="margin-top: 15px;") Save guide

Any help or suggestions are highly appreciated! :smile:

I believe the correct function to call now is

Template.guide_create.onRendered(function(){
  tinymce.init({
      ...
  });
});

instead of what you have right there, see the official documentation. I’m also guessing you are using a meteor package for including tinymce, if not better to consider using one as well.

1 Like

Thank you for your response! But onRendered gives the same results as rendered = function (). I already searched for tinymce plugins on fastosphere but just found some weird package from some Russian guy who had no documentation and no changelogs :expressionless: I already searched for alternate text editors on fastosphere but I just found those super lightweight ones. I just need a little bit more in my text editor :confused:

According to the documentation onRendered is "Callbacks added with this method are called once when an instance of Template.myTemplate is rendered into DOM nodes and put into the document for the first time"
http://docs.meteor.com/#/full/template_onRendered

What this means is that you need to use an autorun function inside onrendered
this.autorun(function () {

// A hack I found on SO to get autorun to re-evaluate.
Template.currentData();

//reinitialize your tinymce here

});

Thank you for your reply! Unfortunately this doesn’t work as well. I edited my code in my original post to show that to you.

You need to REMOVE and RE-INIT your TinyMCE Plugin. Here’s my 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',
  height: 800,
  menubar: false,
  toolbar: 'insert | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist',
});

});