Improve company productivity with a Business Account.Sign Up

x
?
Solved

How to setup the TinyMCE mention plugin?

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

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Find out what you should include to make the best professional email signature for your organization.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

606 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