TinyMCE editor not working in chrome, mozilla firefox when used in Handlebar Script files along with jquery

Question

I am using the latest version TinyMCE 4.0b3. Jquery version is 1.9.1. below is my code:

<script type="text/javascript" src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
  tinymce.init({
  selector: "textarea",
  theme: "modern",
  plugins: [
  "advlist autolink lists link image charmap print preview hr anchor pagebreak",
  "searchreplace wordcount visualblocks visualchars code fullscreen",
  "insertdatetime media nonbreaking save table contextmenu directionality",
  "emoticons template paste textcolor"
  ],
  toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
  toolbar2: "print preview media | forecolor backcolor emoticons",
  image_advtab: true,
  templates: [
   {title: 'Test template 1', content: 'Test 1'},
   {title: 'Test template 2', content: 'Test 2'}
  ],
 });
 </script>

 <textarea name="content" rows="5" cols="100"/>

Above code is working perfectly in IE9 Standard mode. But not in IE9 compatibility mode, mozilla firefox, google chrome, safari. I don't see any errors in browser console.

I saw so many post regarding this that jquery should be loaded after tinymce to solve this issue. But in our application we can't do that since jquery is loaded at main page itself.

I have tried to use $(document).ready function but of no use. I am not sure if its is jquery problem.

EDIT: Above code is working fine in a plain html file in all browsers. In our application we are using hbs(handlebar script) files. When tried to put that code in hbs file it didn't work.

Is there any other way to fix this issue.

Answer 1

In our aplication we are using require js also. so we need to do shims config to make it work.

requirejs.config({
baseUrl: "js",
paths: {
    tinyMCE: 'libs/tinymce/tiny_mce'
},
shim: {
    tinyMCE: {
        exports: 'tinyMCE',
        init: function () {
            this.tinyMCE.DOM.events.domLoaded = true;
            return this.tinyMCE;
        }
    }
}
});

Reference: How can I implement TinyMCE with Require.js?

Answer 2

Try to place the script code after the body tag.