equal
deleted
inserted
replaced
20 if ( ! tinymce && window.tinymce ) { |
20 if ( ! tinymce && window.tinymce ) { |
21 tinymce = window.tinymce; |
21 tinymce = window.tinymce; |
22 $$ = tinymce.$; |
22 $$ = tinymce.$; |
23 |
23 |
24 /** |
24 /** |
25 * Handles onclick events for the Visual/Text tabs. |
25 * Handles onclick events for the Visual/Code tabs. |
26 * |
26 * |
27 * @since 4.3.0 |
27 * @since 4.3.0 |
28 * |
28 * |
29 * @return {void} |
29 * @return {void} |
30 */ |
30 */ |
60 |
60 |
61 return 30; |
61 return 30; |
62 } |
62 } |
63 |
63 |
64 /** |
64 /** |
65 * Switches the editor between Visual and Text mode. |
65 * Switches the editor between Visual and Code mode. |
66 * |
66 * |
67 * @since 2.5.0 |
67 * @since 2.5.0 |
68 * |
68 * |
69 * @memberof switchEditors |
69 * @memberof switchEditors |
70 * |
70 * |
77 mode = mode || 'toggle'; |
77 mode = mode || 'toggle'; |
78 |
78 |
79 var editorHeight, toolbarHeight, iframe, |
79 var editorHeight, toolbarHeight, iframe, |
80 editor = tinymce.get( id ), |
80 editor = tinymce.get( id ), |
81 wrap = $$( '#wp-' + id + '-wrap' ), |
81 wrap = $$( '#wp-' + id + '-wrap' ), |
|
82 htmlSwitch = wrap.find( '.switch-tmce' ), |
|
83 tmceSwitch = wrap.find( '.switch-html' ), |
82 $textarea = $$( '#' + id ), |
84 $textarea = $$( '#' + id ), |
83 textarea = $textarea[0]; |
85 textarea = $textarea[0]; |
84 |
86 |
85 if ( 'toggle' === mode ) { |
87 if ( 'toggle' === mode ) { |
86 if ( editor && ! editor.isHidden() ) { |
88 if ( editor && ! editor.isHidden() ) { |
101 window.QTags.closeAllTags( id ); |
103 window.QTags.closeAllTags( id ); |
102 } |
104 } |
103 |
105 |
104 editorHeight = parseInt( textarea.style.height, 10 ) || 0; |
106 editorHeight = parseInt( textarea.style.height, 10 ) || 0; |
105 |
107 |
106 var keepSelection = false; |
108 addHTMLBookmarkInTextAreaContent( $textarea ); |
107 if ( editor ) { |
|
108 keepSelection = editor.getParam( 'wp_keep_scroll_position' ); |
|
109 } else { |
|
110 keepSelection = window.tinyMCEPreInit.mceInit[ id ] && |
|
111 window.tinyMCEPreInit.mceInit[ id ].wp_keep_scroll_position; |
|
112 } |
|
113 |
|
114 if ( keepSelection ) { |
|
115 // Save the selection. |
|
116 addHTMLBookmarkInTextAreaContent( $textarea ); |
|
117 } |
|
118 |
109 |
119 if ( editor ) { |
110 if ( editor ) { |
120 editor.show(); |
111 editor.show(); |
121 |
112 |
122 // No point to resize the iframe in iOS. |
113 // No point to resize the iframe in iOS. |
128 if ( editorHeight > 50 && editorHeight < 5000 ) { |
119 if ( editorHeight > 50 && editorHeight < 5000 ) { |
129 editor.theme.resizeTo( null, editorHeight ); |
120 editor.theme.resizeTo( null, editorHeight ); |
130 } |
121 } |
131 } |
122 } |
132 |
123 |
133 if ( editor.getParam( 'wp_keep_scroll_position' ) ) { |
124 focusHTMLBookmarkInVisualEditor( editor ); |
134 // Restore the selection. |
|
135 focusHTMLBookmarkInVisualEditor( editor ); |
|
136 } |
|
137 } else { |
125 } else { |
138 tinymce.init( window.tinyMCEPreInit.mceInit[ id ] ); |
126 tinymce.init( window.tinyMCEPreInit.mceInit[ id ] ); |
139 } |
127 } |
140 |
128 |
141 wrap.removeClass( 'html-active' ).addClass( 'tmce-active' ); |
129 wrap.removeClass( 'html-active' ).addClass( 'tmce-active' ); |
|
130 tmceSwitch.attr( 'aria-pressed', false ); |
|
131 htmlSwitch.attr( 'aria-pressed', true ); |
142 $textarea.attr( 'aria-hidden', true ); |
132 $textarea.attr( 'aria-hidden', true ); |
143 window.setUserSetting( 'editor', 'tinymce' ); |
133 window.setUserSetting( 'editor', 'tinymce' ); |
144 |
134 |
145 } else if ( 'html' === mode ) { |
135 } else if ( 'html' === mode ) { |
146 // If the editor is hidden (Quicktags is shown) we don't need to switch. |
136 // If the editor is hidden (Quicktags is shown) we don't need to switch. |
166 } |
156 } |
167 } |
157 } |
168 |
158 |
169 var selectionRange = null; |
159 var selectionRange = null; |
170 |
160 |
171 if ( editor.getParam( 'wp_keep_scroll_position' ) ) { |
161 selectionRange = findBookmarkedPosition( editor ); |
172 selectionRange = findBookmarkedPosition( editor ); |
|
173 } |
|
174 |
162 |
175 editor.hide(); |
163 editor.hide(); |
176 |
164 |
177 if ( selectionRange ) { |
165 if ( selectionRange ) { |
178 selectTextInTextArea( editor, selectionRange ); |
166 selectTextInTextArea( editor, selectionRange ); |
182 // The TinyMCE editor instance doesn't exist. Show the textarea. |
170 // The TinyMCE editor instance doesn't exist. Show the textarea. |
183 $textarea.css({ 'display': '', 'visibility': '' }); |
171 $textarea.css({ 'display': '', 'visibility': '' }); |
184 } |
172 } |
185 |
173 |
186 wrap.removeClass( 'tmce-active' ).addClass( 'html-active' ); |
174 wrap.removeClass( 'tmce-active' ).addClass( 'html-active' ); |
|
175 tmceSwitch.attr( 'aria-pressed', true ); |
|
176 htmlSwitch.attr( 'aria-pressed', false ); |
187 $textarea.attr( 'aria-hidden', false ); |
177 $textarea.attr( 'aria-hidden', false ); |
188 window.setUserSetting( 'editor', 'html' ); |
178 window.setUserSetting( 'editor', 'html' ); |
189 } |
179 } |
190 } |
180 } |
191 |
181 |
518 |
508 |
519 /** |
509 /** |
520 * Focuses the selection markers in Visual mode. |
510 * Focuses the selection markers in Visual mode. |
521 * |
511 * |
522 * The method checks for existing selection markers inside the editor DOM (Visual mode) |
512 * The method checks for existing selection markers inside the editor DOM (Visual mode) |
523 * and create a selection between the two nodes using the DOM `createRange` selection API |
513 * and create a selection between the two nodes using the DOM `createRange` selection API. |
524 * |
514 * |
525 * If there is only a single node, select only the single node through TinyMCE's selection API |
515 * If there is only a single node, select only the single node through TinyMCE's selection API |
526 * |
516 * |
527 * @param {Object} editor TinyMCE editor instance. |
517 * @param {Object} editor TinyMCE editor instance. |
528 */ |
518 */ |
543 |
533 |
544 editor.selection.setRng( selection ); |
534 editor.selection.setRng( selection ); |
545 } |
535 } |
546 } |
536 } |
547 |
537 |
548 if ( editor.getParam( 'wp_keep_scroll_position' ) ) { |
538 scrollVisualModeToStartElement( editor, startNode ); |
549 scrollVisualModeToStartElement( editor, startNode ); |
|
550 } |
|
551 |
539 |
552 removeSelectionMarker( startNode ); |
540 removeSelectionMarker( startNode ); |
553 removeSelectionMarker( endNode ); |
541 removeSelectionMarker( endNode ); |
554 |
542 |
555 editor.save(); |
543 editor.save(); |
848 textArea.focus(); |
836 textArea.focus(); |
849 }, 100 ); |
837 }, 100 ); |
850 } |
838 } |
851 } |
839 } |
852 |
840 |
853 // Restore the selection when the editor is initialized. Needed when the Text editor is the default. |
841 // Restore the selection when the editor is initialized. Needed when the Code editor is the default. |
854 $( document ).on( 'tinymce-editor-init.keep-scroll-position', function( event, editor ) { |
842 $( document ).on( 'tinymce-editor-init.keep-scroll-position', function( event, editor ) { |
855 if ( editor.$( '.mce_SELRES_start' ).length ) { |
843 if ( editor.$( '.mce_SELRES_start' ).length ) { |
856 focusHTMLBookmarkInVisualEditor( editor ); |
844 focusHTMLBookmarkInVisualEditor( editor ); |
857 } |
845 } |
858 } ); |
846 } ); |
1213 window.switchEditors = new SwitchEditors(); |
1201 window.switchEditors = new SwitchEditors(); |
1214 |
1202 |
1215 /** |
1203 /** |
1216 * Initialize TinyMCE and/or Quicktags. For use with wp_enqueue_editor() (PHP). |
1204 * Initialize TinyMCE and/or Quicktags. For use with wp_enqueue_editor() (PHP). |
1217 * |
1205 * |
1218 * Intended for use with an existing textarea that will become the Text editor tab. |
1206 * Intended for use with an existing textarea that will become the Code editor tab. |
1219 * The editor width will be the width of the textarea container, height will be adjustable. |
1207 * The editor width will be the width of the textarea container, height will be adjustable. |
1220 * |
1208 * |
1221 * Settings for both TinyMCE and Quicktags can be passed on initialization, and are "filtered" |
1209 * Settings for both TinyMCE and Quicktags can be passed on initialization, and are "filtered" |
1222 * with custom jQuery events on the document element, wp-before-tinymce-init and wp-before-quicktags-init. |
1210 * with custom jQuery events on the document element, wp-before-tinymce-init and wp-before-quicktags-init. |
1223 * |
1211 * |
1256 settings = { |
1244 settings = { |
1257 tinymce: true |
1245 tinymce: true |
1258 }; |
1246 }; |
1259 } |
1247 } |
1260 |
1248 |
1261 // Add wrap and the Visual|Text tabs. |
1249 // Add wrap and the Visual|Code tabs. |
1262 if ( settings.tinymce && settings.quicktags ) { |
1250 if ( settings.tinymce && settings.quicktags ) { |
1263 var $textarea = $( '#' + id ); |
1251 var $textarea = $( '#' + id ); |
1264 |
1252 |
1265 var $wrap = $( '<div>' ).attr( { |
1253 var $wrap = $( '<div>' ).attr( { |
1266 'class': 'wp-core-ui wp-editor-wrap tmce-active', |
1254 'class': 'wp-core-ui wp-editor-wrap tmce-active', |
1303 'class': 'wp-switch-editor switch-tmce' |
1291 'class': 'wp-switch-editor switch-tmce' |
1304 }).text( window.tinymce.translate( 'Visual' ) ) ) |
1292 }).text( window.tinymce.translate( 'Visual' ) ) ) |
1305 .append( $button.attr({ |
1293 .append( $button.attr({ |
1306 id: id + '-html', |
1294 id: id + '-html', |
1307 'class': 'wp-switch-editor switch-html' |
1295 'class': 'wp-switch-editor switch-html' |
1308 }).text( window.tinymce.translate( 'Text' ) ) ) |
1296 }).text( window.tinymce.translate( 'Code|tab' ) ) ) |
1309 ).append( $editorContainer ) |
1297 ).append( $editorContainer ) |
1310 ); |
1298 ); |
1311 |
1299 |
1312 $textarea.after( $wrap ); |
1300 $textarea.after( $wrap ); |
1313 $editorContainer.append( $textarea ); |
1301 $editorContainer.append( $textarea ); |