Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

TinyMCE is not defined Jquery

Tags:

jquery

tinymce

Have been working on this error for 2 days and cannot get TinyMCE to work. I am using the jquery version of TinyMCE. Below is my HTML code with a form that contains a textarea. I use Google Inspect Element and under the console tab i get the following error: "Uncaught ReferenceError: tinymce is not defined". Any help would be appreciated.

<form id="add_update_form" action="" method="POST" title="Add Blog">

<p class="feedback"></p>

<!-- <label>Created:</label>
<input type="text" name="created"> -->

<label>Title:</label>
<input type="text" name="title" class="input-block-level">

<label>Content:</label>
<textarea width="100%" rows="10" cols="10" name="content" class="input-block-level"></textarea>

<div class="clear"></div>

</form>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"    type="text/javascript"></script>
<script src="<?php echo base_url();?>js/portal/tinymce/jquery.tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
    "advlist autolink lists link image charmap print preview anchor",
    "searchreplace visualblocks code fullscreen",
    "insertdatetime media table contextmenu paste moxiemanager"
],
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>
like image 628
gustavo Avatar asked Jun 03 '13 23:06

gustavo


People also ask

What is TinyMCE plugin?

TinyMCE is an incredibly powerful, flexible and customizable rich text editor. This section will help configure and extend the editor by using TinyMCE plugins.

How do you get text from TinyMCE editor?

You can do this using the getContent() API method. Let's say you have initialized the editor on a textarea with id=”myTextarea”. This will return the content in the editor marked up as HTML.


2 Answers

As you are using the jquery version you'll need to set it up like a jquery plugin

$(function() {
   $('textarea.tinymce').tinymce({
    ...
   });
});

http://www.tinymce.com/tryit/3_x/jquery_plugin.php

like image 70
Jasen Avatar answered Oct 06 '22 10:10

Jasen


I looked at this page: http://www.tinymce.com/tryit/3_x/jquery_plugin.php and clicked tab "View source" and noticed something.

If you are using TinyMCE as jQuery plugin, there is additional parameter required script_url, so your code should look like this:

$('textarea.tinymce').tinymce({
   script_url: 'js/portal/tinymce/tinymce.min.js',
...

Other solution is to use non-jQuery version:

<script src="<?php echo base_url();?>js/portal/tinymce/tinymce.min.js"></script>

and then use old method to init the TinyMCE (as in your initial code):

tinymce.init({
    selector: "textarea",
...
like image 41
Rafal Gradziel Avatar answered Oct 06 '22 11:10

Rafal Gradziel