Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to setup the TinyMCE mention plugin?

Posted on 2014-01-10
3
Medium Priority
?
1,743 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 83

Accepted Solution

by:
leakim971 earned 2000 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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

927 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