1 /**

     2  * $Id: editor_template_src.js 920 2008-09-09 14:05:33Z spocke $

     3  *

     4  * This file is meant to showcase how to create a simple theme. The advanced

     5  * theme is more suitable for production use.

     6  *

     7  * @author Moxiecode

     8  * @copyright Copyright © 2004-2008, Moxiecode Systems AB, All rights reserved.

     9  */

    10 

    11 (function() {

    12 	var DOM = tinymce.DOM;

    13 

    14 	// Tell it to load theme specific language pack(s)

    15 	tinymce.ThemeManager.requireLangPack('simple');

    16 

    17 	tinymce.create('tinymce.themes.SimpleTheme', {

    18 		init : function(ed, url) {

    19 			var t = this, states = ['Bold', 'Italic', 'Underline', 'Strikethrough', 'InsertUnorderedList', 'InsertOrderedList'], s = ed.settings;

    20 

    21 			t.editor = ed;

    22 

    23 			ed.onInit.add(function() {

    24 				ed.onNodeChange.add(function(ed, cm) {

    25 					tinymce.each(states, function(c) {

    26 						cm.get(c.toLowerCase()).setActive(ed.queryCommandState(c));

    27 					});

    28 				});

    29 

    30 				ed.dom.loadCSS(url + "/skins/" + s.skin + "/content.css");

    31 			});

    32 

    33 			DOM.loadCSS((s.editor_css ? ed.documentBaseURI.toAbsolute(s.editor_css) : '') || url + "/skins/" + s.skin + "/ui.css");

    34 		},

    35 

    36 		renderUI : function(o) {

    37 			var t = this, n = o.targetNode, ic, tb, ed = t.editor, cf = ed.controlManager, sc;

    38 

    39 			n = DOM.insertAfter(DOM.create('span', {id : ed.id + '_container', 'class' : 'mceEditor ' + ed.settings.skin + 'SimpleSkin'}), n);

    40 			n = sc = DOM.add(n, 'table', {cellPadding : 0, cellSpacing : 0, 'class' : 'mceLayout'});

    41 			n = tb = DOM.add(n, 'tbody');

    42 

    43 			// Create iframe container

    44 			n = DOM.add(tb, 'tr');

    45 			n = ic = DOM.add(DOM.add(n, 'td'), 'div', {'class' : 'mceIframeContainer'});

    46 

    47 			// Create toolbar container

    48 			n = DOM.add(DOM.add(tb, 'tr', {'class' : 'last'}), 'td', {'class' : 'mceToolbar mceLast', align : 'center'});

    49 

    50 			// Create toolbar

    51 			tb = t.toolbar = cf.createToolbar("tools1");

    52 			tb.add(cf.createButton('bold', {title : 'simple.bold_desc', cmd : 'Bold'}));

    53 			tb.add(cf.createButton('italic', {title : 'simple.italic_desc', cmd : 'Italic'}));

    54 			tb.add(cf.createButton('underline', {title : 'simple.underline_desc', cmd : 'Underline'}));

    55 			tb.add(cf.createButton('strikethrough', {title : 'simple.striketrough_desc', cmd : 'Strikethrough'}));

    56 			tb.add(cf.createSeparator());

    57 			tb.add(cf.createButton('undo', {title : 'simple.undo_desc', cmd : 'Undo'}));

    58 			tb.add(cf.createButton('redo', {title : 'simple.redo_desc', cmd : 'Redo'}));

    59 			tb.add(cf.createSeparator());

    60 			tb.add(cf.createButton('cleanup', {title : 'simple.cleanup_desc', cmd : 'mceCleanup'}));

    61 			tb.add(cf.createSeparator());

    62 			tb.add(cf.createButton('insertunorderedlist', {title : 'simple.bullist_desc', cmd : 'InsertUnorderedList'}));

    63 			tb.add(cf.createButton('insertorderedlist', {title : 'simple.numlist_desc', cmd : 'InsertOrderedList'}));

    64 			tb.renderTo(n);

    65 

    66 			return {

    67 				iframeContainer : ic,

    68 				editorContainer : ed.id + '_container',

    69 				sizeContainer : sc,

    70 				deltaHeight : -20

    71 			};

    72 		},

    73 

    74 		getInfo : function() {

    75 			return {

    76 				longname : 'Simple theme',

    77 				author : 'Moxiecode Systems AB',

    78 				authorurl : 'http://tinymce.moxiecode.com',

    79 				version : tinymce.majorVersion + "." + tinymce.minorVersion

    80 			}

    81 		}

    82 	});

    83 

    84 	tinymce.ThemeManager.add('simple', tinymce.themes.SimpleTheme);

    85 })();