TinyMCE Advanced Editor

 Advanced Plugin is a plugin that you can activate on your website to add more options and features to the toolbar of your text editor.

Once you activate this plugin through your dashboard, the plugin will add some new buttons onto your toolbar by default.

You can edit the button arrangements and add some more buttons available to you through the “TinyMCE Advanced” settings. Simply go to your Settings on your dashboard and you will see a new settings page for TinyMCE Advanced.

The two blank grey rectangles are two new rows for your toolbar and you can fill them with whatever buttons you drag and drop through this settings page.

So let’s go over some of the buttons that might be most helpful to you…

  • Horizontal rule: Allows you to add horizontal lines
  • Quote: Like the “Blockquote” button that is on the default text editor prior to activating the plugin
  • Replace: This will be a “search and replace” option in which you can find every instance of a word and automatically replace it with a different word
  • Font Family: Gives you more flexibility to use different fonts
  • Table: Allows you to add tables
  • Citations: Like “Quote” but for citations
  • Advanced HR: Gives options for more stylized lines than the simple “Horizontal rule” button
  • NB Space: Allows you to add blank lines or “non-breaking spaces.”
  • Anchor: Allows you to add anchors to link to specific parts of your post or page

Once you decide which buttons you want to add to your toolbar, make sure that none of your rows are too long.

Click “Save Changes” and you will now see these buttons in your text editor.

FAQs

Where Can I Find Documentation?

  1. Fully detailed
  2. For Dummies

How can I upload image files from my local computer?

Short answer: You can't!

Long answer: TinyMCE is just an editor to output (X)HTML code. It is by no means comparable to web editing desktop software such as Adobe Dreamweaver, Go Live! or Microsoft Web Expressions and the like. It runs on a user's browser (client-side) and not on a server. If you want to upload pictures to a server then you need a server-side component to process your image files. TinyMCE can't do that on its own since it doesn't run on the server but on the user's browser.

However there are two commercial plugins that enable you to upload files since they come with a server-side component. These are MCImageManager and MCFileManager.

In addition, there are two Open Source plugins which accomplish this same purpose. These include IMCE and Ibrowser. Note that these are both released under the GPL, which may not be acceptable for many commercial applications.

TinyMCE is a front-end for systems that need a client-side WYSIWYG editor (like many CMSes do). You can see it like an independent component that can be integrated into an existing system.

TinyMCE is broken, what should I do?

There are a few things you should check before posting questions about your problem at the forum or bugtracker.

  • Check that you haven't missed removing the last , (comma) character in your initialization code and that all the other rows have a trailing , character.
  • Does TinyMCE work on the TinyMCE website. Then you know that TinyMCE works with your browser.
  • Try to disable any other JavaScripts on the page, some scripts interfere with internal functions that TinyMCE uses. Those scripts are probably poorly written.
  • Verify that the path/URL to TinyMCE is correct, you can use the excellent tool Fiddler for this or Firebug.
  • Do not cross domain load TinyMCE or any other script unless you really really must, since this will invoke various browser security features. In other words, try placing everything on the same server.
  • Don't place textareas within paragraph elements since this is not valid HTML and it will break MSIE and TinyMCE.

I need to limit the number of characters a user can input

Answer yourself these two simple questions to understand that WYSIWYG and character count are in fact a contradiction.

  1. Why would you need to limit the number of characters a user can input into the editor?
  2. What do you need WYSIWYG for?

The interesting aspect about WYSIWYG and character count is how you "count out" the HTML code-related characters from the actual "text". And how do you intend to explain to your user why the character count has increased by 17 characters just because the user has turned something into bold print?

Read what main developer spocke has to say about character limit in TinyMCE. If this doesn't satisfy you then read on some posts later.

I need a language pack and have downloaded the XML file but it's not working!

You don't want the XML file! You want to check the checkboxes on the language pack service page in order to select the desired language packs and then you click the "download" button. This way you get a ZIP file which contains JavaScript files. It is those files you are after!

The XML file is for those who wish to complete or update/improve the already existing language files. These people can then work on the respective XML file and upload it back to the server so others can then re-download an updated language pack.

Paths/URLs are incorrect, I want absolute/relative URLs?

These are the different configuration scenarios for URLs within TinyMCE. There is also an example page illustrating these different options:

Relative URLs

This will convert all URLs within the same domain to relative URLs. The URLs will be relative from the document_base_url.

relative_urls : true,
document_base_url : "http://www.site.com/path1/"

Example: http://www.site.com/path1/path2/file.htm >> path2/file.htm

Absolute URLs

This will convert all relative URLs to absolute URLs. The URLs will be absolute based on the document_base_url.

relative_urls : false,
remove_script_host : true,
document_base_url : "http://www.site.com/path1/"

Example: path2/file.htm >> /path1/path2/file.htm

Domain Absolute URLs

This will convert all relative URLs to absolute URLs. The URLs will be absolute based on the document_base_url with domain.

relative_urls : false,
remove_script_host : false,
document_base_url : "http://www.site.com/path1/"

Example: path2/file.htm >> http://www.site.com/path1/path2/file.htm

No URL Conversion

This option will preserve the URLs as they are in a separate attribute while editing, since browsers tend to auto convert URLs.

convert_urls : false

Example: path2/file.htm or http://www.site.com/path1/path2/file.htm will not be converted at all.

Note: Some versions of Internet Explorer may continue to convert URLs even with convert_urls set to false. Consider using the valid_elements initialization option and excluding the a (anchor) tag. See http://stackoverflow.com/questions/687552/prevent-tinymce-internet-explorer-from-converting-urls-to-links for more on this issue.

TinyMCE strip away attributes or tags from my source?

You need to check out the valid_elements and extended_valid_elements option in the configuration. By default, TinyMCE only allows certain tags and attributes. TinyMCE also tries to follow the XHTML specification as much as possible, this can cause some unexpected source changes, there are however configuration options to battle this issue, study the configuration options in details.

TinyMCE strips away or alters my server-side code

So you mix HTML markup with server-side logic? Moxiecode developer spocke explains in the forum why this is a problem and cannot be overcome with TinyMCE in a sensible way. Remember: TinyMCE is an editor control which is made so _end users_ could edit content in a rich text environment. It is by no means meant to be an IDE! However there are third-party plugins which try to do exactly that...

How do I change the default font size/face color of the editor?

We recommend that you have a look at the content_css option, this enables you to switch the CSS file TinyMCE uses for its editing area with a file with your CSS rules for font size and so forth.

How do I remove/add buttons/controls to TinyMCE?

There are quite a few options for this but a reference of all available buttons/control names can be found in the button/control reference.

TinyMCE adds BR elements to my content

No it should not, if you are using PHP, check so that you are not using nl2br() function in PHP on the posted contents.

TinyMCE produce P elements on enter/return instead of BR elements?

TinyMCE produced P tags on enter by default since all desktop and online word processors use the concept of paragraphs on enter and it also makes your content semantic. If you for some reason need BR elements use the forced_root_block option in TinyMCE 3.5.

So if you really really must use BR elements for some reason use this:

tinyMCE.init({
   forced_root_block : false
});

HTML output include lots of \" like <a href=\"mylink.htm\">link</a>?

This is probably because you are using PHP and it has a feature that's called magic quotes that is enabled by default. You can read more about this in the PHP documentation.

A quick way to clean up magic quotes is to use

stripslashes($_POST['text']);

You can also clean up all magic quotes with this (taken from the PHP manual):

if (get_magic_quotes_gpc()) {
    function stripslashes_deep($value)
    {
        $value = is_array($value) ?
                    array_map('stripslashes_deep', $value) :
                    stripslashes($value);

        return $value;
    }

    $_POST = array_map('stripslashes_deep', $_POST);
    $_GET = array_map('stripslashes_deep', $_GET);
    $_COOKIE = array_map('stripslashes_deep', $_COOKIE);
    $_REQUEST = array_map('stripslashes_deep', $_REQUEST);
}

TinyMCE encodes < and > characters in written text?

See the next question for details.

TinyMCE removes &nbsp; entities from my content?

No, TinyMCE doesn't remove them it's the browser that converts them before the textarea is converted into an editor instance. This is because the contents in your textarea isn't properly entity encoded.

This is wrong, paragraphs can not be placed inside textareas check the W3C specs and the nbsp will be parsed away by the browser:

<textarea><p>1 &nbsp; 2</p></textarea>

This is right, notice that both the nbsp and the paragraphs are now encoded:

<textarea>&lt;p&gt;1 &amp;nbsp; 2&lt;/p&gt;</textarea>

To do this automatically use this line in PHP:

<textarea><?php echo htmlentities($data);?></textarea>.

TinyMCE isn't working in Internet Explorer but other browsers are fine?

The most common mistake is a trailing comma character after the last element in the init, e.g:

<script language="javascript" type="text/javascript">//<![CDATA[
tinyMCE.init({
        theme : "advanced",
        mode : "textareas", // this comma is wrong!
});
//]]></script>

The last comma has to be removed!

TinyMCE isn't working any more in any browser - what went wrong?

TinyMCE worked great in any browser, but all of a sudden it doesn't load any more. You coded a lot and don't know which of those changes might have caused that failure.

Most probably you added a new rule in the init (which you might not even remember) and forgot to add a comma at the end of the line, if it wasn't the last (see question before), e.g.:

<script language="javascript" type="text/javascript">
tinyMCE.init({
        theme : "advanced",
        theme_advanced_resizing : true,
        tab_focus : ':prev,:next' <-- 
        invalid_elements : "a"    <-- 
});
</script>

Add a comma and everythings works like a breeze again!

TinyMCE isn't working in one script but in others - what is wrong?

There may be many reasons for this, but one to look for is the definition of any referenced variables, like this:

<script language="javascript" type="text/javascript">//<![CDATA[
tinyMCE.init({
        theme : "advanced",
        language : label_language, // this variable must exist already!
        skin_variant : "silver"
});
//]]</script>

Make sure that you define this variable before tinyMCE.init is called like this (otherwise tinyMCE will not appear):

<script type="text/javascript">//<![CDATA[
        var label_language = "de";
//]]></script>

Select if default text, then delete when typing starts?

To help and guide users, it might be wise first to set focus to the textarea, second to add a default text to it (with instructions or an affirmation) and highlight that default text, but only if the user has not provided any text of her own previously; of course, this default text should be erased if the user starts to edit (she should replace the default with her own content). How to do that?

Provide for the default before you initialize tinyMCE, for example like this:

   <script type='text/javascript'>
       var default_value = 'Please replace this dummy content with your own!;
   </script>

Add this to your init:

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    //.................., and so on, then

    setup : function(ed) {
        var is_default = false;
        ed.onInit.add(function(ed) { 
            ed.focus();
    
            // set the focus
            var cont = ed.getContent();
    
            // get the current content
            slen = cont.length;
            cont = cont.substring(3,slen-4);
    
            // cut off <p> and </p> to comply with XHTML strict
            // these can't be part of the default_value 
            is_default = (cont == tiny_mce_default_value);
        
            // compare those strings
            if (!is_default)
                return;
        
            // nothing to do
            ed.selection.select(ed.dom.select('p')[0]);
        
            // select the first (and in this case only) paragraph
        });
    
        ed.onMouseDown.add(function(ed,e) {
            if (!is_default)
                return;
    
            // nothing to do
            ed.selection.setContent('');
            // replace the default content with nothing
        });

        // The onload-event in IE fires before TinyMCE has created the Editors,
        // so it is no good solution here.
    }
});

Make sure that this default content is given as value to your textarea at startup only.

TinyMCE doesn't show styles in styles dropdown

So you want the styles dropdown to actually show how the element will look like when a certain class name gets applied to it? This could cause huge problems based on the style rules in your CSS. Read what main developer spocke has written about this issue.

TinyMCE does not update the content when I set a new text in textarea by JavaScript

TinyMCE reads the content of the <textarea> element only on start, and writes it when the edition is done. If you want to change the edited content, do not update the <textarea> but call editor's setContent method.

You may also read the How to load/save with Ajax in TinyMCE article.

Loading is slow, is there a way to make it load quicker?

There is a extra package for TinyMCE called TinyMCE compressor that reduces download and initialization time dramatically by using GZip to compress the JavaScript files.

Change default text color/editor background in TinyMCE?

You need to specify a content css file with the content_css option in order to change the default text color or background of the editor. The specified CSS is loaded after the default CSS so you can use it to override. A good idea to check the CSS status of elements is to install Firebug addon to Firefox.

Edit a full page (with <html> and <head> tags) in TinyMCE?

By default TinyMCE is only interested in your page's content which is contained within the document's <body> part. If you want to have TinyMCE edit every part of your document, especially the <head> section, then you'll need the fullpage plugin.

Can I use TinyMCE in my commercial application?

Yes you can, the LGPL license is a Free Software License. You can read the whole license here or visit Free Software Foundation web site.

Are there any restrictions to using TinyMCE in my commercial application?

Yes, there are restrictions including the following.

All copyright notices must be intact as Moxiecode Systems are the copyright owners of the source code.

You cannot use the source code in your applications without complying with the LGPL. According to the provisions of the LGPL, any modifications or add-ons you make to the source have to be released for the community's benefit. We recommend that you always contribute your changes back to the TinyMCE community, regardless of the situation.

If you start to make a lot of revenue from using TinyMCE, please remember the time and dedication that has been put into this by other developers, respect this and give credit to those who deserve it.

I don't like LGPL, is there a commercial license available for me?

Yes, through our partners you can obtain commercial licenses and premium support. One such partner is Ephox, more information is available from the Ephox TinyMCE Site.

Do you provide support?

We do not provide any non-commercial support outside the forum on the TinyMCE web site. Read more about commercial support on our support page.

Who made this software?

The major author of TinyMCE is Moxiecode Systems AB. Portions of the code have also been contributed by others.