Solved

How to setup the TinyMCE mention plugin?

Posted on 2014-01-10
3
1,439 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

813 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

10 Experts available now in Live!

Get 1:1 Help Now