My Standard Implementation for TinyMCE

These are my default tinymce.init({}) settings for TinyMCE. Below you'll find my explanation for each of these settings.


When building a new web application I like to treat .editor as a reserved word in css. Once I have set my selector any textarea with the .editor class will pickup the textarea. Using something generic as opposed to .tinymce makes switching to a different editor a little less akward.


Wysiwyg is only accurate if the editor knows how the content is supposed to look. To achieve this your can create a stylesheet that tells the editor just enough to properly style the content or you can give the editor your sites style sheet and or any combo of style sheets. For I am calling two style sheets, content_css: '/vendors/bootstrap/css/bootstrap.min.css, /theme/my-tbs-theme/css/theme.css'. The first is the the default style sheet for Twitter - Bootstrap (TBS), the second is my TBS theme. This way I can apply any styles from TBS and any styles from my TBS theme directly to my content and know how it will look when published. There can be some conflict as TinyMCE loads into a body tag with a class of .mce-content-body, if (for example) you are using CakePHP's default stylesheet your editor will load a blue background; for my cursor loads 70px off of the top, this is because TinyMCE is inheriting the styles applied to body. This how ever can be easily overridden as follows body.mce-content-body{ padding: .5em; background: #fff; }


A comma separated list of the plugins I want to load by default


Shows/hides an additional menu bar, my personal preference is to set this to false.


Defines the items to be loaded in the toolbar, again this is a matter personal preference.


Setting this to true seems to make the autoresize functionality a little more reliable.


Setting this t true will use the browser's spell check instead of TinyMCE's. While this is less constant across browsers, it seems to be a little more reliable than TinyMCE's spellcheck plugin.


Helps with DOM validation by allowing you to validate against html4 or html5 with various degrees of strictness.

relative_urls, remove_script_host, document_base_url and convert_urls

By default TinyMCE seems to tack on additional ../ at the beginning of relative calls using the settings defined below seems to get this to settle down.

selector: '.editor',
content_css: '/vendors/bootstrap/css/bootstrap.min.css, /theme/my-tbs-theme/css/theme.css',
plugins: 'autoresize, code, image, link, media',
menubar: false,
toolbar: "undo redo | styleselect | bold italic | numlist bullist | image link media | code",
auto_resize : true,
browser_spellcheck : true,
schema: "html5",
//Fix for image src maddness
relative_urls : false,
remove_script_host : true,
document_base_url : "/",
convert_urls : true