I want to add tinyMCE to an app. How can I add it locally, rather than linking to the script?

I’m trying to add TinyMCE to a Meteor app, and have been able to do so with no problem when I use the external TinyMCE script, but can’t figure out how to run it from the server.
I have all the files in my ‘public’ folder, and tried a bunch of things, but can’t figure out how to get meteor to recognize them.

This works perfectly using an external script:

if (Meteor.isClient) {

Template.TemplateName.onCreated(function(){
 $.getScript('//tinymce.cachefly.net/4.2/tinymce.min.js', function(){
tinymce.init({selector:'textarea'});
})}

}

But if I try to replace the third line with following, tinyMCE never loads at all:

 $.getScript('//public/tinymce/tinymce.min.js', function(){

Is there another way to load a script from public, or am I doing something wrong? I googled, but the only suggestion was just to include the script in the , but that didn’t work either. I feel like I must be missing something obvious.

You don’t have to use “public” in your url

Try to change url like this
$.getScript(’/tinymce/tinymce.min.js’, function(){

1 Like

Hm. That clearly made a difference – it seems to be partially loading as opposed to not loading at all? Now I’m unsure as to if this is a meteor-specific issue or a TinyMCE issue.

TinyMCE is meant to replace textareas with its own editor. If it doesn’t load, you’d normally see a regular textarea, but at this point I’m seeing neither the textarea or the editor.

Actually, update – managed to get it to work, but only with in the head as well as the $.getScript part when the template is created.

I’m not sure I understand why that would be the case. But thank you, anyway, this seems to work – hopefully calling the script in both places is fine?

Just wrap $getScript to Template.TemplateName.rendered = function() { …
I connected in this way:

_TinyMCE = function() {
    tinymce.init({
	selector : 'textarea',
	language : 'uk_UA',
	language_url: '/lib/TinyMCE/langs/uk_UA.js',
	skin_url : '/lib/TinyMCE/skins/lightgray',
	plugins: [
         "advlist autolink link image lists charmap hr anchor pagebreak spellchecker",
         "searchreplace wordcount visualblocks visualchars code insertdatetime media nonbreaking",
         "save table contextmenu directionality paste textcolor"
   ],
   toolbar: "undo styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image media | forecolor backcolor", 
   style_formats: [
        {title: 'Bold text', inline: 'b'},
        {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}},
        {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}},
        {title: 'Example 1', inline: 'span', classes: 'example1'},
        {title: 'Example 2', inline: 'span', classes: 'example2'},
        {title: 'Table styles'},
        {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'}
    ],
    menubar: false
  });
}

Template.main.rendered = function() {
    $(document).ready(function() {
	var tinyMCE = window.tinyMCE || false;
	if( window.tinyMCE ) {
		var i, t = window.tinyMCE.editors;
		for (i in t){
		    if (t.hasOwnProperty(i)){
		        t[i].remove();
		    }
		}
		_TinyMCE();
	};
    });

    Meteor.Loader.loadJs("/lib/TinyMCE/tinymce.min.js", function() {
	_TinyMCE();
    });
};
1 Like

Oh, thank you! Looking forward to trying it this way when I get a chance, likely tomorrow. But wanted to sneak the thanks in today – this is definitely different from anything I’d tried, and looks promising.