1 /** |
1 /** |
2 * $Id: editor_template_src.js 162 2007-01-03 16:16:52Z spocke $ |
2 * $Id: editor_template_src.js 382 2007-11-13 14:48:38Z 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. |
3 * |
6 * |
4 * @author Moxiecode |
7 * @author Moxiecode |
5 * @copyright Copyright © 2004-2007, Moxiecode Systems AB, All rights reserved. |
8 * @copyright Copyright © 2004-2007, Moxiecode Systems AB, All rights reserved. |
6 */ |
9 */ |
7 |
10 |
8 var TinyMCE_SimpleTheme = { |
11 (function() { |
9 // List of button ids in tile map |
12 var DOM = tinymce.DOM; |
10 _buttonMap : 'bold,bullist,cleanup,italic,numlist,redo,strikethrough,underline,undo', |
|
11 |
13 |
12 getEditorTemplate : function() { |
14 // Tell it to load theme specific language pack(s) |
13 var html = ''; |
15 tinymce.ThemeManager.requireLangPack('simple'); |
14 |
16 |
15 html += '<table class="mceEditor" border="0" cellpadding="0" cellspacing="0" width="{$width}" height="{$height}">'; |
17 tinymce.create('tinymce.themes.SimpleTheme', { |
16 html += '<tr><td align="center">'; |
18 init : function(ed, url) { |
17 html += '<span id="{$editor_id}">IFRAME</span>'; |
19 var t = this, states = ['Bold', 'Italic', 'Underline', 'Strikethrough', 'InsertUnorderedList', 'InsertOrderedList'], s = ed.settings; |
18 html += '</td></tr>'; |
|
19 html += '<tr><td class="mceToolbar" align="center" height="1">'; |
|
20 html += tinyMCE.getButtonHTML('bold', 'lang_bold_desc', '{$themeurl}/images/{$lang_bold_img}', 'Bold'); |
|
21 html += tinyMCE.getButtonHTML('italic', 'lang_italic_desc', '{$themeurl}/images/{$lang_italic_img}', 'Italic'); |
|
22 html += tinyMCE.getButtonHTML('underline', 'lang_underline_desc', '{$themeurl}/images/{$lang_underline_img}', 'Underline'); |
|
23 html += tinyMCE.getButtonHTML('strikethrough', 'lang_striketrough_desc', '{$themeurl}/images/strikethrough.gif', 'Strikethrough'); |
|
24 html += '<img src="{$themeurl}/images/separator.gif" width="2" height="20" class="mceSeparatorLine" />'; |
|
25 html += tinyMCE.getButtonHTML('undo', 'lang_undo_desc', '{$themeurl}/images/undo.gif', 'Undo'); |
|
26 html += tinyMCE.getButtonHTML('redo', 'lang_redo_desc', '{$themeurl}/images/redo.gif', 'Redo'); |
|
27 html += '<img src="{$themeurl}/images/separator.gif" width="2" height="20" class="mceSeparatorLine" />'; |
|
28 html += tinyMCE.getButtonHTML('cleanup', 'lang_cleanup_desc', '{$themeurl}/images/cleanup.gif', 'mceCleanup'); |
|
29 html += '<img src="{$themeurl}/images/separator.gif" width="2" height="20" class="mceSeparatorLine" />'; |
|
30 html += tinyMCE.getButtonHTML('bullist', 'lang_bullist_desc', '{$themeurl}/images/bullist.gif', 'InsertUnorderedList'); |
|
31 html += tinyMCE.getButtonHTML('numlist', 'lang_numlist_desc', '{$themeurl}/images/numlist.gif', 'InsertOrderedList'); |
|
32 html += '</td></tr></table>'; |
|
33 |
20 |
34 return { |
21 t.editor = ed; |
35 delta_width : 0, |
|
36 delta_height : 20, |
|
37 html : html |
|
38 }; |
|
39 }, |
|
40 |
22 |
41 handleNodeChange : function(editor_id, node) { |
23 ed.onInit.add(function() { |
42 // Reset old states |
24 ed.onNodeChange.add(function(ed, cm) { |
43 tinyMCE.switchClass(editor_id + '_bold', 'mceButtonNormal'); |
25 tinymce.each(states, function(c) { |
44 tinyMCE.switchClass(editor_id + '_italic', 'mceButtonNormal'); |
26 cm.get(c.toLowerCase()).setActive(ed.queryCommandState(c)); |
45 tinyMCE.switchClass(editor_id + '_underline', 'mceButtonNormal'); |
27 }); |
46 tinyMCE.switchClass(editor_id + '_strikethrough', 'mceButtonNormal'); |
28 }); |
47 tinyMCE.switchClass(editor_id + '_bullist', 'mceButtonNormal'); |
|
48 tinyMCE.switchClass(editor_id + '_numlist', 'mceButtonNormal'); |
|
49 |
29 |
50 // Handle elements |
30 ed.dom.loadCSS(url + "/skins/" + s.skin + "/content.css"); |
51 do { |
31 }); |
52 switch (node.nodeName.toLowerCase()) { |
|
53 case "b": |
|
54 case "strong": |
|
55 tinyMCE.switchClass(editor_id + '_bold', 'mceButtonSelected'); |
|
56 break; |
|
57 |
32 |
58 case "i": |
33 DOM.loadCSS(url + "/skins/" + s.skin + "/ui.css"); |
59 case "em": |
34 }, |
60 tinyMCE.switchClass(editor_id + '_italic', 'mceButtonSelected'); |
|
61 break; |
|
62 |
35 |
63 case "u": |
36 renderUI : function(o) { |
64 tinyMCE.switchClass(editor_id + '_underline', 'mceButtonSelected'); |
37 var t = this, n = o.targetNode, ic, tb, ed = t.editor, cf = ed.controlManager, sc; |
65 break; |
|
66 |
38 |
67 case "strike": |
39 n = DOM.insertAfter(DOM.create('div', {id : ed.id + '_container', 'class' : 'mceEditor ' + ed.settings.skin + 'Skin'}), n); |
68 tinyMCE.switchClass(editor_id + '_strikethrough', 'mceButtonSelected'); |
40 n = sc = DOM.add(n, 'table', {cellPadding : 0, cellSpacing : 0, 'class' : 'mceLayout'}); |
69 break; |
41 n = tb = DOM.add(n, 'tbody'); |
70 |
|
71 case "ul": |
|
72 tinyMCE.switchClass(editor_id + '_bullist', 'mceButtonSelected'); |
|
73 break; |
|
74 |
42 |
75 case "ol": |
43 // Create iframe container |
76 tinyMCE.switchClass(editor_id + '_numlist', 'mceButtonSelected'); |
44 n = DOM.add(tb, 'tr'); |
77 break; |
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 last', 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 |
78 } |
80 } |
79 } while ((node = node.parentNode) != null); |
81 } |
80 } |
82 }); |
81 }; |
|
82 |
83 |
83 tinyMCE.addTheme("simple", TinyMCE_SimpleTheme); |
84 tinymce.ThemeManager.add('simple', tinymce.themes.SimpleTheme); |
84 tinyMCE.addButtonMap(TinyMCE_SimpleTheme._buttonMap); |
85 })(); |