uncaught referenceerror: tinymce is not defined

Question

My JS:

$(document).ready(function() {
  tinymce.init({
    selector: 'textarea',
    height: 500,
    menubar: false,
    plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table contextmenu paste code'
    ],
    toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify |  bullist numlist outdent indent | link image',
    content_css: '//www.tinymce.com/css/codepen.min.css'
  });
});

My HTML:

<textarea></textarea>

I have the following external JS files included:

http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js http://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/jquery.tinymce.min.js

The JS fiddle:

http://jsfiddle.net/bcv1tv1b/

My error:

Uncaught ReferenceError: tinymce is not defined
    at HTMLDocument.<anonymous> ((index):54)
    at j (jquery.min.js:2)
    at Object.add [as done] (jquery.min.js:2)
    at m.fn.init.m.fn.ready (jquery.min.js:2)
    at window.onload ((index):53

I'm running Google Chrome 57.0.2987.133 and the TinyMCE code is from https://www.tinymce.com/docs/demo/basic-example/ .

Any ideas?

Answer 1

You need to also load TinyMCE itself - all you are loading now is a jQuery wrapper for TinyMCE.

In total you need to load the following:

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/tinymce.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/jquery.tinymce.min.js"></script>

See this updated fiddle: http://jsfiddle.net/mfromin/bcv1tv1b/2/

In all honesty you don't even need the jQuery TinyMCE code unless you want to use TinyMCE as a jQuery Plugin. Its 100% not required to make your fiddle work.