Context Navigation

Back to Ticket #1055

Ticket #1055: fckeditingarea.js

File fckeditingarea.js, 10.7 KB (added by swift, 3 years ago)

Line
1	/*
2	* FCKeditor - The text editor for Internet - http://www.fckeditor.net
3	* Copyright (C) 2003-2007 Frederico Caldeira Knabben
4	*
5	* == BEGIN LICENSE ==
6	*
7	* Licensed under the terms of any of the following licenses at your
8	* choice:
9	*
10	* - GNU General Public License Version 2 or later (the "GPL")
11	* http://www.gnu.org/licenses/gpl.html
12	*
13	* - GNU Lesser General Public License Version 2.1 or later (the "LGPL")
14	* http://www.gnu.org/licenses/lgpl.html
15	*
16	* - Mozilla Public License Version 1.1 or later (the "MPL")
17	* http://www.mozilla.org/MPL/MPL-1.1.html
18	*
19	* == END LICENSE ==
20	*
21	* FCKEditingArea Class: renders an editable area.
22	*/
23
24	/**
25	* @constructor
26	* @param {String} targetElement The element that will hold the editing area. Any child element present in the target will be deleted.
27	*/
28	var FCKEditingArea = function( targetElement )
29	{
30	this.TargetElement = targetElement ;
31	this.Mode = FCK_EDITMODE_WYSIWYG ;
32
33	if ( FCK.IECleanup )
34	FCK.IECleanup.AddItem( this, FCKEditingArea_Cleanup ) ;
35	}
36
37	FCKEditingArea.prototype.TypeName = 'FCKEditingArea' ; // @Packager.RemoveLine
38
39	/**
40	* @param {String} html The complete HTML for the page, including DOCTYPE and the <html> tag.
41	*/
42	FCKEditingArea.prototype.Start = function( html, secondCall )
43	{
44	var eTargetElement = this.TargetElement ;
45	var oTargetDocument = FCKTools.GetElementDocument( eTargetElement ) ;
46
47	// Remove all child nodes from the target.
48	while( eTargetElement.childNodes.length > 0 )
49	eTargetElement.removeChild( eTargetElement.childNodes[0] ) ;
50
51	if ( this.Mode == FCK_EDITMODE_WYSIWYG )
52	{
53	// Create the editing area IFRAME.
54	var oIFrame = this.IFrame = oTargetDocument.createElement( 'iframe' ) ;
55
56	// Firefox will render the tables inside the body in Quirks mode if the
57	// source of the iframe is set to javascript. see #515
58	if ( !FCKBrowserInfo.IsGecko )
59	oIFrame.src = 'javascript:void(0)' ;
60
61	oIFrame.frameBorder = 0 ;
62	oIFrame.width = oIFrame.height = '100%' ;
63
64	// Append the new IFRAME to the target.
65	eTargetElement.appendChild( oIFrame ) ;
66
67	// IE has a bug with the <base> tag... it must have a </base> closer,
68	// otherwise the all sucessive tags will be set as children nodes of the <base>.
69	if ( FCKBrowserInfo.IsIE )
70	html = html.replace( /(<base[^>]?)\s\/?>(?!\s*<\/base>)/gi, '$1></base>' ) ;
71	else if ( !secondCall )
72	{
73	// Gecko moves some tags out of the body to the head, so we must use
74	// innerHTML to set the body contents (SF BUG 1526154).
75
76	// Extract the BODY contents from the html.
77	var oMatchBefore = html.match( FCKRegexLib.BeforeBody ) ;
78	var oMatchAfter = html.match( FCKRegexLib.AfterBody ) ;
79
80	if ( oMatchBefore && oMatchAfter )
81	{
82	var sBody = html.substr( oMatchBefore[1].length,
83	html.length - oMatchBefore[1].length - oMatchAfter[1].length ) ; // This is the BODY tag contents.
84
85	html =
86	oMatchBefore[1] + // This is the HTML until the <body...> tag, inclusive.
87	' ' +
88	oMatchAfter[1] ; // This is the HTML from the </body> tag, inclusive.
89
90	// If nothing in the body, place a BOGUS tag so the cursor will appear.
91	if ( FCKBrowserInfo.IsGecko && ( sBody.length == 0 \|\| FCKRegexLib.EmptyParagraph.test( sBody ) ) )
92	sBody = GECKO_BOGUS ;
93
94	this._BodyHTML = sBody ;
95
96	}
97	else
98	this._BodyHTML = html ; // Invalid HTML input.
99	}
100
101	// Get the window and document objects used to interact with the newly created IFRAME.
102	this.Window = oIFrame.contentWindow ;
103
104	// IE: Avoid JavaScript errors thrown by the editing are source (like tags events).
105	// TODO: This error handler is not being fired.
106	// this.Window.onerror = function() { alert( 'Error!' ) ; return true ; }
107	// An error handler can be attached to the iframe's content window by adding the
108	// script tag that does it during the rendering of iframe's body (see below).
109	// It seems that the dynamic attaching of the handler is not implemented in IE.
110
111	var oDoc = this.Document = this.Window.document ;
112
113	oDoc.open() ;
114	oDoc.write('<script>window.onerror=function(){return true;};</scr'+'ipt>');
115	oDoc.write( html ) ;
116	oDoc.close() ;
117
118	// Firefox 1.0.x is buggy... ohh yes... so let's do it two times and it
119	// will magicaly work.
120	if ( FCKBrowserInfo.IsGecko10 && !secondCall )
121	{
122	this.Start( html, true ) ;
123	return ;
124	}
125
126	this.Window._FCKEditingArea = this ;
127
128	// FF 1.0.x is buggy... we must wait a lot to enable editing because
129	// sometimes the content simply disappears, for example when pasting
130	// "bla1!<img src='some_url'>!bla2" in the source and then switching
131	// back to design.
132	if ( FCKBrowserInfo.IsGecko10 )
133	this.Window.setTimeout( FCKEditingArea_CompleteStart, 500 ) ;
134	else
135	FCKEditingArea_CompleteStart.call( this.Window ) ;
136	}
137	else
138	{
139	var eTextarea = this.Textarea = oTargetDocument.createElement( 'textarea' ) ;
140	eTextarea.className = 'SourceField' ;
141	eTextarea.dir = 'ltr' ;
142	eTextarea.style.width = eTextarea.style.height = '100%' ;
143	eTextarea.style.border = 'none' ;
144	// CSS3 http://www.w3.org/TR/css3-ui/#resize
145	eTextarea.style.resize = 'none' ;
146	eTargetElement.appendChild( eTextarea ) ;
147
148	eTextarea.value = html ;
149
150	// Fire the "OnLoad" event.
151	FCKTools.RunFunction( this.OnLoad ) ;
152	}
153	}
154
155	// "this" here is FCKEditingArea.Window
156	function FCKEditingArea_CompleteStart()
157	{
158	// Of Firefox, the DOM takes a little to become available. So we must wait for it in a loop.
159	if ( !this.document.body )
160	{
161	this.setTimeout( FCKEditingArea_CompleteStart, 50 ) ;
162	return ;
163	}
164
165	var oEditorArea = this._FCKEditingArea ;
166	oEditorArea.MakeEditable() ;
167
168	// Fire the "OnLoad" event.
169	FCKTools.RunFunction( oEditorArea.OnLoad ) ;
170	}
171
172	FCKEditingArea.prototype.MakeEditable = function()
173	{
174	var oDoc = this.Document ;
175
176	if ( FCKBrowserInfo.IsIE )
177	{
178	// Kludge for #141 and #523
179	oDoc.body.disabled = true ;
180	oDoc.body.contentEditable = true ;
181	oDoc.body.removeAttribute( "disabled" ) ;
182
183	/* The following commands don't throw errors, but have no effect.
184	oDoc.execCommand( 'AutoDetect', false, false ) ;
185	oDoc.execCommand( 'KeepSelection', false, true ) ;
186	*/
187	}
188	else
189	{
190	try
191	{
192	// Disable Firefox 2 Spell Checker.
193	oDoc.body.spellcheck = ( this.FFSpellChecker !== false ) ;
194
195	if ( this._BodyHTML )
196	{
197	oDoc.body.innerHTML = this._BodyHTML ;
198	this._BodyHTML = null ;
199	}
200
201	oDoc.designMode = 'on' ;
202
203	// Tell Gecko to use or not the <SPAN> tag for the bold, italic and underline.
204	try
205	{
206	oDoc.execCommand( 'styleWithCSS', false, FCKConfig.GeckoUseSPAN ) ;
207	}
208	catch (e)
209	{
210	// As evidenced here, useCSS is deprecated in favor of styleWithCSS:
211	// http://www.mozilla.org/editor/midas-spec.html
212	oDoc.execCommand( 'useCSS', false, !FCKConfig.GeckoUseSPAN ) ;
213	}
214
215	// Analysing Firefox 1.5 source code, it seams that there is support for a
216	// "insertBrOnReturn" command. Applying it gives no error, but it doesn't
217	// gives the same behavior that you have with IE. It works only if you are
218	// already inside a paragraph and it doesn't render correctly in the first enter.
219	// oDoc.execCommand( 'insertBrOnReturn', false, false ) ;
220
221	// Tell Gecko (Firefox 1.5+) to enable or not live resizing of objects (by Alfonso Martinez)
222	oDoc.execCommand( 'enableObjectResizing', false, !FCKConfig.DisableObjectResizing ) ;
223
224	// Disable the standard table editing features of Firefox.
225	oDoc.execCommand( 'enableInlineTableEditing', false, !FCKConfig.DisableFFTableHandles ) ;
226	}
227	catch (e)
228	{
229	// In Firefox if the iframe is initially hidden it can't be set to designMode and it raises an exception
230	// So we set up a DOM Mutation event Listener on the HTML, as it will raise several events when the document is visible again
231	FCKTools.AddEventListener( this.Window.frameElement, 'DOMAttrModified', FCKEditingArea_Document_AttributeNodeModified ) ;
232	}
233
234	}
235	}
236
237	// This function processes the notifications of the DOM Mutation event on the document
238	// We use it to know that the document will be ready to be editable again (or we hope so)
239	function FCKEditingArea_Document_AttributeNodeModified( evt )
240	{
241	var editingArea = evt.currentTarget.contentWindow._FCKEditingArea ;
242
243	// We want to run our function after the events no longer fire, so we can know that it's a stable situation
244	if ( editingArea._timer )
245	window.clearTimeout( editingArea._timer ) ;
246
247	editingArea._timer = FCKTools.SetTimeout( FCKEditingArea_MakeEditableByMutation, 1000, editingArea ) ;
248	}
249
250	// This function ideally should be called after the document is visible, it does clean up of the
251	// mutation tracking and tries again to make the area editable.
252	function FCKEditingArea_MakeEditableByMutation()
253	{
254	// Clean up
255	delete this._timer ;
256	// Now we don't want to keep on getting this event
257	FCKTools.RemoveEventListener( this.Window.frameElement, 'DOMAttrModified', FCKEditingArea_Document_AttributeNodeModified ) ;
258	// Let's try now to set the editing area editable
259	// If it fails it will set up the Mutation Listener again automatically
260	this.MakeEditable() ;
261	}
262
263	FCKEditingArea.prototype.Focus = function()
264	{
265	try
266	{
267	if ( this.Mode == FCK_EDITMODE_WYSIWYG )
268	{
269	// The following check is important to avoid IE entering in a focus loop. Ref:
270	// http://sourceforge.net/tracker/index.php?func=detail&aid=1567060&group_id=75348&atid=543653
271	if ( FCKBrowserInfo.IsIE && this.Document.hasFocus() )
272	this._EnsureFocusIE() ;
273
274	if ( FCKBrowserInfo.IsSafari )
275	this.IFrame.focus() ;
276	else
277	{
278	this.Window.focus() ;
279
280	// In IE it can happen that the document is in theory focused but the active element is outside it
281	if ( FCKBrowserInfo.IsIE )
282	this._EnsureFocusIE() ;
283	}
284	}
285	else
286	{
287	var oDoc = FCKTools.GetElementDocument( this.Textarea ) ;
288	if ( (!oDoc.hasFocus \|\| oDoc.hasFocus() ) && oDoc.activeElement == this.Textarea )
289	return ;
290
291	this.Textarea.focus() ;
292	}
293	}
294	catch(e) {}
295	}
296
297	FCKEditingArea.prototype._EnsureFocusIE = function()
298	{
299	// In IE it can happen that the document is in theory focused but the active element is outside it
300	this.Document.body.setActive() ;
301
302	// Kludge for #141... yet more code to workaround IE bugs
303	var range = this.Document.selection.createRange() ;
304	var oldLength = range.text.length ;
305	range.moveEnd( "character", 1 ) ;
306	range.select() ;
307	if ( range.text.length > oldLength )
308	{
309	range.moveEnd( "character", -1 ) ;
310	range.select() ;
311	}
312	}
313
314	function FCKEditingArea_Cleanup()
315	{
316	this.TargetElement = null ;
317	this.IFrame = null ;
318	this.Document = null ;
319	this.Textarea = null ;
320
321	if ( this.Window )
322	{
323	this.Window._FCKEditingArea = null ;
324	this.Window = null ;
325	}
326	}

Download in other formats:

Original Format