Solved

How to setup the TinyMCE mention plugin?

Posted on 2014-01-10
3
1,407 Views
Last Modified: 2014-01-11
I am trying to get the mention plugin to work with TinyMCE. The problem is: whenever I enable the plugin, I get the dreaded "tinymce is not defined" error. I think it may be loading the plugin "too soon", but I don't know how to delay the plugin load until TinyMCE is fully loaded.

Here's how I have the the init() configured:

    $(document).ready(function(e) {
    tinymce.init({
        selector:'textarea.update',
        menubar:false,
        toolbar:"undo redo | bold italic | bullist numlist | link unlink",
        width:'100%',
        plugins: "link,mention",
        mentions:
        {
            source: [
                { name: "Michael" },
                { name: "Erica" },
                { name: "Sloan" }
                ]
        }           
    });
});

Open in new window


The Text area is

<textarea class="update"></textarea>

Open in new window


If I remove the mention option and the "mention" from the plugins list, it works fine. As soon as I put the plugin back into the "on" mode, it breaks.

How do I fix this?
0
Comment
Question by:DrDamnit
  • 2
3 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39773404
I use the plugin from here :
http://tinymce.cachefly.net/4.0/tinymce.min.js
Using your code and checking the console, I see a 404 error :
GET http://tinymce.cachefly.net/4.0/plugins/mention/plugin.min.js 404 (Not Found)

And yes, it does work, I see nothing : http://jsfiddle.net/yE2EC/

But if I add the plugin (in the plugins folder or in the page), from here :
https://github.com/CogniStreamer/tinyMCE-mention

it work : http://jsfiddle.net/yE2EC/1/
0
 
LVL 32

Author Comment

by:DrDamnit
ID: 39773433
OK, clearly this is user error on my part. Your JSFiddle works for me too, which means all is well with my browser and the code (plugin) itself.

The code for this page is 618 lines long and mostly PHP. So, I am going to try and give you the relevant highlights.

In the header I have:
<head>
<script src="/js/mention.js"></script>
<link rel="stylesheet" type="text/css" href="/css/autocomplete.css">
<link rel="stylesheet" type="text/css" href="/css/rte-content.css">
</head>

Open in new window


mention.js is available. It's there. http://testserver.local/js/mention.js comes up.

Just after <body> I have:
<script>
	$(document).ready(function(e) {
		tinymce.init({
			selector:'textarea.update',
			menubar:false,
			toolbar:"undo redo | bold italic | bullist numlist | link unlink",
			width:'100%',
			plugins: "link,mention",
			mentions:
			{
				source: [
					{ name: "Michael" },
					{ name: "Erica" },
					{ name: "Sloan" }
					]
			}			
		});
	});	

     //...some other javascript functions that are known-good and work....
</script>

Open in new window


Then later:
        	<form method="post" id="postCommentForm">
            <div class="col-md-12 col-sm-12">
                <textarea id="update" name="update" class="update"></textarea>
                <input type="hidden" name="has-attachment" id="has-attachment" value="0" />
                <input type="hidden" name="attachment-path" id="attachment-path" value="" />
                <input type="hidden" name="attachment-type" id="attachment-type" value="" />
<!-- Some PHP code that is not relevant, is known-good, works and controls some other hidden fields and which button is shown to the user. -->
</form>

Open in new window


That's it.

So, I am pretty sure something is setup correctly, and it's something I did on the javascript / jQuery side.

Thoughts? Do you see something I don't?
0
 
LVL 32

Author Closing Comment

by:DrDamnit
ID: 39773448
The problem (as you so astutely pointed out) was that I was using CacheFly instead of hosting my own copy. When I got rid of the cachefly reference, downloaded the whole tinymce package, and put the mention plugin in that package, everything started to work perfectly.

Thank you!

I was beating my head against the wall for half the day with this yesterday!
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses four methods for overlaying images in a container on a web page
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now