2 * WP Fullscreen TinyMCE plugin
4 * Contains code from Moxiecode Systems AB released under LGPL License http://tinymce.moxiecode.com/license
8 tinymce.create('tinymce.plugins.wpFullscreenPlugin', {
10 init : function(ed, url) {
11 var t = this, oldHeight = 0, s = {}, DOM = tinymce.DOM;
14 ed.addCommand('wpFullScreenClose', function() {
15 // this removes the editor, content has to be saved first with tinyMCE.execCommand('wpFullScreenSave');
16 if ( ed.getParam('wp_fullscreen_is_enabled') ) {
17 DOM.win.setTimeout(function() {
19 DOM.remove('wp_mce_fullscreen_parent');
20 tinyMCE.settings = tinyMCE.oldSettings; // Restore old settings
25 ed.addCommand('wpFullScreenSave', function() {
26 var ed = tinyMCE.get('wp_mce_fullscreen'), edd;
29 edd = tinyMCE.get( ed.getParam('wp_fullscreen_editor_id') );
31 edd.setContent( ed.getContent({format : 'raw'}), {format : 'raw'} );
34 ed.addCommand('wpFullScreenInit', function() {
37 ed = tinyMCE.activeEditor;
41 tinyMCE.oldSettings = tinyMCE.settings; // Store old settings
43 tinymce.each(ed.settings, function(v, n) {
47 s.id = 'wp_mce_fullscreen';
48 s.wp_fullscreen_is_enabled = true;
49 s.wp_fullscreen_editor_id = ed.id;
50 s.theme_advanced_resizing = false;
51 s.theme_advanced_statusbar_location = 'none';
52 s.content_css = s.content_css ? s.content_css + ',' + s.wp_fullscreen_content_css : s.wp_fullscreen_content_css;
53 s.height = tinymce.isIE ? b.scrollHeight : b.offsetHeight;
55 tinymce.each(ed.getParam('wp_fullscreen_settings'), function(v, k) {
59 fsed = new tinymce.Editor('wp_mce_fullscreen', s);
60 fsed.onInit.add(function(edd) {
61 var DOM = tinymce.DOM, buttons = DOM.select('a.mceButton', DOM.get('wp-fullscreen-buttons'));
64 edd.setContent( ed.getContent() );
66 edd.setContent( switchEditors.wpautop( edd.getElement().value ) );
68 setTimeout(function(){ // add last
69 edd.onNodeChange.add(function(ed, cm, e){
70 tinymce.each(buttons, function(c) {
73 if ( btn = DOM.get( 'wp_mce_fullscreen_' + c.id.substr(6) ) ) {
83 edd.dom.addClass(edd.getBody(), 'wp-fullscreen-editor');
89 if ( 'undefined' != fullscreen ) {
90 fsed.dom.bind( fsed.dom.doc, 'mousemove', function(e){
91 fullscreen.bounder( 'showToolbar', 'hideToolbar', 2000, e );
97 if ( 'undefined' != fullscreen ) {
98 ed.addButton('wp_fullscreen', {
99 title : 'fullscreen.desc',
100 onclick : function(){ fullscreen.on(); }
105 //----------------------------------------------------------------
108 if ( ed.getParam('fullscreen_is_enabled') || !ed.getParam('wp_fullscreen_is_enabled') )
112 * This method gets executed each time the editor needs to resize.
115 var d = ed.getDoc(), DOM = tinymce.DOM, resizeHeight, myHeight;
117 // Get height differently depending on the browser used
118 if ( tinymce.isWebKit )
119 myHeight = d.body.offsetHeight;
121 myHeight = d.body.scrollHeight;
123 // Don't make it smaller than 300px
124 resizeHeight = (myHeight > 300) ? myHeight : 300;
126 // Resize content element
127 if ( oldHeight != resizeHeight ) {
128 DOM.setStyle(DOM.get(ed.id + '_ifr'), 'height', resizeHeight + 'px');
129 oldHeight = resizeHeight;
130 ed.getWin().scrollTo(0,0);
134 // Add appropriate listeners for resizing content area
135 ed.onInit.add(function(ed, l) {
136 ed.onChange.add(resize);
137 ed.onSetContent.add(resize);
138 ed.onPaste.add(resize);
139 ed.onKeyUp.add(resize);
140 ed.onPostRender.add(resize);
142 ed.getBody().style.overflowY = "hidden";
145 if (ed.getParam('autoresize_on_init', true)) {
146 ed.onLoadContent.add(function(ed, l) {
147 // Because the content area resizes when its content CSS loads,
148 // and we can't easily add a listener to its onload event,
149 // we'll just trigger a resize after a short loading period
150 setTimeout(function() {
156 // Register the command so that it can be invoked by using tinyMCE.activeEditor.execCommand('mceExample');
157 ed.addCommand('wpAutoResize', resize);
160 getInfo : function() {
162 longname : 'WP Fullscreen',
163 author : 'WordPress',
164 authorurl : 'http://wordpress.org',
172 tinymce.PluginManager.add('wpfullscreen', tinymce.plugins.wpFullscreenPlugin);