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!