1 /**

     2  * Editor.js

     3  *

     4  * Copyright, Moxiecode Systems AB

     5  * Released under LGPL License.

     6  *

     7  * License: http://www.tinymce.com/license

     8  * Contributing: http://www.tinymce.com/contributing

     9  */

    10 

    11 /*jshint scripturl:true */

    12 

    13 /**

    14  * Include the base event class documentation.

    15  *

    16  * @include ../../../tools/docs/tinymce.Event.js

    17  */

    18 

    19 /**

    20  * This class contains the core logic for a TinyMCE editor.

    21  *

    22  * @class tinymce.Editor

    23  * @mixes tinymce.util.Observable

    24  * @example

    25  * // Add a class to all paragraphs in the editor.

    26  * tinymce.activeEditor.dom.addClass(tinymce.activeEditor.dom.select('p'), 'someclass');

    27  *

    28  * // Gets the current editors selection as text

    29  * tinymce.activeEditor.selection.getContent({format: 'text'});

    30  *

    31  * // Creates a new editor instance

    32  * var ed = new tinymce.Editor('textareaid', {

    33  *     some_setting: 1

    34  * }, tinymce.EditorManager);

    35  *

    36  * // Select each item the user clicks on

    37  * ed.on('click', function(e) {

    38  *     ed.selection.select(e.target);

    39  * });

    40  *

    41  * ed.render();

    42  */

    43 define("tinymce/Editor", [

    44 	"tinymce/dom/DOMUtils",

    45 	"tinymce/dom/DomQuery",

    46 	"tinymce/AddOnManager",

    47 	"tinymce/NodeChange",

    48 	"tinymce/html/Node",

    49 	"tinymce/dom/Serializer",

    50 	"tinymce/html/Serializer",

    51 	"tinymce/dom/Selection",

    52 	"tinymce/Formatter",

    53 	"tinymce/UndoManager",

    54 	"tinymce/EnterKey",

    55 	"tinymce/ForceBlocks",

    56 	"tinymce/EditorCommands",

    57 	"tinymce/util/URI",

    58 	"tinymce/dom/ScriptLoader",

    59 	"tinymce/dom/EventUtils",

    60 	"tinymce/WindowManager",

    61 	"tinymce/html/Schema",

    62 	"tinymce/html/DomParser",

    63 	"tinymce/util/Quirks",

    64 	"tinymce/Env",

    65 	"tinymce/util/Tools",

    66 	"tinymce/EditorObservable",

    67 	"tinymce/Shortcuts"

    68 ], function(

    69 	DOMUtils, DomQuery, AddOnManager, NodeChange, Node, DomSerializer, Serializer,

    70 	Selection, Formatter, UndoManager, EnterKey, ForceBlocks, EditorCommands,

    71 	URI, ScriptLoader, EventUtils, WindowManager,

    72 	Schema, DomParser, Quirks, Env, Tools, EditorObservable, Shortcuts

    73 ) {

    74 	// Shorten these names

    75 	var DOM = DOMUtils.DOM, ThemeManager = AddOnManager.ThemeManager, PluginManager = AddOnManager.PluginManager;

    76 	var extend = Tools.extend, each = Tools.each, explode = Tools.explode;

    77 	var inArray = Tools.inArray, trim = Tools.trim, resolve = Tools.resolve;

    78 	var Event = EventUtils.Event;

    79 	var isGecko = Env.gecko, ie = Env.ie;

    80 

    81 	/**

    82 	 * Include documentation for all the events.

    83 	 *

    84 	 * @include ../../../tools/docs/tinymce.Editor.js

    85 	 */

    86 

    87 	/**

    88 	 * Constructs a editor instance by id.

    89 	 *

    90 	 * @constructor

    91 	 * @method Editor

    92 	 * @param {String} id Unique id for the editor.

    93 	 * @param {Object} settings Settings for the editor.

    94 	 * @param {tinymce.EditorManager} editorManager EditorManager instance.

    95 	 * @author Moxiecode

    96 	 */

    97 	function Editor(id, settings, editorManager) {

    98 		var self = this, documentBaseUrl, baseUri;

    99 

   100 		documentBaseUrl = self.documentBaseUrl = editorManager.documentBaseURL;

   101 		baseUri = editorManager.baseURI;

   102 

   103 		/**

   104 		 * Name/value collection with editor settings.

   105 		 *

   106 		 * @property settings

   107 		 * @type Object

   108 		 * @example

   109 		 * // Get the value of the theme setting

   110 		 * tinymce.activeEditor.windowManager.alert("You are using the " + tinymce.activeEditor.settings.theme + " theme");

   111 		 */

   112 		self.settings = settings = extend({

   113 			id: id,

   114 			theme: 'modern',

   115 			delta_width: 0,

   116 			delta_height: 0,

   117 			popup_css: '',

   118 			plugins: '',

   119 			document_base_url: documentBaseUrl,

   120 			add_form_submit_trigger: true,

   121 			submit_patch: true,

   122 			add_unload_trigger: true,

   123 			convert_urls: true,

   124 			relative_urls: true,

   125 			remove_script_host: true,

   126 			object_resizing: true,

   127 			doctype: '<!DOCTYPE html>',

   128 			visual: true,

   129 			font_size_style_values: 'xx-small,x-small,small,medium,large,x-large,xx-large',

   130 

   131 			// See: http://www.w3.org/TR/CSS2/fonts.html#propdef-font-size

   132 			font_size_legacy_values: 'xx-small,small,medium,large,x-large,xx-large,300%',

   133 			forced_root_block: 'p',

   134 			hidden_input: true,

   135 			padd_empty_editor: true,

   136 			render_ui: true,

   137 			indentation: '30px',

   138 			inline_styles: true,

   139 			convert_fonts_to_spans: true,

   140 			indent: 'simple',

   141 			indent_before: 'p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,th,ul,ol,li,dl,dt,dd,area,table,thead,' +

   142 				'tfoot,tbody,tr,section,article,hgroup,aside,figure,option,optgroup,datalist',

   143 			indent_after: 'p,h1,h2,h3,h4,h5,h6,blockquote,div,title,style,pre,script,td,th,ul,ol,li,dl,dt,dd,area,table,thead,' +

   144 				'tfoot,tbody,tr,section,article,hgroup,aside,figure,option,optgroup,datalist',

   145 			validate: true,

   146 			entity_encoding: 'named',

   147 			url_converter: self.convertURL,

   148 			url_converter_scope: self,

   149 			ie7_compat: true

   150 		}, settings);

   151 

   152 		AddOnManager.language = settings.language || 'en';

   153 		AddOnManager.languageLoad = settings.language_load;

   154 

   155 		AddOnManager.baseURL = editorManager.baseURL;

   156 

   157 		/**

   158 		 * Editor instance id, normally the same as the div/textarea that was replaced.

   159 		 *

   160 		 * @property id

   161 		 * @type String

   162 		 */

   163 		self.id = settings.id = id;

   164 

   165 		/**

   166 		 * State to force the editor to return false on a isDirty call.

   167 		 *

   168 		 * @property isNotDirty

   169 		 * @type Boolean

   170 		 * @example

   171 		 * function ajaxSave() {

   172 		 *     var ed = tinymce.get('elm1');

   173 		 *

   174 		 *     // Save contents using some XHR call

   175 		 *     alert(ed.getContent());

   176 		 *

   177 		 *     ed.isNotDirty = true; // Force not dirty state

   178 		 * }

   179 		 */

   180 		self.isNotDirty = true;

   181 

   182 		/**

   183 		 * Name/Value object containting plugin instances.

   184 		 *

   185 		 * @property plugins

   186 		 * @type Object

   187 		 * @example

   188 		 * // Execute a method inside a plugin directly

   189 		 * tinymce.activeEditor.plugins.someplugin.someMethod();

   190 		 */

   191 		self.plugins = {};

   192 

   193 		/**

   194 		 * URI object to document configured for the TinyMCE instance.

   195 		 *

   196 		 * @property documentBaseURI

   197 		 * @type tinymce.util.URI

   198 		 * @example

   199 		 * // Get relative URL from the location of document_base_url

   200 		 * tinymce.activeEditor.documentBaseURI.toRelative('/somedir/somefile.htm');

   201 		 *

   202 		 * // Get absolute URL from the location of document_base_url

   203 		 * tinymce.activeEditor.documentBaseURI.toAbsolute('somefile.htm');

   204 		 */

   205 		self.documentBaseURI = new URI(settings.document_base_url || documentBaseUrl, {

   206 			base_uri: baseUri

   207 		});

   208 

   209 		/**

   210 		 * URI object to current document that holds the TinyMCE editor instance.

   211 		 *

   212 		 * @property baseURI

   213 		 * @type tinymce.util.URI

   214 		 * @example

   215 		 * // Get relative URL from the location of the API

   216 		 * tinymce.activeEditor.baseURI.toRelative('/somedir/somefile.htm');

   217 		 *

   218 		 * // Get absolute URL from the location of the API

   219 		 * tinymce.activeEditor.baseURI.toAbsolute('somefile.htm');

   220 		 */

   221 		self.baseURI = baseUri;

   222 

   223 		/**

   224 		 * Array with CSS files to load into the iframe.

   225 		 *

   226 		 * @property contentCSS

   227 		 * @type Array

   228 		 */

   229 		self.contentCSS = [];

   230 

   231 		/**

   232 		 * Array of CSS styles to add to head of document when the editor loads.

   233 		 *

   234 		 * @property contentStyles

   235 		 * @type Array

   236 		 */

   237 		self.contentStyles = [];

   238 

   239 		// Creates all events like onClick, onSetContent etc see Editor.Events.js for the actual logic

   240 		self.shortcuts = new Shortcuts(self);

   241 		self.loadedCSS = {};

   242 		self.editorCommands = new EditorCommands(self);

   243 

   244 		if (settings.target) {

   245 			self.targetElm = settings.target;

   246 		}

   247 

   248 		self.suffix = editorManager.suffix;

   249 		self.editorManager = editorManager;

   250 		self.inline = settings.inline;

   251 

   252 		if (settings.cache_suffix) {

   253 			Env.cacheSuffix = settings.cache_suffix.replace(/^[\?\&]+/, '');

   254 		}

   255 

   256 		// Call setup

   257 		editorManager.fire('SetupEditor', self);

   258 		self.execCallback('setup', self);

   259 

   260 		/**

   261 		 * Dom query instance with default scope to the editor document and default element is the body of the editor.

   262 		 *

   263 		 * @property $

   264 		 * @type tinymce.dom.DomQuery

   265 		 * @example

   266 		 * tinymce.activeEditor.$('p').css('color', 'red');

   267 		 * tinymce.activeEditor.$().append('<p>new</p>');

   268 		 */

   269 		self.$ = DomQuery.overrideDefaults(function() {

   270 			return {

   271 				context: self.inline ? self.getBody() : self.getDoc(),

   272 				element: self.getBody()

   273 			};

   274 		});

   275 	}

   276 

   277 	Editor.prototype = {

   278 		/**

   279 		 * Renderes the editor/adds it to the page.

   280 		 *

   281 		 * @method render

   282 		 */

   283 		render: function() {

   284 			var self = this, settings = self.settings, id = self.id, suffix = self.suffix;

   285 

   286 			function readyHandler() {

   287 				DOM.unbind(window, 'ready', readyHandler);

   288 				self.render();

   289 			}

   290 

   291 			// Page is not loaded yet, wait for it

   292 			if (!Event.domLoaded) {

   293 				DOM.bind(window, 'ready', readyHandler);

   294 				return;

   295 			}

   296 

   297 			// Element not found, then skip initialization

   298 			if (!self.getElement()) {

   299 				return;

   300 			}

   301 

   302 			// No editable support old iOS versions etc

   303 			if (!Env.contentEditable) {

   304 				return;

   305 			}

   306 

   307 			// Hide target element early to prevent content flashing

   308 			if (!settings.inline) {

   309 				self.orgVisibility = self.getElement().style.visibility;

   310 				self.getElement().style.visibility = 'hidden';

   311 			} else {

   312 				self.inline = true;

   313 			}

   314 

   315 			var form = self.getElement().form || DOM.getParent(id, 'form');

   316 			if (form) {

   317 				self.formElement = form;

   318 

   319 				// Add hidden input for non input elements inside form elements

   320 				if (settings.hidden_input && !/TEXTAREA|INPUT/i.test(self.getElement().nodeName)) {

   321 					DOM.insertAfter(DOM.create('input', {type: 'hidden', name: id}), id);

   322 					self.hasHiddenInput = true;

   323 				}

   324 

   325 				// Pass submit/reset from form to editor instance

   326 				self.formEventDelegate = function(e) {

   327 					self.fire(e.type, e);

   328 				};

   329 

   330 				DOM.bind(form, 'submit reset', self.formEventDelegate);

   331 

   332 				// Reset contents in editor when the form is reset

   333 				self.on('reset', function() {

   334 					self.setContent(self.startContent, {format: 'raw'});

   335 				});

   336 

   337 				// Check page uses id="submit" or name="submit" for it's submit button

   338 				if (settings.submit_patch && !form.submit.nodeType && !form.submit.length && !form._mceOldSubmit) {

   339 					form._mceOldSubmit = form.submit;

   340 					form.submit = function() {

   341 						self.editorManager.triggerSave();

   342 						self.isNotDirty = true;

   343 

   344 						return form._mceOldSubmit(form);

   345 					};

   346 				}

   347 			}

   348 

   349 			/**

   350 			 * Window manager reference, use this to open new windows and dialogs.

   351 			 *

   352 			 * @property windowManager

   353 			 * @type tinymce.WindowManager

   354 			 * @example

   355 			 * // Shows an alert message

   356 			 * tinymce.activeEditor.windowManager.alert('Hello world!');

   357 			 *

   358 			 * // Opens a new dialog with the file.htm file and the size 320x240

   359 			 * // It also adds a custom parameter this can be retrieved by using tinyMCEPopup.getWindowArg inside the dialog.

   360 			 * tinymce.activeEditor.windowManager.open({

   361 			 *    url: 'file.htm',

   362 			 *    width: 320,

   363 			 *    height: 240

   364 			 * }, {

   365 			 *    custom_param: 1

   366 			 * });

   367 			 */

   368 			self.windowManager = new WindowManager(self);

   369 

   370 			if (settings.encoding == 'xml') {

   371 				self.on('GetContent', function(e) {

   372 					if (e.save) {

   373 						e.content = DOM.encode(e.content);

   374 					}

   375 				});

   376 			}

   377 

   378 			if (settings.add_form_submit_trigger) {

   379 				self.on('submit', function() {

   380 					if (self.initialized) {

   381 						self.save();

   382 					}

   383 				});

   384 			}

   385 

   386 			if (settings.add_unload_trigger) {

   387 				self._beforeUnload = function() {

   388 					if (self.initialized && !self.destroyed && !self.isHidden()) {

   389 						self.save({format: 'raw', no_events: true, set_dirty: false});

   390 					}

   391 				};

   392 

   393 				self.editorManager.on('BeforeUnload', self._beforeUnload);

   394 			}

   395 

   396 			// Load scripts

   397 			function loadScripts() {

   398 				var scriptLoader = ScriptLoader.ScriptLoader;

   399 

   400 				if (settings.language && settings.language != 'en' && !settings.language_url) {

   401 					settings.language_url = self.editorManager.baseURL + '/langs/' + settings.language + '.js';

   402 				}

   403 

   404 				if (settings.language_url) {

   405 					scriptLoader.add(settings.language_url);

   406 				}

   407 

   408 				if (settings.theme && typeof settings.theme != "function" &&

   409 					settings.theme.charAt(0) != '-' && !ThemeManager.urls[settings.theme]) {

   410 					var themeUrl = settings.theme_url;

   411 

   412 					if (themeUrl) {

   413 						themeUrl = self.documentBaseURI.toAbsolute(themeUrl);

   414 					} else {

   415 						themeUrl = 'themes/' + settings.theme + '/theme' + suffix + '.js';

   416 					}

   417 

   418 					ThemeManager.load(settings.theme, themeUrl);

   419 				}

   420 

   421 				if (Tools.isArray(settings.plugins)) {

   422 					settings.plugins = settings.plugins.join(' ');

   423 				}

   424 

   425 				each(settings.external_plugins, function(url, name) {

   426 					PluginManager.load(name, url);

   427 					settings.plugins += ' ' + name;

   428 				});

   429 

   430 				each(settings.plugins.split(/[ ,]/), function(plugin) {

   431 					plugin = trim(plugin);

   432 

   433 					if (plugin && !PluginManager.urls[plugin]) {

   434 						if (plugin.charAt(0) == '-') {

   435 							plugin = plugin.substr(1, plugin.length);

   436 

   437 							var dependencies = PluginManager.dependencies(plugin);

   438 

   439 							each(dependencies, function(dep) {

   440 								var defaultSettings = {

   441 									prefix: 'plugins/',

   442 									resource: dep,

   443 									suffix: '/plugin' + suffix + '.js'

   444 								};

   445 

   446 								dep = PluginManager.createUrl(defaultSettings, dep);

   447 								PluginManager.load(dep.resource, dep);

   448 							});

   449 						} else {

   450 							PluginManager.load(plugin, {

   451 								prefix: 'plugins/',

   452 								resource: plugin,

   453 								suffix: '/plugin' + suffix + '.js'

   454 							});

   455 						}

   456 					}

   457 				});

   458 

   459 				scriptLoader.loadQueue(function() {

   460 					if (!self.removed) {

   461 						self.init();

   462 					}

   463 				});

   464 			}

   465 

   466 			loadScripts();

   467 		},

   468 

   469 		/**

   470 		 * Initializes the editor this will be called automatically when

   471 		 * all plugins/themes and language packs are loaded by the rendered method.

   472 		 * This method will setup the iframe and create the theme and plugin instances.

   473 		 *

   474 		 * @method init

   475 		 */

   476 		init: function() {

   477 			var self = this, settings = self.settings, elm = self.getElement();

   478 			var w, h, minHeight, n, o, Theme, url, bodyId, bodyClass, re, i, initializedPlugins = [];

   479 

   480 			this.editorManager.i18n.setCode(settings.language);

   481 			self.rtl = this.editorManager.i18n.rtl;

   482 			self.editorManager.add(self);

   483 

   484 			settings.aria_label = settings.aria_label || DOM.getAttrib(elm, 'aria-label', self.getLang('aria.rich_text_area'));

   485 

   486 			/**

   487 			 * Reference to the theme instance that was used to generate the UI.

   488 			 *

   489 			 * @property theme

   490 			 * @type tinymce.Theme

   491 			 * @example

   492 			 * // Executes a method on the theme directly

   493 			 * tinymce.activeEditor.theme.someMethod();

   494 			 */

   495 			if (settings.theme) {

   496 				if (typeof settings.theme != "function") {

   497 					settings.theme = settings.theme.replace(/-/, '');

   498 					Theme = ThemeManager.get(settings.theme);

   499 					self.theme = new Theme(self, ThemeManager.urls[settings.theme]);

   500 

   501 					if (self.theme.init) {

   502 						self.theme.init(self, ThemeManager.urls[settings.theme] || self.documentBaseUrl.replace(/\/$/, ''), self.$);

   503 					}

   504 				} else {

   505 					self.theme = settings.theme;

   506 				}

   507 			}

   508 

   509 			function initPlugin(plugin) {

   510 				var Plugin = PluginManager.get(plugin), pluginUrl, pluginInstance;

   511 

   512 				pluginUrl = PluginManager.urls[plugin] || self.documentBaseUrl.replace(/\/$/, '');

   513 				plugin = trim(plugin);

   514 				if (Plugin && inArray(initializedPlugins, plugin) === -1) {

   515 					each(PluginManager.dependencies(plugin), function(dep) {

   516 						initPlugin(dep);

   517 					});

   518 

   519 					pluginInstance = new Plugin(self, pluginUrl, self.$);

   520 

   521 					self.plugins[plugin] = pluginInstance;

   522 

   523 					if (pluginInstance.init) {

   524 						pluginInstance.init(self, pluginUrl);

   525 						initializedPlugins.push(plugin);

   526 					}

   527 				}

   528 			}

   529 

   530 			// Create all plugins

   531 			each(settings.plugins.replace(/\-/g, '').split(/[ ,]/), initPlugin);

   532 

   533 			// Measure box

   534 			if (settings.render_ui && self.theme) {

   535 				self.orgDisplay = elm.style.display;

   536 

   537 				if (typeof settings.theme != "function") {

   538 					w = settings.width || elm.style.width || elm.offsetWidth;

   539 					h = settings.height || elm.style.height || elm.offsetHeight;

   540 					minHeight = settings.min_height || 100;

   541 					re = /^[0-9\.]+(|px)$/i;

   542 

   543 					if (re.test('' + w)) {

   544 						w = Math.max(parseInt(w, 10), 100);

   545 					}

   546 

   547 					if (re.test('' + h)) {

   548 						h = Math.max(parseInt(h, 10), minHeight);

   549 					}

   550 

   551 					// Render UI

   552 					o = self.theme.renderUI({

   553 						targetNode: elm,

   554 						width: w,

   555 						height: h,

   556 						deltaWidth: settings.delta_width,

   557 						deltaHeight: settings.delta_height

   558 					});

   559 

   560 					// Resize editor

   561 					if (!settings.content_editable) {

   562 						h = (o.iframeHeight || h) + (typeof h == 'number' ? (o.deltaHeight || 0) : '');

   563 						if (h < minHeight) {

   564 							h = minHeight;

   565 						}

   566 					}

   567 				} else {

   568 					o = settings.theme(self, elm);

   569 

   570 					// Convert element type to id:s

   571 					if (o.editorContainer.nodeType) {

   572 						o.editorContainer = o.editorContainer.id = o.editorContainer.id || self.id + "_parent";

   573 					}

   574 

   575 					// Convert element type to id:s

   576 					if (o.iframeContainer.nodeType) {

   577 						o.iframeContainer = o.iframeContainer.id = o.iframeContainer.id || self.id + "_iframecontainer";

   578 					}

   579 

   580 					// Use specified iframe height or the targets offsetHeight

   581 					h = o.iframeHeight || elm.offsetHeight;

   582 				}

   583 

   584 				self.editorContainer = o.editorContainer;

   585 			}

   586 

   587 			// Load specified content CSS last

   588 			if (settings.content_css) {

   589 				each(explode(settings.content_css), function(u) {

   590 					self.contentCSS.push(self.documentBaseURI.toAbsolute(u));

   591 				});

   592 			}

   593 

   594 			// Load specified content CSS last

   595 			if (settings.content_style) {

   596 				self.contentStyles.push(settings.content_style);

   597 			}

   598 

   599 			// Content editable mode ends here

   600 			if (settings.content_editable) {

   601 				elm = n = o = null; // Fix IE leak

   602 				return self.initContentBody();

   603 			}

   604 

   605 			self.iframeHTML = settings.doctype + '<html><head>';

   606 

   607 			// We only need to override paths if we have to

   608 			// IE has a bug where it remove site absolute urls to relative ones if this is specified

   609 			if (settings.document_base_url != self.documentBaseUrl) {

   610 				self.iframeHTML += '<base href="' + self.documentBaseURI.getURI() + '" />';

   611 			}

   612 

   613 			// IE8 doesn't support carets behind images setting ie7_compat would force IE8+ to run in IE7 compat mode.

   614 			if (!Env.caretAfter && settings.ie7_compat) {

   615 				self.iframeHTML += '<meta http-equiv="X-UA-Compatible" content="IE=7" />';

   616 			}

   617 

   618 			self.iframeHTML += '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />';

   619 

   620 			// Load the CSS by injecting them into the HTML this will reduce "flicker"

   621 			for (i = 0; i < self.contentCSS.length; i++) {

   622 				var cssUrl = self.contentCSS[i];

   623 				self.iframeHTML += (

   624 					'<link type="text/css" ' +

   625 						'rel="stylesheet" ' +

   626 						'href="' + Tools._addCacheSuffix(cssUrl) + '" />'

   627 				);

   628 				self.loadedCSS[cssUrl] = true;

   629 			}

   630 

   631 			bodyId = settings.body_id || 'tinymce';

   632 			if (bodyId.indexOf('=') != -1) {

   633 				bodyId = self.getParam('body_id', '', 'hash');

   634 				bodyId = bodyId[self.id] || bodyId;

   635 			}

   636 

   637 			bodyClass = settings.body_class || '';

   638 			if (bodyClass.indexOf('=') != -1) {

   639 				bodyClass = self.getParam('body_class', '', 'hash');

   640 				bodyClass = bodyClass[self.id] || '';

   641 			}

   642 

   643 			if (settings.content_security_policy) {

   644 				self.iframeHTML += '<meta http-equiv="Content-Security-Policy" content="' + settings.content_security_policy + '" />';

   645 			}

   646 

   647 			self.iframeHTML += '</head><body id="' + bodyId +

   648 				'" class="mce-content-body ' + bodyClass +

   649 				'" data-id="' + self.id + '"><br></body></html>';

   650 

   651 			/*eslint no-script-url:0 */

   652 			var domainRelaxUrl = 'javascript:(function(){' +

   653 				'document.open();document.domain="' + document.domain + '";' +

   654 				'var ed = window.parent.tinymce.get("' + self.id + '");document.write(ed.iframeHTML);' +

   655 				'document.close();ed.initContentBody(true);})()';

   656 

   657 			// Domain relaxing is required since the user has messed around with document.domain

   658 			if (document.domain != location.hostname) {

   659 				url = domainRelaxUrl;

   660 			}

   661 

   662 			// Create iframe

   663 			// TODO: ACC add the appropriate description on this.

   664 			var ifr = DOM.create('iframe', {

   665 				id: self.id + "_ifr",

   666 				//src: url || 'javascript:""', // Workaround for HTTPS warning in IE6/7

   667 				frameBorder: '0',

   668 				allowTransparency: "true",

   669 				title: self.editorManager.translate(

   670 						"Rich Text Area. Press ALT-F9 for menu. " +

   671 						"Press ALT-F10 for toolbar. Press ALT-0 for help"

   672 				),

   673 				style: {

   674 					width: '100%',

   675 					height: h,

   676 					display: 'block' // Important for Gecko to render the iframe correctly

   677 				}

   678 			});

   679 

   680 			ifr.onload = function() {

   681 				ifr.onload = null;

   682 				self.fire("load");

   683 			};

   684 

   685 			DOM.setAttrib(ifr, "src", url || 'javascript:""');

   686 

   687 			self.contentAreaContainer = o.iframeContainer;

   688 			self.iframeElement = ifr;

   689 

   690 			n = DOM.add(o.iframeContainer, ifr);

   691 

   692 			// Try accessing the document this will fail on IE when document.domain is set to the same as location.hostname

   693 			// Then we have to force domain relaxing using the domainRelaxUrl approach very ugly!!

   694 			if (ie) {

   695 				try {

   696 					self.getDoc();

   697 				} catch (e) {

   698 					n.src = url = domainRelaxUrl;

   699 				}

   700 			}

   701 

   702 			if (o.editorContainer) {

   703 				DOM.get(o.editorContainer).style.display = self.orgDisplay;

   704 				self.hidden = DOM.isHidden(o.editorContainer);

   705 			}

   706 

   707 			self.getElement().style.display = 'none';

   708 			DOM.setAttrib(self.id, 'aria-hidden', true);

   709 

   710 			if (!url) {

   711 				self.initContentBody();

   712 			}

   713 

   714 			elm = n = o = null; // Cleanup

   715 		},

   716 

   717 		/**

   718 		 * This method get called by the init method ones the iframe is loaded.

   719 		 * It will fill the iframe with contents, setups DOM and selection objects for the iframe.

   720 		 *

   721 		 * @method initContentBody

   722 		 * @private

   723 		 */

   724 		initContentBody: function(skipWrite) {

   725 			var self = this, settings = self.settings, targetElm = self.getElement(), doc = self.getDoc(), body, contentCssText;

   726 

   727 			// Restore visibility on target element

   728 			if (!settings.inline) {

   729 				self.getElement().style.visibility = self.orgVisibility;

   730 			}

   731 

   732 			// Setup iframe body

   733 			if (!skipWrite && !settings.content_editable) {

   734 				doc.open();

   735 				doc.write(self.iframeHTML);

   736 				doc.close();

   737 			}

   738 

   739 			if (settings.content_editable) {

   740 				self.on('remove', function() {

   741 					var bodyEl = this.getBody();

   742 

   743 					DOM.removeClass(bodyEl, 'mce-content-body');

   744 					DOM.removeClass(bodyEl, 'mce-edit-focus');

   745 					DOM.setAttrib(bodyEl, 'contentEditable', null);

   746 				});

   747 

   748 				DOM.addClass(targetElm, 'mce-content-body');

   749 				self.contentDocument = doc = settings.content_document || document;

   750 				self.contentWindow = settings.content_window || window;

   751 				self.bodyElement = targetElm;

   752 

   753 				// Prevent leak in IE

   754 				settings.content_document = settings.content_window = null;

   755 

   756 				// TODO: Fix this

   757 				settings.root_name = targetElm.nodeName.toLowerCase();

   758 			}

   759 

   760 			// It will not steal focus while setting contentEditable

   761 			body = self.getBody();

   762 			body.disabled = true;

   763 

   764 			if (!settings.readonly) {

   765 				if (self.inline && DOM.getStyle(body, 'position', true) == 'static') {

   766 					body.style.position = 'relative';

   767 				}

   768 

   769 				body.contentEditable = self.getParam('content_editable_state', true);

   770 			}

   771 

   772 			body.disabled = false;

   773 

   774 			/**

   775 			 * Schema instance, enables you to validate elements and it's children.

   776 			 *

   777 			 * @property schema

   778 			 * @type tinymce.html.Schema

   779 			 */

   780 			self.schema = new Schema(settings);

   781 

   782 			/**

   783 			 * DOM instance for the editor.

   784 			 *

   785 			 * @property dom

   786 			 * @type tinymce.dom.DOMUtils

   787 			 * @example

   788 			 * // Adds a class to all paragraphs within the editor

   789 			 * tinymce.activeEditor.dom.addClass(tinymce.activeEditor.dom.select('p'), 'someclass');

   790 			 */

   791 			self.dom = new DOMUtils(doc, {

   792 				keep_values: true,

   793 				url_converter: self.convertURL,

   794 				url_converter_scope: self,

   795 				hex_colors: settings.force_hex_style_colors,

   796 				class_filter: settings.class_filter,

   797 				update_styles: true,

   798 				root_element: self.inline ? self.getBody() : null,

   799 				collect: settings.content_editable,

   800 				schema: self.schema,

   801 				onSetAttrib: function(e) {

   802 					self.fire('SetAttrib', e);

   803 				}

   804 			});

   805 

   806 			/**

   807 			 * HTML parser will be used when contents is inserted into the editor.

   808 			 *

   809 			 * @property parser

   810 			 * @type tinymce.html.DomParser

   811 			 */

   812 			self.parser = new DomParser(settings, self.schema);

   813 

   814 			// Convert src and href into data-mce-src, data-mce-href and data-mce-style

   815 			self.parser.addAttributeFilter('src,href,style,tabindex', function(nodes, name) {

   816 				var i = nodes.length, node, dom = self.dom, value, internalName;

   817 

   818 				while (i--) {

   819 					node = nodes[i];

   820 					value = node.attr(name);

   821 					internalName = 'data-mce-' + name;

   822 

   823 					// Add internal attribute if we need to we don't on a refresh of the document

   824 					if (!node.attributes.map[internalName]) {

   825 						if (name === "style") {

   826 							value = dom.serializeStyle(dom.parseStyle(value), node.name);

   827 

   828 							if (!value.length) {

   829 								value = null;

   830 							}

   831 

   832 							node.attr(internalName, value);

   833 							node.attr(name, value);

   834 						} else if (name === "tabindex") {

   835 							node.attr(internalName, value);

   836 							node.attr(name, null);

   837 						} else {

   838 							node.attr(internalName, self.convertURL(value, name, node.name));

   839 						}

   840 					}

   841 				}

   842 			});

   843 

   844 			// Keep scripts from executing

   845 			self.parser.addNodeFilter('script', function(nodes) {

   846 				var i = nodes.length, node;

   847 

   848 				while (i--) {

   849 					node = nodes[i];

   850 					node.attr('type', 'mce-' + (node.attr('type') || 'no/type'));

   851 				}

   852 			});

   853 

   854 			self.parser.addNodeFilter('#cdata', function(nodes) {

   855 				var i = nodes.length, node;

   856 

   857 				while (i--) {

   858 					node = nodes[i];

   859 					node.type = 8;

   860 					node.name = '#comment';

   861 					node.value = '[CDATA[' + node.value + ']]';

   862 				}

   863 			});

   864 

   865 			self.parser.addNodeFilter('p,h1,h2,h3,h4,h5,h6,div', function(nodes) {

   866 				var i = nodes.length, node, nonEmptyElements = self.schema.getNonEmptyElements();

   867 

   868 				while (i--) {

   869 					node = nodes[i];

   870 

   871 					if (node.isEmpty(nonEmptyElements)) {

   872 						node.append(new Node('br', 1)).shortEnded = true;

   873 					}

   874 				}

   875 			});

   876 

   877 			/**

   878 			 * DOM serializer for the editor. Will be used when contents is extracted from the editor.

   879 			 *

   880 			 * @property serializer

   881 			 * @type tinymce.dom.Serializer

   882 			 * @example

   883 			 * // Serializes the first paragraph in the editor into a string

   884 			 * tinymce.activeEditor.serializer.serialize(tinymce.activeEditor.dom.select('p')[0]);

   885 			 */

   886 			self.serializer = new DomSerializer(settings, self);

   887 

   888 			/**

   889 			 * Selection instance for the editor.

   890 			 *

   891 			 * @property selection

   892 			 * @type tinymce.dom.Selection

   893 			 * @example

   894 			 * // Sets some contents to the current selection in the editor

   895 			 * tinymce.activeEditor.selection.setContent('Some contents');

   896 			 *

   897 			 * // Gets the current selection

   898 			 * alert(tinymce.activeEditor.selection.getContent());

   899 			 *

   900 			 * // Selects the first paragraph found

   901 			 * tinymce.activeEditor.selection.select(tinymce.activeEditor.dom.select('p')[0]);

   902 			 */

   903 			self.selection = new Selection(self.dom, self.getWin(), self.serializer, self);

   904 

   905 			/**

   906 			 * Formatter instance.

   907 			 *

   908 			 * @property formatter

   909 			 * @type tinymce.Formatter

   910 			 */

   911 			self.formatter = new Formatter(self);

   912 

   913 			/**

   914 			 * Undo manager instance, responsible for handling undo levels.

   915 			 *

   916 			 * @property undoManager

   917 			 * @type tinymce.UndoManager

   918 			 * @example

   919 			 * // Undoes the last modification to the editor

   920 			 * tinymce.activeEditor.undoManager.undo();

   921 			 */

   922 			self.undoManager = new UndoManager(self);

   923 

   924 			self.forceBlocks = new ForceBlocks(self);

   925 			self.enterKey = new EnterKey(self);

   926 			self._nodeChangeDispatcher = new NodeChange(self);

   927 

   928 			self.fire('PreInit');

   929 

   930 			if (!settings.browser_spellcheck && !settings.gecko_spellcheck) {

   931 				doc.body.spellcheck = false; // Gecko

   932 				DOM.setAttrib(body, "spellcheck", "false");

   933 			}

   934 

   935 			self.fire('PostRender');

   936 

   937 			self.quirks = new Quirks(self);

   938 

   939 			if (settings.directionality) {

   940 				body.dir = settings.directionality;

   941 			}

   942 

   943 			if (settings.nowrap) {

   944 				body.style.whiteSpace = "nowrap";

   945 			}

   946 

   947 			if (settings.protect) {

   948 				self.on('BeforeSetContent', function(e) {

   949 					each(settings.protect, function(pattern) {

   950 						e.content = e.content.replace(pattern, function(str) {

   951 							return '<!--mce:protected ' + escape(str) + '-->';

   952 						});

   953 					});

   954 				});

   955 			}

   956 

   957 			self.on('SetContent', function() {

   958 				self.addVisual(self.getBody());

   959 			});

   960 

   961 			// Remove empty contents

   962 			if (settings.padd_empty_editor) {

   963 				self.on('PostProcess', function(e) {

   964 					e.content = e.content.replace(/^(<p[^>]*>(&nbsp;|&#160;|\s|\u00a0|)<\/p>[\r\n]*|<br \/>[\r\n]*)$/, '');

   965 				});

   966 			}

   967 

   968 			self.load({initial: true, format: 'html'});

   969 			self.startContent = self.getContent({format: 'raw'});

   970 

   971 			/**

   972 			 * Is set to true after the editor instance has been initialized

   973 			 *

   974 			 * @property initialized

   975 			 * @type Boolean

   976 			 * @example

   977 			 * function isEditorInitialized(editor) {

   978 			 *     return editor && editor.initialized;

   979 			 * }

   980 			 */

   981 			self.initialized = true;

   982 			self.bindPendingEventDelegates();

   983 

   984 			self.fire('init');

   985 			self.focus(true);

   986 			self.nodeChanged({initial: true});

   987 			self.execCallback('init_instance_callback', self);

   988 

   989 			// Add editor specific CSS styles

   990 			if (self.contentStyles.length > 0) {

   991 				contentCssText = '';

   992 

   993 				each(self.contentStyles, function(style) {

   994 					contentCssText += style + "\r\n";

   995 				});

   996 

   997 				self.dom.addStyle(contentCssText);

   998 			}

   999 

  1000 			// Load specified content CSS last

  1001 			each(self.contentCSS, function(cssUrl) {

  1002 				if (!self.loadedCSS[cssUrl]) {

  1003 					self.dom.loadCSS(cssUrl);

  1004 					self.loadedCSS[cssUrl] = true;

  1005 				}

  1006 			});

  1007 

  1008 			// Handle auto focus

  1009 			if (settings.auto_focus) {

  1010 				setTimeout(function() {

  1011 					var editor;

  1012 

  1013 					if (settings.auto_focus === true) {

  1014 						editor = self;

  1015 					} else {

  1016 						editor = self.editorManager.get(settings.auto_focus);

  1017 					}

  1018 

  1019 					if (!editor.destroyed) {

  1020 						editor.focus();

  1021 					}

  1022 				}, 100);

  1023 			}

  1024 

  1025 			// Clean up references for IE

  1026 			targetElm = doc = body = null;

  1027 		},

  1028 

  1029 		/**

  1030 		 * Focuses/activates the editor. This will set this editor as the activeEditor in the tinymce collection

  1031 		 * it will also place DOM focus inside the editor.

  1032 		 *

  1033 		 * @method focus

  1034 		 * @param {Boolean} skipFocus Skip DOM focus. Just set is as the active editor.

  1035 		 */

  1036 		focus: function(skipFocus) {

  1037 			var self = this, selection = self.selection, contentEditable = self.settings.content_editable, rng;

  1038 			var controlElm, doc = self.getDoc(), body;

  1039 

  1040 			if (!skipFocus) {

  1041 				// Get selected control element

  1042 				rng = selection.getRng();

  1043 				if (rng.item) {

  1044 					controlElm = rng.item(0);

  1045 				}

  1046 

  1047 				self._refreshContentEditable();

  1048 

  1049 				// Focus the window iframe

  1050 				if (!contentEditable) {

  1051 					// WebKit needs this call to fire focusin event properly see #5948

  1052 					// But Opera pre Blink engine will produce an empty selection so skip Opera

  1053 					if (!Env.opera) {

  1054 						self.getBody().focus();

  1055 					}

  1056 

  1057 					self.getWin().focus();

  1058 				}

  1059 

  1060 				// Focus the body as well since it's contentEditable

  1061 				if (isGecko || contentEditable) {

  1062 					body = self.getBody();

  1063 

  1064 					// Check for setActive since it doesn't scroll to the element

  1065 					if (body.setActive) {

  1066 						// IE 11 sometimes throws "Invalid function" then fallback to focus

  1067 						try {

  1068 							body.setActive();

  1069 						} catch (ex) {

  1070 							body.focus();

  1071 						}

  1072 					} else {

  1073 						body.focus();

  1074 					}

  1075 

  1076 					if (contentEditable) {

  1077 						selection.normalize();

  1078 					}

  1079 				}

  1080 

  1081 				// Restore selected control element

  1082 				// This is needed when for example an image is selected within a

  1083 				// layer a call to focus will then remove the control selection

  1084 				if (controlElm && controlElm.ownerDocument == doc) {

  1085 					rng = doc.body.createControlRange();

  1086 					rng.addElement(controlElm);

  1087 					rng.select();

  1088 				}

  1089 			}

  1090 

  1091 			self.editorManager.setActive(self);

  1092 		},

  1093 

  1094 		/**

  1095 		 * Executes a legacy callback. This method is useful to call old 2.x option callbacks.

  1096 		 * There new event model is a better way to add callback so this method might be removed in the future.

  1097 		 *

  1098 		 * @method execCallback

  1099 		 * @param {String} name Name of the callback to execute.

  1100 		 * @return {Object} Return value passed from callback function.

  1101 		 */

  1102 		execCallback: function(name) {

  1103 			var self = this, callback = self.settings[name], scope;

  1104 

  1105 			if (!callback) {

  1106 				return;

  1107 			}

  1108 

  1109 			// Look through lookup

  1110 			if (self.callbackLookup && (scope = self.callbackLookup[name])) {

  1111 				callback = scope.func;

  1112 				scope = scope.scope;

  1113 			}

  1114 

  1115 			if (typeof callback === 'string') {

  1116 				scope = callback.replace(/\.\w+$/, '');

  1117 				scope = scope ? resolve(scope) : 0;

  1118 				callback = resolve(callback);

  1119 				self.callbackLookup = self.callbackLookup || {};

  1120 				self.callbackLookup[name] = {func: callback, scope: scope};

  1121 			}

  1122 

  1123 			return callback.apply(scope || self, Array.prototype.slice.call(arguments, 1));

  1124 		},

  1125 

  1126 		/**

  1127 		 * Translates the specified string by replacing variables with language pack items it will also check if there is

  1128 		 * a key mathcin the input.

  1129 		 *

  1130 		 * @method translate

  1131 		 * @param {String} text String to translate by the language pack data.

  1132 		 * @return {String} Translated string.

  1133 		 */

  1134 		translate: function(text) {

  1135 			var lang = this.settings.language || 'en', i18n = this.editorManager.i18n;