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.

selector

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.

content_css

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 jasonsnider.com 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 jasonsnider.com 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; }. 

plugins

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

menubar

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

toolbar

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

auto_resize

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

browser_spellcheck

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.

schema

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.

tinymce.init({
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
//http://ellislab.com/forums/viewthread/130868/#645748
relative_urls : false,
remove_script_host : true,
document_base_url : "/",
convert_urls : true
});