CODEWITHSUNDEEP
javascriptjquerytinymce
Bing
Bing

Reputation: 3171

TinyMCE not initializing, but no JavaScript errors

I have a VERY simple email form (for a members-only page for a private club) to send email blasts. The code is simply:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../../tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
</head>
<body>

<h1>Email Blast</h1>
<form method="post">

<input type="hidden" name="from" value="[email protected]" />
<input type="hidden" name="to" value="[email protected]" />
<input type="hidden" name="reply" value="[email protected]" />
<input type="hidden" name="bcc" value="Tester <[email protected]>" />

<label for="subject">Subject</label><br/>
<input type="text" name="subject" id="subject" style="width: 600px" /><br/>

<label for="message">Message</label><br/>
<textarea id="message" name="message" rows="15" cols="100" class="tinymce"></textarea><br/>

<br/><input type="submit" value="Send Email" name="submit">

</form>
</body>
<script type="text/javascript">
jQuery(document).ready(function() {
    tinymce.init({selector:"textarea.tinymce"});
});
</script>

For some reason the page simply isn't rendering the textarea.tinymce as I would expect, but there are no error messages in the JS Console and all the breakpoints are hit as I would expect.

What am I missing?

Upvotes: 1

Views: 1617

Answers (1)

Buzinas
Buzinas

Reputation: 11725

You should place your script tag inside the body tag, just before closing it.

If you put anything after closing your body tag, the browser will ignore it.

Look at the example below - if you place the script tag inside the body tag, it works like a charm:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.2.5/tinymce.jquery.min.js"></script>
</head>
<body>

<h1>Email Blast</h1>
<form method="post">

<input type="hidden" name="from" value="[email protected]" />
<input type="hidden" name="to" value="[email protected]" />
<input type="hidden" name="reply" value="[email protected]" />
<input type="hidden" name="bcc" value="Tester <[email protected]>" />

<label for="subject">Subject</label><br/>
<input type="text" name="subject" id="subject" style="width: 600px" /><br/>

<label for="message">Message</label><br/>
<textarea id="message" name="message" rows="15" cols="100" class="tinymce"></textarea><br/>

<br/><input type="submit" value="Send Email" name="submit">

</form>
<script type="text/javascript">
jQuery(document).ready(function() {
    tinymce.init({selector:"textarea.tinymce"});
});
</script>
</body>
</html>

Upvotes: 1

Related Questions