https://menstherapyhub.co.uk/wp-admin/js/editor.js?ver=7.1.2

1/**
2 * @output wp-admin/js/editor.js
3 */
4
5window.wp = window.wp || {};
6
7( function( $, wp ) {
8	wp.editor = wp.editor || {};
9
10	/**
11	 * Utility functions for the editor.
12	 *
13	 * @since 2.5.0
14	 */
15	function SwitchEditors() {
16		var tinymce, $$,
17			exports = {};
18
19		function init() {
20			if ( ! tinymce && window.tinymce ) {
21				tinymce = window.tinymce;
22				$$ = tinymce.$;
23
24				/**
25				 * Handles onclick events for the Visual/Code tabs.
26				 *
27				 * @since 4.3.0
28				 *
29				 * @return {void}
30				 */
31				$$( document ).on( 'click', function( event ) {
32					var id, mode,
33						target = $$( event.target );
34
35					if ( target.hasClass( 'wp-switch-editor' ) ) {
36						id = target.attr( 'data-wp-editor-id' );
37						mode = target.hasClass( 'switch-tmce' ) ? 'tmce' : 'html';
38						switchEditor( id, mode );
39					}
40				});
41			}
42		}
43
44		/**
45		 * Returns the height of the editor toolbar(s) in px.
46		 *
47		 * @since 3.9.0
48		 *
49		 * @param {Object} editor The TinyMCE editor.
50		 * @return {number} If the height is between 10 and 200 return the height,
51		 * else return 30.
52		 */
53		function getToolbarHeight( editor ) {
54			var node = $$( '.mce-toolbar-grp', editor.getContainer() )[0],
55				height = node && node.clientHeight;
56
57			if ( height && height > 10 && height < 200 ) {
58				return parseInt( height, 10 );
59			}
60
61			return 30;
62		}
63
64		/**
65		 * Switches the editor between Visual and Code mode.
66		 *
67		 * @since 2.5.0
68		 *
69		 * @memberof switchEditors
70		 *
71		 * @param {string} id The id of the editor you want to change the editor mode for. Default: `content`.
72		 * @param {string} mode The mode you want to switch to. Default: `toggle`.
73		 * @return {void}
74		 */
75		function switchEditor( id, mode ) {
76			id = id || 'content';
77			mode = mode || 'toggle';
78
79			var editorHeight, toolbarHeight, iframe,
80				editor = tinymce.get( id ),
81				wrap = $$( '#wp-' + id + '-wrap' ),
82				htmlSwitch = wrap.find( '.switch-tmce' ),
83				tmceSwitch = wrap.find( '.switch-html' ),
84				$textarea = $$( '#' + id ),
85				textarea = $textarea[0];
86
87			if ( 'toggle' === mode ) {
88				if ( editor && ! editor.isHidden() ) {
89					mode = 'html';
90				} else {
91					mode = 'tmce';
92				}
93			}
94
95			if ( 'tmce' === mode || 'tinymce' === mode ) {
96				// If the editor is visible we are already in `tinymce` mode.
97				if ( editor && ! editor.isHidden() ) {
98					return false;
99				}
100
101				// Insert closing tags for any open tags in QuickTags.
102				if ( typeof( window.QTags ) !== 'undefined' ) {
103					window.QTags.closeAllTags( id );
104				}
105
106				editorHeight = parseInt( textarea.style.height, 10 ) || 0;
107
108				addHTMLBookmarkInTextAreaContent( $textarea );
109
110				if ( editor ) {
111					editor.show();
112
113					// No point to resize the iframe in iOS.
114					if ( ! tinymce.Env.iOS && editorHeight ) {
115						toolbarHeight = getToolbarHeight( editor );
116						editorHeight = editorHeight - toolbarHeight + 14;
117
118						// Sane limit for the editor height.
119						if ( editorHeight > 50 && editorHeight < 5000 ) {
120							editor.theme.resizeTo( null, editorHeight );
121						}
122					}
123
124					focusHTMLBookmarkInVisualEditor( editor );
125				} else {
126					tinymce.init( window.tinyMCEPreInit.mceInit[ id ] );
127				}
128
129				wrap.removeClass( 'html-active' ).addClass( 'tmce-active' );
130				tmceSwitch.attr( 'aria-pressed', false );
131				htmlSwitch.attr( 'aria-pressed', true );
132				$textarea.attr( 'aria-hidden', true );
133				window.setUserSetting( 'editor', 'tinymce' );
134
135			} else if ( 'html' === mode ) {
136				// If the editor is hidden (Quicktags is shown) we don't need to switch.
137				if ( editor && editor.isHidden() ) {
138					return false;
139				}
140
141				if ( editor ) {
142					// Don't resize the textarea in iOS.
143					// The iframe is forced to 100% height there, we shouldn't match it.
144					if ( ! tinymce.Env.iOS ) {
145						iframe = editor.iframeElement;
146						editorHeight = iframe ? parseInt( iframe.style.height, 10 ) : 0;
147
148						if ( editorHeight ) {
149							toolbarHeight = getToolbarHeight( editor );
150							editorHeight = editorHeight + toolbarHeight - 14;
151
152							// Sane limit for the textarea height.
153							if ( editorHeight > 50 && editorHeight < 5000 ) {
154								textarea.style.height = editorHeight + 'px';
155							}
156						}
157					}
158
159					var selectionRange = null;
160
161					selectionRange = findBookmarkedPosition( editor );
162
163					editor.hide();
164
165					if ( selectionRange ) {
166						selectTextInTextArea( editor, selectionRange );
167					}
168				} else {
169					// There is probably a JS error on the page.
170					// The TinyMCE editor instance doesn't exist. Show the textarea.
171					$textarea.css({ 'display': '', 'visibility': '' });
172				}
173
174				wrap.removeClass( 'tmce-active' ).addClass( 'html-active' );
175				tmceSwitch.attr( 'aria-pressed', true );
176				htmlSwitch.attr( 'aria-pressed', false );
177				$textarea.attr( 'aria-hidden', false );
178				window.setUserSetting( 'editor', 'html' );
179			}
180		}
181
182		/**
183		 * Checks if a cursor is inside an HTML tag or comment.
184		 *
185		 * In order to prevent breaking HTML tags when selecting text, the cursor
186		 * must be moved to either the start or end of the tag.
187		 *
188		 * This will prevent the selection marker to be inserted in the middle of an HTML tag.
189		 *
190		 * This function gives information whether the cursor is inside a tag or not, as well as
191		 * the tag type, if it is a closing tag and check if the HTML tag is inside a shortcode tag,
192		 * e.g. `[caption]<img.../>..`.
193		 *
194		 * @param {string} content The test content where the cursor is.
195		 * @param {number} cursorPosition The cursor position inside the content.
196		 *
197		 * @return {(null|Object)} Null if cursor is not in a tag, Object if the cursor is inside a tag.
198		 */
199		function getContainingTagInfo( content, cursorPosition ) {
200			var lastLtPos = content.lastIndexOf( '<', cursorPosition - 1 ),
201				lastGtPos = content.lastIndexOf( '>', cursorPosition );
202
203			if ( lastLtPos >

203 lastGtPos || content.substr( cursorPosition, 1 ) === '>' ) {
204				// Find what the tag is.
205				var tagContent = content.substr( lastLtPos ),
206					tagMatch = tagContent.match( /<\s*(\/)?(\w+|\!-{2}.*-{2})/ );
207
208				if ( ! tagMatch ) {
209					return null;
210				}
211
212				var tagType = tagMatch[2],
213					closingGt = tagContent.indexOf( '>' );
214
215				return {
216					ltPos: lastLtPos,
217					gtPos: lastLtPos + closingGt + 1, // Offset by one to get the position _after_ the character.
218					tagType: tagType,
219					isClosingTag: !! tagMatch[1]
220				};
221			}
222			return null;
223		}
224
225		/**
226		 * Checks if the cursor is inside a shortcode
227		 *
228		 * If the cursor is inside a shortcode wrapping tag, e.g. `[caption]` it's better to
229		 * move the selection marker to before or after the shortcode.
230		 *
231		 * For example `[caption]` rewrites/removes anything that's between the `[caption]` tag and the
232		 * `<img/>` tag inside.
233		 *
234		 * `[caption]<span>ThisIsGone</span><img .../>[caption]`
235		 *
236		 * Moving the selection to before or after the short code is better, since it allows to select
237		 * something, instead of just losing focus and going to the start of the content.
238		 *
239		 * @param {string} content The text content to check against.
240		 * @param {number} cursorPosition    The cursor position to check.
241		 *
242		 * @return {(undefined|Object)} Undefined if the cursor is not wrapped in a shortcode tag.
243		 *                              Information about the wrapping shortcode tag if it's wrapped in one.
244		 */
245		function getShortcodeWrapperInfo( content, cursorPosition ) {
246			var contentShortcodes = getShortCodePositionsInText( content );
247
248			for ( var i = 0; i < contentShortcodes.length; i++ ) {
249				var element = contentShortcodes[ i ];
250
251				if ( cursorPosition >= element.startIndex && cursorPosition <= element.endIndex ) {
252					return element;
253				}
254			}
255		}
256
257		/**
258		 * Gets a list of unique shortcodes or shortcode-lookalikes in the content.
259		 *
260		 * @param {string} content The content we want to scan for shortcodes.
261		 */
262		function getShortcodesInText( content ) {
263			var shortcodes = content.match( /\[+([\w_-])+/g ),
264				result = [];
265
266			if ( shortcodes ) {
267				for ( var i = 0; i < shortcodes.length; i++ ) {
268					var shortcode = shortcodes[ i ].replace( /^\[+/g, '' );
269
270					if ( result.indexOf( shortcode ) === -1 ) {
271						result.push( shortcode );
272					}
273				}
274			}
275
276			return result;
277		}
278
279		/**
280		 * Gets all shortcodes and their positions in the content
281		 *
282		 * This function returns all the shortcodes that could be found in the textarea content
283		 * along with their character positions and boundaries.
284		 *
285		 * This is used to check if the selection cursor is inside the boundaries of a shortcode
286		 * and move it accordingly, to avoid breakage.
287		 *
288		 * @link adjustTextAreaSelectionCursors
289		 *
290		 * The information can also be used in other cases when we need to lookup shortcode data,
291		 * as it's already structured!
292		 *
293		 * @param {string} content The content we want to scan for shortcodes
294		 */
295		function getShortCodePositionsInText( content ) {
296			var allShortcodes = getShortcodesInText( content ), shortcodeInfo;
297
298			if ( allShortcodes.length === 0 ) {
299				return [];
300			}
301
302			var shortcodeDetailsRegexp = wp.shortcode.regexp( allShortcodes.join( '|' ) ),
303				shortcodeMatch, // Define local scope for the variable to be used in the loop below.
304				shortcodesDetails = [];
305
306			while ( shortcodeMatch = shortcodeDetailsRegexp.exec( content ) ) {
307				/**
308				 * Check if the shortcode should be shown as plain text.
309				 *
310				 * This corresponds to the [[shortcode]] syntax, which doesn't parse the shortcode
311				 * and just shows it as text.
312				 */
313				var showAsPlainText = shortcodeMatch[1] === '[';
314
315				shortcodeInfo = {
316					shortcodeName: shortcodeMatch[2],
317					showAsPlainText: showAsPlainText,
318					startIndex: shortcodeMatch.index,
319					endIndex: shortcodeMatch.index + shortcodeMatch[0].length,
320					length: shortcodeMatch[0].length
321				};
322
323				shortcodesDetails.push( shortcodeInfo );
324			}
325
326			/**
327			 * Get all URL matches, and treat them as embeds.
328			 *
329			 * Since there isn't a good way to detect if a URL by itself on a line is a previewable
330			 * object, it's best to treat all of them as such.
331			 *
332			 * This means that the selection will capture the whole URL, in a similar way shrotcodes
333			 * are treated.
334			 */
335			var urlRegexp = new RegExp(
336				'(^|[\\n\\r][\\n\\r]|<p>)(https?:\\/\\/[^\s"]+?)(<\\/p>\s*|[\\n\\r][\\n\\r]|$)', 'gi'
337			);
338
339			while ( shortcodeMatch = urlRegexp.exec( content ) ) {
340				shortcodeInfo = {
341					shortcodeName: 'url',
342					showAsPlainText: false,
343					startIndex: shortcodeMatch.index,
344					endIndex: shortcodeMatch.index + shortcodeMatch[ 0 ].length,
345					length: shortcodeMatch[ 0 ].length,
346					urlAtStartOfContent: shortcodeMatch[ 1 ] === '',
347					urlAtEndOfContent: shortcodeMatch[ 3 ] === ''
348				};
349
350				shortcodesDetails.push( shortcodeInfo );
351			}
352
353			return shortcodesDetails;
354		}
355
356		/**
357		 * Generate a cursor marker element to be inserted in the content.
358		 *
359		 * `span` seems to be the least destructive element that can be used.
360		 *
361		 * Using DomQuery syntax to create it, since it's used as both text and as a DOM element.
362		 *
363		 * @param {Object} domLib DOM library instance.
364		 * @param {string} content The content to insert into the cursor marker element.
365		 */
366		function getCursorMarkerSpan( domLib, content ) {
367			return domLib( '<span>' ).css( {
368						display: 'inline-block',
369						width: 0,
370						overflow: 'hidden',
371						'line-height': 0
372					} )
373					.html( content ? content : '' );
374		}
375
376		/**
377		 * Gets adjusted selection cursor positions according to HTML tags, comments, and shortcodes.
378		 *
379		 * Shortcodes and HTML codes are a bit of a special case when selecting, since they may render
380		 * content in Visual mode. If we insert selection markers somewhere inside them, it's really possible
381		 * to break the syntax and render the HTML tag or shortcode broken.
382		 *
383		 * @link getShortcodeWrapperInfo
384		 *
385		 * @param {string} content Textarea content that the cursors are in

386		 * @param {{cursorStart: number, cursorEnd: number}} cursorPositions Cursor start and end positions
387		 *
388		 * @return {{cursorStart: number, cursorEnd: number}}
389		 */
390		function adjustTextAreaSelectionCursors( content, cursorPositions ) {
391			var voidElements = [
392				'area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input',
393				'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'
394			];
395
396			var cursorStart = cursorPositions.cursorStart,
397				cursorEnd = cursorPositions.cursorEnd,
398				// Check if the cursor is in a tag and if so, adjust it.
399				isCursorStartInTag = getContainingTagInfo( content, cursorStart );
400
401			if ( isCursorStartInTag ) {
402				/**
403				 * Only move to the start of the HTML tag (to select the whole element) if the tag
404				 * is part of the voidElements list above.
405				 *
406				 * This list includes tags that are self-contained and don't need a closing tag, according to the
407				 * HTML5 specification.
408				 *
409				 * This is done in order to make selection of text a bit more consistent when selecting text in
410				 * `<p>` tags or such.
411				 *
412				 * In cases where the tag is not a void element, the cursor is put to the end of the tag,
413				 * so it's either between the opening and closing tag elements or after the closing tag.
414				 */
415				if ( voidElements.indexOf( isCursorStartInTag.tagType ) !== -1 ) {
416					cursorStart = isCursorStartInTag.ltPos;
417				} else {
418					cursorStart = isCursorStartInTag.gtPos;
419				}
420			}
421
422			var isCursorEndInTag = getContainingTagInfo( content, cursorEnd );
423			if ( isCursorEndInTag ) {
424				cursorEnd = isCursorEndInTag.gtPos;
425			}
426
427			var isCursorStartInShortcode = getShortcodeWrapperInfo( content, cursorStart );
428			if ( isCursorStartInShortcode && ! isCursorStartInShortcode.showAsPlainText ) {
429				/**
430				 * If a URL is at the start or the end of the content,
431				 * the selection doesn't work, because it inserts a marker in the text,
432				 * which breaks the embedURL detection.
433				 *
434				 * The best way to avoid that and not modify the user content is to
435				 * adjust the cursor to either after or before URL.
436				 */
437				if ( isCursorStartInShortcode.urlAtStartOfContent ) {
438					cursorStart = isCursorStartInShortcode.endIndex;
439				} else {
440					cursorStart = isCursorStartInShortcode.startIndex;
441				}
442			}
443
444			var isCursorEndInShortcode = getShortcodeWrapperInfo( content, cursorEnd );
445			if ( isCursorEndInShortcode && ! isCursorEndInShortcode.showAsPlainText ) {
446				if ( isCursorEndInShortcode.urlAtEndOfContent ) {
447					cursorEnd = isCursorEndInShortcode.startIndex;
448				} else {
449					cursorEnd = isCursorEndInShortcode.endIndex;
450				}
451			}
452
453			return {
454				cursorStart: cursorStart,
455				cursorEnd: cursorEnd
456			};
457		}
458
459		/**
460		 * Adds text selection markers in the editor textarea.
461		 *
462		 * Adds selection markers in the content of the editor `textarea`.
463		 * The method directly manipulates the `textarea` content, to allow TinyMCE plugins
464		 * to run after the markers are added.
465		 *
466		 * @param {Object} $textarea TinyMCE's textarea wrapped as a DomQuery object
467		 */
468		function addHTMLBookmarkInTextAreaContent( $textarea ) {
469			if ( ! $textarea || ! $textarea.length ) {
470				// If no valid $textarea object is provided, there's nothing we can do.
471				return;
472			}
473
474			var textArea = $textarea[0],
475				textAreaContent = textArea.value,
476
477				adjustedCursorPositions = adjustTextAreaSelectionCursors( textAreaContent, {
478					cursorStart: textArea.selectionStart,
479					cursorEnd: textArea.selectionEnd
480				} ),
481
482				htmlModeCursorStartPosition = adjustedCursorPositions.cursorStart,
483				htmlModeCursorEndPosition = adjustedCursorPositions.cursorEnd,
484
485				mode = htmlModeCursorStartPosition !== htmlModeCursorEndPosition ? 'range' : 'single',
486
487				selectedText = null,
488				cursorMarkerSkeleton = getCursorMarkerSpan( $$, '&#65279;' ).attr( 'data-mce-type','bookmark' );
489
490			if ( mode === 'range' ) {
491				var markedText = textArea.value.slice( htmlModeCursorStartPosition, htmlModeCursorEndPosition ),
492					bookMarkEnd = cursorMarkerSkeleton.clone().addClass( 'mce_SELRES_end' );
493
494				selectedText = [
495					markedText,
496					bookMarkEnd[0].outerHTML
497				].join( '' );
498			}
499
500			textArea.value = [
501				textArea.value.slice( 0, htmlModeCursorStartPosition ), // Text until the cursor/selection position.
502				cursorMarkerSkeleton.clone()							// Cursor/selection start marker.
503					.addClass( 'mce_SELRES_start' )[0].outerHTML,
504				selectedText, 											// Selected text with end cursor/position marker.
505				textArea.value.slice( htmlModeCursorEndPosition )		// Text from last cursor/selection position to end.
506			].join( '' );
507		}
508
509		/**
510		 * Focuses the selection markers in Visual mode.
511		 *
512		 * The method checks for existing selection markers inside the editor DOM (Visual mode)
513		 * and create a selection between the two nodes using the DOM `createRange` selection API.
514		 *
515		 * If there is only a single node, select only the single node through TinyMCE's selection API
516		 *
517		 * @param {Object} editor TinyMCE editor instance.
518		 */
519		function focusHTMLBookmarkInVisualEditor( editor ) {
520			var startNode = editor.$( '.mce_SELRES_start' ).attr( 'data-mce-bogus', 1 ),
521				endNode = editor.$( '.mce_SELRES_end' ).attr( 'data-mce-bogus', 1 );
522
523			if ( startNode.length ) {
524				editor.focus();
525
526				if ( ! endNode.length ) {
527					editor.selection.select( startNode[0] );
528				} else {
529					var selection = editor.getDoc().createRange();
530
531					selection.setStartAfter( startNode[0] );
532					selection.setEndBefore( endNode[0] );
533
534					editor.selection.setRng( selection );
535				}
536			}
537
538			scrollVisualModeToStartElement( editor, startNode );
539
540			removeSelectionMarker( startNode );
541			removeSelectionMarker( endNode );
542
543			editor.save();
544		}
545
546		/**
547		 * Removes selection marker and the parent node if it is an empty paragraph.
548		 *
549		 * By default TinyMCE wraps loose inline tags in a `<p>`.
550		 * When removing selection markers an empty `<p>` may be left behind, remove it.
551		 *
552		 * @param {Object} $marker The marker to be removed from the editor DOM, wrapped in an instance of `editor.$`
553		 */
554		function removeSelectionMarker( $marker ) {
555			var $markerParent = $marker.parent();
556
557			$marker.remove();
558

559			//Remove empty paragraph left over after removing the marker.
560			if ( $markerParent.is( 'p' ) && ! $markerParent.children().length && ! $markerParent.text() ) {
561				$markerParent.remove();
562			}
563		}
564
565		/**
566		 * Scrolls the content to place the selected element in the center of the screen.
567		 *
568		 * Takes an element, that is usually the selection start element, selected in
569		 * `focusHTMLBookmarkInVisualEditor()` and scrolls the screen so the element appears roughly
570		 * in the middle of the screen.
571		 *
572		 * I order to achieve the proper positioning, the editor media bar and toolbar are subtracted
573		 * from the window height, to get the proper viewport window, that the user sees.
574		 *
575		 * @param {Object} editor TinyMCE editor instance.
576		 * @param {Object} element HTMLElement that should be scrolled into view.
577		 */
578		function scrollVisualModeToStartElement( editor, element ) {
579			var elementTop = editor.$( element ).offset().top,
580				TinyMCEContentAreaTop = editor.$( editor.getContentAreaContainer() ).offset().top,
581
582				toolbarHeight = getToolbarHeight( editor ),
583
584				edTools = $( '#wp-content-editor-tools' ),
585				edToolsHeight = 0,
586				edToolsOffsetTop = 0,
587
588				$scrollArea;
589
590			if ( edTools.length ) {
591				edToolsHeight = edTools.height();
592				edToolsOffsetTop = edTools.offset().top;
593			}
594
595			var windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
596
597				selectionPosition = TinyMCEContentAreaTop + elementTop,
598				visibleAreaHeight = windowHeight - ( edToolsHeight + toolbarHeight );
599
600			// There's no need to scroll if the selection is inside the visible area.
601			if ( selectionPosition < visibleAreaHeight ) {
602				return;
603			}
604
605			/**
606			 * The minimum scroll height should be to the top of the editor, to offer a consistent
607			 * experience.
608			 *
609			 * In order to find the top of the editor, we calculate the offset of `#wp-content-editor-tools` and
610			 * subtracting the height. This gives the scroll position where the top of the editor tools aligns with
611			 * the top of the viewport (under the Master Bar)
612			 */
613			var adjustedScroll;
614			if ( editor.settings.wp_autoresize_on ) {
615				$scrollArea = $( 'html,body' );
616				adjustedScroll = Math.max( selectionPosition - visibleAreaHeight / 2, edToolsOffsetTop - edToolsHeight );
617			} else {
618				$scrollArea = $( editor.contentDocument ).find( 'html,body' );
619				adjustedScroll = elementTop;
620			}
621
622			$scrollArea.animate( {
623				scrollTop: parseInt( adjustedScroll, 10 )
624			}, 100 );
625		}
626
627		/**
628		 * This method was extracted from the `SaveContent` hook in
629		 * `wp-includes/js/tinymce/plugins/wordpress/plugin.js`.
630		 *
631		 * It's needed here, since the method changes the content a bit, which confuses the cursor position.
632		 *
633		 * @param {Object} event TinyMCE event object.
634		 */
635		function fixTextAreaContent( event ) {
636			// Keep empty paragraphs :(
637			event.content = event.content.replace( /<p>(?:<br ?\/?>|\u00a0|\uFEFF| )*<\/p>/g, '<p>&nbsp;</p>' );
638		}
639
640		/**
641		 * Finds the current selection position in the Visual editor.
642		 *
643		 * Find the current selection in the Visual editor by inserting marker elements at the start
644		 * and end of the selection.
645		 *
646		 * Uses the standard DOM selection API to achieve that goal.
647		 *
648		 * Check the notes in the comments in the code below for more information on some gotchas
649		 * and why this solution was chosen.
650		 *
651		 * @param {Object} editor The editor where we must find the selection.
652		 * @return {(null|Object)} The selection range position in the editor.
653		 */
654		function findBookmarkedPosition( editor ) {
655			// Get the TinyMCE `window` reference, since we need to access the raw selection.
656			var TinyMCEWindow = editor.getWin(),
657				selection = TinyMCEWindow.getSelection();
658
659			if ( ! selection || selection.rangeCount < 1 ) {
660				// no selection, no need to continue.
661				return;
662			}
663
664			/**
665			 * The ID is used to avoid replacing user generated content, that may coincide with the
666			 * format specified below.
667			 * @type {string}
668			 */
669			var selectionID = 'SELRES_' + Math.random();
670
671			/**
672			 * Create two marker elements that will be used to mark the start and the end of the range.
673			 *
674			 * The elements have hardcoded style that makes them invisible. This is done to avoid seeing
675			 * random content flickering in the editor when switching between modes.
676			 */
677			var spanSkeleton = getCursorMarkerSpan( editor.$, selectionID ),
678				startElement = spanSkeleton.clone().addClass( 'mce_SELRES_start' ),
679				endElement = spanSkeleton.clone().addClass( 'mce_SELRES_end' );
680
681			/**
682			 * Inspired by:

683			 * @link https://stackoverflow.com/a/17497803/153310
684			 *
685			 * Why do it this way and not with TinyMCE's bookmarks?
686			 *
687			 * TinyMCE's bookmarks are very nice when working with selections and positions, BUT
688			 * there is no way to determine the precise position of the bookmark when switching modes, since
689			 * TinyMCE does some serialization of the content, to fix things like shortcodes, run plugins, prettify
690			 * HTML code and so on. In this process, the bookmark markup gets lost.
691			 *
692			 * If we decide to hook right after the bookmark is added, we can see where the bookmark is in the raw HTML
693			 * in TinyMCE. Unfortunately this state is before the serialization, so any visual markup in the content will
694			 * throw off the positioning.
695			 *
696			 * To avoid this, we insert two custom `span`s that will serve as the markers at the beginning and end of the
697			 * selection.
698			 *
699			 * Why not use TinyMCE's selection API or the DOM API to wrap the contents? Because if we do that, this creates
700			 * a new node, which is inserted in the dom. Now this will be fine, if we worked with fixed selections to
701			 * full nodes. Unfortunately in our case, the user can select whatever they like, which means that the
702			 * selection may start in the middle of one node and end in the middle of a completely different one. If we
703			 * wrap the selection in another node, this will create artifacts in the content.
704			 *
705			 * Using the method below, we insert the custom `span` nodes at the start and at the end of the selection.
706			 * This helps us not break the content and also gives us the option to work with multi-node selections without
707			 * breaking the markup.
708			 */
709			var range = selection.getRangeAt( 0 ),
710				startNode = range.startContainer,
711				startOffset = range.startOffset,
712				boundaryRange = range.cloneRange();
713
714			/**
715			 * If the selection is on a shortcode with Live View, TinyMCE creates a bogus markup,
716			 * which we have to account for.
717			 */
718			if ( editor.$( startNode ).parents( '.mce-offscreen-selection' ).length > 0 ) {
719				startNode = editor.$( '[data-mce-selected]' )[0];
720
721				/**
722				 * Marking the start and end element with `data-mce-object-selection` helps
723				 * discern when the selected object is a Live Preview selection.
724				 *
725				 * This way we can adjust the selection to properly select only the content, ignoring
726				 * whitespace inserted around the selected object by the Editor.
727				 */
728				startElement.attr( 'data-mce-object-selection', 'true' );
729				endElement.attr( 'data-mce-object-selection', 'true' );
730
731				editor.$( startNode ).before( startElement[0] );
732				editor.$( startNode ).after( endElement[0] );
733			} else {
734				boundaryRange.collapse( false );
735				boundaryRange.insertNode( endElement[0] );
736
737				boundaryRange.setStart( startNode, startOffset );
738				boundaryRange.collapse( true );
739				boundaryRange.insertNode( startElement[0] );
740
741				range.setStartAfter( startElement[0] );
742				range.setEndBefore( endElement[0] );
743				selection.removeAllRanges();
744				selection.addRange( range );
745			}
746
747			/**
748			 * Now the editor's content has the start/end nodes.
749			 *
750			 * Unfortunately the content goes through some more changes after this step, before it gets inserted
751			 * in the `textarea`. This means that we have to do some minor cleanup on our own here.
752			 */
753			editor.on( 'GetContent', fixTextAreaContent );
754
755			var content = removep( editor.getContent() );
756
757			editor.off( 'GetContent', fixTextAreaContent );
758
759			startElement.remove();
760			endElement.remove();
761
762			var startRegex = new RegExp(
763				'<span[^>]*\\s*class="mce_SELRES_start"[^>]+>\\s*' + selectionID + '[^<]*<\\/span>(\\s*)'
764			);
765
766			var endRegex = new RegExp(
767				'(\\s*)<span[^>]*\\s*class="mce_SELRES_end"[^>]+>\\s*' + selectionID + '[^<]*<\\/span>'
768			);
769
770			var startMatch = content.match( startRegex ),
771				endMatch = content.match( endRegex );
772
773			if ( ! startMatch ) {
774				return null;
775			}
776
777			var startIndex = startMatch.index,
778				startMatchLength = startMatch[0].length,
779				endIndex = null;
780
781			if (endMatch) {
782				/**
783				 * Adjust the selection index, if the selection contains a Live Preview object or not.
784				 *
785				 * Check where the `data-mce-object-selection` attribute is set above for more context.
786				 */
787				if ( startMatch[0].indexOf( 'data-mce-object-selection' ) !== -1 ) {
788					startMatchLength -= startMatch[1].length;
789				}
790
791				var endMatchIndex = endMatch.index;
792
793				if ( endMatch[0].indexOf( 'data-mce-object-selection' ) !== -1 ) {
794					endMatchIndex -= endMatch[1].length;
795				}
796
797				// We need to adjust the end position to discard the length of the range start marker.
798				endIndex = endMatchIndex - startMatchLength;
799			}
800
801			return {
802				start: startIndex,
803				end: endIndex
804			};
805		}
806
807		/**
808		 * Selects text in the TinyMCE `textarea`.
809		 *
810		 * Selects the text in TinyMCE's textarea that's between `selection.start` and `selection.end`.
811		 *
812		 * For `selection` parameter:
813		 * @link findBookmarkedPosition
814		 *
815		 * @param {Object} editor TinyMCE's editor instance.
816		 * @param {Object} selection Selection data.
817		 */
818		function selectTextInTextArea( editor, selection ) {
819			// Only valid in the text area mode and if we have selection.
820			if ( ! selection ) {
821				return;
822			}
823
824			var textArea = editor.getElement(),
825				start = selection.start,
826				end = selection.end || selection.start;
827
828			if ( textArea.focus ) {
829				// Wait for the Visual editor to be hidden, then focus and scroll to the position.
830				setTimeout( function() {
831					textArea.setSelectionRange( start, end );
832					if ( textArea.blur ) {
833						// Defocus before focusing.
834						textArea.blur();
835					}
836					textArea.focus();
837				}, 100 );
838			}
839		}
840
841		// Restore the selection when the editor is initialized. Needed when the C

841ode editor is the default.
842		$( document ).on( 'tinymce-editor-init.keep-scroll-position', function( event, editor ) {
843			if ( editor.$( '.mce_SELRES_start' ).length ) {
844				focusHTMLBookmarkInVisualEditor( editor );
845			}
846		} );
847
848		/**
849		 * Replaces <p> tags with two line breaks. "Opposite" of wpautop().
850		 *
851		 * Replaces <p> tags with two line breaks except where the <p> has attributes.
852		 * Unifies whitespace.
853		 * Indents <li>, <dt> and <dd> for better readability.
854		 *
855		 * @since 2.5.0
856		 *
857		 * @memberof switchEditors
858		 *
859		 * @param {string} html The content from the editor.
860		 * @return {string} The content with stripped paragraph tags.
861		 */
862		function removep( html ) {
863			var blocklist = 'blockquote|ul|ol|li|dl|dt|dd|table|thead|tbody|tfoot|tr|th|td|h[1-6]|fieldset|figure',
864				blocklist1 = blocklist + '|div|p',
865				blocklist2 = blocklist + '|pre',
866				preserve_linebreaks = false,
867				preserve_br = false,
868				preserve = [];
869
870			if ( ! html ) {
871				return '';
872			}
873
874			// Protect script and style tags.
875			if ( html.indexOf( '<script' ) !== -1 || html.indexOf( '<style' ) !== -1 ) {
876				html = html.replace( /<(script|style)[^>]*>[\s\S]*?<\/\1>/g, function( match ) {
877					preserve.push( match );
878					return '<wp-preserve>';
879				} );
880			}
881
882			// Protect pre tags.
883			if ( html.indexOf( '<pre' ) !== -1 ) {
884				preserve_linebreaks = true;
885				html = html.replace( /<pre[^>]*>[\s\S]+?<\/pre>/g, function( a ) {
886					a = a.replace( /<br ?\/?>(\r\n|\n)?/g, '<wp-line-break>' );
887					a = a.replace( /<\/?p( [^>]*)?>(\r\n|\n)?/g, '<wp-line-break>' );
888					return a.replace( /\r?\n/g, '<wp-line-break>' );
889				});
890			}
891
892			// Remove line breaks but keep <br> tags inside image captions.
893			if ( html.indexOf( '[caption' ) !== -1 ) {
894				preserve_br = true;
895				html = html.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) {
896					return a.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' ).replace( /[\r\n\t]+/, '' );
897				});
898			}
899
900			// Normalize white space characters before and after block tags.
901			html = html.replace( new RegExp( '\\s*</(' + blocklist1 + ')>\\s*', 'g' ), '</$1>\n' );
902			html = html.replace( new RegExp( '\\s*<((?:' + blocklist1 + ')(?: [^>]*)?)>', 'g' ), '\n<$1>' );
903
904			// Mark </p> if it has any attributes.
905			html = html.replace( /(<p [^>]+>.*?)<\/p>/g, '$1</p#>' );
906
907			// Preserve the first <p> inside a <div>.
908			html = html.replace( /<div( [^>]*)?>\s*<p>/gi, '<div$1>\n\n' );
909
910			// Remove paragraph tags.
911			html = html.replace( /\s*<p>/gi, '' );
912			html = html.replace( /\s*<\/p>\s*/gi, '\n\n' );
913
914			// Normalize white space chars and remove multiple line breaks.
915			html = html.replace( /\n[\s\u00a0]+\n/g, '\n\n' );
916
917			// Replace <br> tags with line breaks.
918			html = html.replace( /(\s*)<br ?\/?>\s*/gi, function( match, space ) {
919				if ( space && space.indexOf( '\n' ) !== -1 ) {
920					return '\n\n';
921				}
922
923				return '\n';
924			});
925
926			// Fix line breaks around <div>.
927			html = html.replace( /\s*<div/g, '\n<div' );
928			html = html.replace( /<\/div>\s*/g, '</div>\n' );
929
930			// Fix line breaks around caption shortcodes.
931			html = html.replace( /\s*\[caption([^\[]+)\[\/caption\]\s*/gi, '\n\n[caption$1[/caption]\n\n' );
932			html = html.replace( /caption\]\n\n+\[caption/g, 'caption]\n\n[caption' );
933
934			// Pad block elements tags with a line break.
935			html = html.replace( new RegExp('\\s*<((?:' + blocklist2 + ')(?: [^>]*)?)\\s*>', 'g' ), '\n<$1>' );
936			html = html.replace( new RegExp('\\s*</(' + blocklist2 + ')>\\s*', 'g' ), '</$1>\n' );
937
938			// Indent <li>, <dt> and <dd> tags.
939			html = html.replace( /<((li|dt|dd)[^>]*)>/g, ' \t<$1>' );
940
941			// Fix line breaks around <select> and <option>.
942			if ( html.indexOf( '<option' ) !== -1 ) {
943				html = html.replace( /\s*<option/g, '\n<option' );
944				html = html.replace( /\s*<\/select>/g, '\n</select>' );
945			}
946
947			// Pad <hr> with two line breaks.
948			if ( html.indexOf( '<hr' ) !== -1 ) {
949				html = html.replace( /\s*<hr( [^>]*)?>\s*/g, '\n\n<hr$1>\n\n' );
950			}
951
952			// Remove line breaks in <object> tags.
953			if ( html.indexOf( '<object' ) !== -1 ) {
954				html = html.replace( /<object[\s\S]+?<\/object>/g, function( a ) {
955					return a.replace( /[\r\n]+/g, '' );
956				});
957			}
958
959			// Unmark special paragraph closing tags.
960			html = html.replace( /<\/p#>/g, '</p>\n' );
961
962			// Pad remaining <p> tags whit a line break.
963			html = html.replace( /\s*(<p [^>]+>[\s\S]*?<\/p>)/g, '\n$1' );
964
965			// Trim.
966			html = html.replace( /^\s+/, '' );
967			html = html.replace( /[\s\u00a0]+$/, '' );
968
969			if ( preserve_linebreaks ) {
970				html = html.replace( /<wp-line-break>/g, '\n' );
971			}
972
973			if ( preserve_br ) {
974				html = html.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
975			}
976
977			// Restore preserved tags.
978			if ( preserve.length ) {
979				html = html.replace( /<wp-preserve>/g, function() {
980					return preserve.shift();
981				} );
982			}
983
984			return html;
985		}
986
987		/**
988		 * Replaces two line breaks with a paragraph tag and one line break with a <br>.
989		 *
990		 * Similar to `wpautop()` in formatting.php.
991		 *
992		 * @since 2.5.0
993		 *
994		 * @memberof switchEditors
995		 *
996		 * @param {string} text The text input.
997		 * @return {string} The formatted text.
998		 */
999		function autop( text ) {
1000			var preserve_linebreaks = false,
1001				preserve_br = false,

1002				blocklist = 'table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre' +
1003					'|form|map|area|blockquote|address|math|style|p|h[1-6]|hr|fieldset|legend|section' +
1004					'|article|aside|hgroup|header|footer|nav|figure|figcaption|details|menu|summary';
1005
1006			// Normalize line breaks.
1007			text = text.replace( /\r\n|\r/g, '\n' );
1008
1009			// Remove line breaks from <object>.
1010			if ( text.indexOf( '<object' ) !== -1 ) {
1011				text = text.replace( /<object[\s\S]+?<\/object>/g, function( a ) {
1012					return a.replace( /\n+/g, '' );
1013				});
1014			}
1015
1016			// Remove line breaks from tags.
1017			text = text.replace( /<[^<>]+>/g, function( a ) {
1018				return a.replace( /[\n\t ]+/g, ' ' );
1019			});
1020
1021			// Preserve line breaks in <pre> and <script> tags.
1022			if ( text.indexOf( '<pre' ) !== -1 || text.indexOf( '<script' ) !== -1 ) {
1023				preserve_linebreaks = true;
1024				text = text.replace( /<(pre|script)[^>]*>[\s\S]*?<\/\1>/g, function( a ) {
1025					return a.replace( /\n/g, '<wp-line-break>' );
1026				});
1027			}
1028
1029			if ( text.indexOf( '<figcaption' ) !== -1 ) {
1030				text = text.replace( /\s*(<figcaption[^>]*>)/g, '$1' );
1031				text = text.replace( /<\/figcaption>\s*/g, '</figcaption>' );
1032			}
1033
1034			// Keep <br> tags inside captions.
1035			if ( text.indexOf( '[caption' ) !== -1 ) {
1036				preserve_br = true;
1037
1038				text = text.replace( /\[caption[\s\S]+?\[\/caption\]/g, function( a ) {
1039					a = a.replace( /<br([^>]*)>/g, '<wp-temp-br$1>' );
1040
1041					a = a.replace( /<[^<>]+>/g, function( b ) {
1042						return b.replace( /[\n\t ]+/, ' ' );
1043					});
1044
1045					return a.replace( /\s*\n\s*/g, '<wp-temp-br />' );
1046				});
1047			}
1048
1049			text = text + '\n\n';
1050			text = text.replace( /<br \/>\s*<br \/>/gi, '\n\n' );
1051
1052			// Pad block tags with two line breaks.
1053			text = text.replace( new RegExp( '(<(?:' + blocklist + ')(?: [^>]*)?>)', 'gi' ), '\n\n$1' );
1054			text = text.replace( new RegExp( '(</(?:' + blocklist + ')>)', 'gi' ), '$1\n\n' );
1055			text = text.replace( /<hr( [^>]*)?>/gi, '<hr$1>\n\n' );
1056
1057			// Remove white space chars around <option>.
1058			text = text.replace( /\s*<option/gi, '<option' );
1059			text = text.replace( /<\/option>\s*/gi, '</option>' );
1060
1061			// Normalize multiple line breaks and white space chars.
1062			text = text.replace( /\n\s*\n+/g, '\n\n' );
1063
1064			// Convert two line breaks to a paragraph.
1065			text = text.replace( /([\s\S]+?)\n\n/g, '<p>$1</p>\n' );
1066
1067			// Remove empty paragraphs.
1068			text = text.replace( /<p>\s*?<\/p>/gi, '');
1069
1070			// Remove <p> tags that are around block tags.
1071			text = text.replace( new RegExp( '<p>\\s*(</?(?:' + blocklist + ')(?: [^>]*)?>)\\s*</p>', 'gi' ), '$1' );
1072			text = text.replace( /<p>(<li.+?)<\/p>/gi, '$1');
1073
1074			// Fix <p> in blockquotes.
1075			text = text.replace( /<p>\s*<blockquote([^>]*)>/gi, '<blockquote$1><p>');
1076			text = text.replace( /<\/blockquote>\s*<\/p>/gi, '</p></blockquote>');
1077
1078			// Remove <p> tags that are wrapped around block tags.
1079			text = text.replace( new RegExp( '<p>\\s*(</?(?:' + blocklist + ')(?: [^>]*)?>)', 'gi' ), '$1' );
1080			text = text.replace( new RegExp( '(</?(?:' + blocklist + ')(?: [^>]*)?>)\\s*</p>', 'gi' ), '$1' );
1081
1082			text = text.replace( /(<br[^>]*>)\s*\n/gi, '$1' );
1083
1084			// Add <br> tags.
1085			text = text.replace( /\s*\n/g, '<br />\n');
1086
1087			// Remove <br> tags that are around block tags.
1088			text = text.replace( new RegExp( '(</?(?:' + blocklist + ')[^>]*>)\\s*<br />', 'gi' ), '$1' );
1089			text = text.replace( /<br \/>(\s*<\/?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol)>)/gi, '$1' );
1090
1091			// Remove <p> and <br> around captions.
1092			text = text.replace( /(?:<p>|<br ?\/?>)*\s*\[caption([^\[]+)\[\/caption\]\s*(?:<\/p>|<br ?\/?>)*/gi, '[caption$1[/caption]' );
1093
1094			// Make sure there is <p> when there is </p> inside block tags that can contain other blocks.
1095			text = text.replace( /(<(?:div|th|td|form|fieldset|dd)[^>]*>)(.*?)<\/p>/g, function( a, b, c ) {
1096				if ( c.match( /<p( [^>]*)?>/ ) ) {
1097					return a;
1098				}
1099
1100				return b + '<p>' + c + '</p>';
1101			});
1102
1103			// Restore the line breaks in <pre> and <script> tags.
1104			if ( preserve_linebreaks ) {
1105				text = text.replace( /<wp-line-break>/g, '\n' );
1106			}
1107
1108			// Restore the <br> tags in captions.
1109			if ( preserve_br ) {
1110				text = text.replace( /<wp-temp-br([^>]*)>/g, '<br$1>' );
1111			}
1112
1113			return text;
1114		}
1115
1116		/**
1117		 * Fires custom jQuery events `beforePreWpautop` and `afterPreWpautop` when jQuery is available.
1118		 *
1119		 * @since 2.9.0
1120		 *
1121		 * @memberof switchEditors
1122		 *
1123		 * @param {string} html The content from the visual editor.
1124		 * @return {string} the filtered content.
1125		 */
1126		function pre_wpautop( html ) {
1127			var obj = { o: exports, data: html, unfiltered: html };
1128
1129			if ( $ ) {
1130				$( 'body' ).trigger( 'beforePreWpautop', [ obj ] );
1131			}
1132
1133			obj.data = removep( obj.data );
1134
1135			if ( $ ) {
1136				$( 'body' ).trigger( 'afterPreWpautop', [ obj ] );
1137			}
1138
1139			return obj.data;
1140		}
1141
1142		/**
1143		 * Fires custom jQuery events `beforeWpautop` and `afterWpautop` when jQuery is available.
1144		 *
1145		 * @since 2.9.0
1146		 *
1147		 * @memberof switchEditors
1148		 *
1149		 * @param {string} text The content from the text editor.
1150		 * @return {string} filtered content.
1151		 */
1152		function wpautop( text ) {
1153			var obj = { o: exports, data: text, unfiltered: text };
1154
1155			if ( $ ) {
1156				$( 'body' ).trigger( 'beforeWpautop', [ obj ] );
1157			}
1158
1159			obj.data = autop( obj.data );
1160
1161			if ( $ ) {
1162				$( 'body' ).trigger( 'afterWpautop', [ obj ] );
1163			}
1164
1165			return obj.data;
1166		}
1167
1168		if ( $ ) {
1169			$( init );
1170		} else if ( document.addEventListener ) {
1171			document.addEventListener( 'DOMContentLoaded', init, false );
1172			window.addEventListener( 'load', init, false );
1173		} else if ( window.attachEvent ) {
1174			window.attachEvent( 'onload', init );
1175			document.attachEvent( 'onreadystatechange', function() {
1176				if ( 'complete' === document.readyState ) {
1177					init();
1178				}
1179			} );
1180		}
1181

1182		wp.editor.autop = wpautop;
1183		wp.editor.removep = pre_wpautop;
1184
1185		exports = {
1186			go: switchEditor,
1187			wpautop: wpautop,
1188			pre_wpautop: pre_wpautop,
1189			_wp_Autop: autop,
1190			_wp_Nop: removep
1191		};
1192
1193		return exports;
1194	}
1195
1196	/**
1197	 * Expose the switch editors to be used globally.
1198	 *
1199	 * @namespace switchEditors
1200	 */
1201	window.switchEditors = new SwitchEditors();
1202
1203	/**
1204	 * Initialize TinyMCE and/or Quicktags. For use with wp_enqueue_editor() (PHP).
1205	 *
1206	 * Intended for use with an existing textarea that will become the Code editor tab.
1207	 * The editor width will be the width of the textarea container, height will be adjustable.
1208	 *
1209	 * Settings for both TinyMCE and Quicktags can be passed on initialization, and are "filtered"
1210	 * with custom jQuery events on the document element, wp-before-tinymce-init and wp-before-quicktags-init.
1211	 *
1212	 * @since 4.8.0
1213	 *
1214	 * @param {string} id The HTML id of the textarea that is used for the editor.
1215	 *                    Has to be jQuery compliant. No brackets, special chars, etc.
1216	 * @param {Object} settings Example:
1217	 * settings = {
1218	 *    // See https://www.tinymce.com/docs/configure/integration-and-setup/.
1219	 *    // Alternatively set to `true` to use the defaults.
1220	 *    tinymce: {
1221	 *        setup: function( editor ) {
1222	 *            console.log( 'Editor initialized', editor );
1223	 *        }
1224	 *    }
1225	 *
1226	 *    // Alternatively set to `true` to use the defaults.
1227	 *	  quicktags: {
1228	 *        buttons: 'strong,em,link'
1229	 *    }
1230	 * }
1231	 */
1232	wp.editor.initialize = function( id, settings ) {
1233		var init;
1234		var defaults;
1235
1236		if ( ! $ || ! id || ! wp.editor.getDefaultSettings ) {
1237			return;
1238		}
1239
1240		defaults = wp.editor.getDefaultSettings();
1241
1242		// Initialize TinyMCE by default.
1243		if ( ! settings ) {
1244			settings = {
1245				tinymce: true
1246			};
1247		}
1248
1249		// Add wrap and the Visual|Code tabs.
1250		if ( settings.tinymce && settings.quicktags ) {
1251			var $textarea = $( '#' + id );
1252
1253			var $wrap = $( '<div>' ).attr( {
1254					'class': 'wp-core-ui wp-editor-wrap tmce-active',
1255					id: 'wp-' + id + '-wrap'
1256				} );
1257
1258			var $editorContainer = $( '<div class="wp-editor-container">' );
1259
1260			var $button = $( '<button>' ).attr( {
1261					type: 'button',
1262					'data-wp-editor-id': id
1263				} );
1264
1265			var $editorTools = $( '<div class="wp-editor-tools">' );
1266
1267			if ( settings.mediaButtons ) {
1268				var buttonText = 'Add Media';
1269
1270				if ( window._wpMediaViewsL10n && window._wpMediaViewsL10n.addMedia ) {
1271					buttonText = window._wpMediaViewsL10n.addMedia;
1272				}
1273
1274				var $addMediaButton = $( '<button type="button" class="button insert-media add_media">' );
1275
1276				$addMediaButton.append( '<span class="wp-media-buttons-icon" aria-hidden="true"></span>' );
1277				$addMediaButton.append( document.createTextNode( ' ' + buttonText ) );
1278				$addMediaButton.data( 'editor', id );
1279
1280				$editorTools.append(
1281					$( '<div class="wp-media-buttons">' )
1282						.append( $addMediaButton )
1283				);
1284			}
1285
1286			$wrap.append(
1287				$editorTools
1288					.append( $( '<div class="wp-editor-tabs">' )
1289						.append( $button.clone().attr({
1290							id: id + '-tmce',
1291							'class': 'wp-switch-editor switch-tmce'
1292						}).text( window.tinymce.translate( 'Visual' ) ) )
1293						.append( $button.attr({
1294							id: id + '-html',
1295							'class': 'wp-switch-editor switch-html'
1296						}).text( window.tinymce.translate( 'Code|tab' ) ) )
1297					).append( $editorContainer )
1298			);
1299
1300			$textarea.after( $wrap );
1301			$editorContainer.append( $textarea );
1302		}
1303
1304		if ( window.tinymce && settings.tinymce ) {
1305			if ( typeof settings.tinymce !== 'object' ) {
1306				settings.tinymce = {};
1307			}
1308
1309			init = $.extend( {}, defaults.tinymce, settings.tinymce );
1310			init.selector = '#' + id;
1311
1312			$( document ).trigger( 'wp-before-tinymce-init', init );
1313			window.tinymce.init( init );
1314
1315			if ( ! window.wpActiveEditor ) {
1316				window.wpActiveEditor = id;
1317			}
1318		}
1319
1320		if ( window.quicktags && settings.quicktags ) {
1321			if ( typeof settings.quicktags !== 'object' ) {
1322				settings.quicktags = {};
1323			}
1324
1325			init = $.extend( {}, defaults.quicktags, settings.quicktags );
1326			init.id = id;
1327
1328			$( document ).trigger( 'wp-before-quicktags-init', init );
1329			window.quicktags( init );
1330
1331			if ( ! window.wpActiveEditor ) {
1332				window.wpActiveEditor = init.id;
1333			}
1334		}
1335	};
1336
1337	/**
1338	 * Remove one editor instance.
1339	 *
1340	 * Intended for use with editors that were initialized with wp.editor.initialize().
1341	 *
1342	 * @since 4.8.0
1343	 *
1344	 * @param {string} id The HTML id of the editor textarea.
1345	 */
1346	wp.editor.remove = function( id ) {
1347		var mceInstance, qtInstance,
1348			$wrap = $( '#wp-' + id + '-wrap' );
1349
1350		if ( window.tinymce ) {
1351			mceInstance = window.tinymce.get( id );
1352
1353			if ( mceInstance ) {
1354				if ( ! mceInstance.isHidden() ) {
1355					mceInstance.save();
1356				}
1357
1358				mceInstance.remove();
1359			}
1360		}
1361
1362		if ( window.quicktags ) {
1363			qtInstance = window.QTags.getInstance( id );
1364
1365			if ( qtInstance ) {
1366				qtInstance.remove();
1367			}
1368		}
1369
1370		if ( $wrap.length ) {
1371			$wrap.after( $( '#' + id ) );
1372			$wrap.remove();
1373		}
1374	};
1375
1376	/**
1377	 * Get the editor content.
1378	 *
1379	 * Intended for use with editors that were initialized with wp.editor.initialize().
1380	 *
1381	 * @since 4.8.0
1382	 *
1383	 * @param {string} id The HTML id of the editor textarea.
1384	 * @return The editor content.
1385	 */
1386	wp.editor.getContent = function( id ) {
1387		var editor;
1388
1389		if ( ! $ || ! id ) {
1390			return;
1391		}
1392
1393		if ( window.tinymce ) {
1394			editor = window.tinymce.get( id );
1395
1396			if ( editor && ! editor.isHidden() ) {
1397				editor.save();
1398			}
1399		}
1400
1401		return $( '#' + id ).val();
1402	};
1403
1404}( window.jQuery, window.wp ));