[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

How to setup the TinyMCE mention plugin?

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

Learn to develop an Android App

Want to increase your earning potential in 2018? Pad your resume with app building experience. Learn how with this hands-on course.

Question has a verified solution.

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

Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Suggested Courses

607 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