The source code of FCKeditor has been studied over the past few days (what is FCKeditor ?) I searched the Internet almost, and it seems that fckconfig. the js file explains a lot, but for fckeditor. js: The FCK core file is almost 0. so it took a whole day to squeeze the toothpaste into the fckeditor. js, The fck core file, provides comments as much as you can for the reference of fck users. Note: This article is based on FCKeditor2.6.5
Copy to ClipboardReference: [www.bkjia.com] 1 ./**
2 .*
3. ************* CopyRight **************
4. * ------- Annotated by nileader -----
5. * ----- Version 1.00 -----
6. * ----- Once copied, marked http://www.nileader.cn
7 .*
8. * FCKeditor class annotated by nileader
9. * @ param {Object} the unique name (equivalent to ID) of the instanceName editor is a non-saving parameter,
10. * width, height, toolbarset, and value are optional parameters.
11 .*/
12. var FCKeditor = function (instanceName, width, height, toolbarSet, value)
13 .{
14. // note the basic attributes of the Editor: These things take precedence over the configuration in FCKConfig. js.
15.
16. this. InstanceName = instanceName; // the unique name of the Editor (equivalent to ID) (required !)
17. this. Width = width | '000000'; // The default Width is 100%.
18. this. Height = height | '000000'; // The default width is 200.
19. this. ToolbarSet = toolbarSet | 'default'; // tool set name. The Default value is Default.
20. this. Value = value | ''; // initialize the HTML code of the editor. The default Value is null.
21. // The default root path when the editor is initialized. It is used to compile fck. All the paths used are from the FCKeditor. BasePath directory. The default value is/Fckeditor/
22. this. BasePath = FCKeditor. BasePath;
23. this. CheckBrowser = true; // check whether the browser compatibility is checked before the editor is displayed. The default value is true.
24. this. DisplayErrors = true; // whether an error is displayed. The default value is true.
25. this. Config = new Object ();
26. // Events
27. this. OnError = null; // function (source, errorNumber, errorDescription) custom error handling function
28 .}
29. FCKeditor. BasePath = '/fckeditor/'; // default root directory of fck
30. FCKeditor. MinHeight = 200; // height and width
31. FCKeditor. MinWidth = 750;
32. FCKeditor. prototype. Version = '2. 6.5 '; // Version
33. FCKeditor. prototype. VersionBuild = '201312 ';
34 ./**
35. * Call CreateHtml () to generate the html code of the editor and output the editor on the page.
36 .*/
37. FCKeditor. prototype. Create = function ()
38 .{
39. // call the createhtml () method
40. document. write (this. CreateHtml ());
41 .}
42 ./**
43. * @ return sHtml is used to generate the html code of the editor.
44 .*/
45. FCKeditor. prototype. CreateHtml = function ()
46 .{
47. // check whether InstanceName exists. If not, no html code is generated.
48. if (! This. InstanceName | this. InstanceName. length = 0)
49 .{
50. this. _ ThrowError (701, 'you must specify an instance name .');
51. return '';
52 .}
53. // return value of the Function
54. var sHtml = '';
55 ./*
56. * when your browser meets the preset browser types,
57. * generate a text box with id = "this. instancename" name = "this. instancename", the actual content storage
58 .*/
59. if (! This. CheckBrowser | this. _ IsCompatibleBrowser ())
60 .{
61. // escape the FCK initial value and put it into the input
62. sHtml + = '<input type = "hidden" id = "' + this. instanceName + '"name ="' + this. instanceName + '"value ="' + this. _ HTMLEncode (this. value) + '"style =" display: none "mce_style =" display: none "/> ';
63. // generate a hidden INPUT to place the content in this. config
64. sHtml + = this. _ GetConfigHtml ();
65. // generate the iframe code of the Editor
66. sHtml + = this. _ GetIFrameHtml ();
67 .}
68 ./**
69. * If your browser is not compatible with several default FCK browsers
70. * only traditional textarea is available.
71 .*/
72. else
73 .{
74. var sWidth = this. Width. toString (). indexOf ('%')> 0? This. Width: this. Width + 'px ';
75. var sHeight = this. Height. toString (). indexOf ('%')> 0? This. Height: this. Height + 'px ';
76. sHtml + = '<textarea name = "' + this. InstanceName +
77. '"rows =" 4 "cols =" 40 "style =" width:' + sWidth +
78. '; height:' + sHeight;
79. if (this. TabIndex)
80. sHtml + = '"tabindex ="' + this. TabIndex;
81. sHtml + = '">' +
82. this. _ HTMLEncode (this. Value) +
83. '<\/textarea> ';
84 .}
85. return sHtml;
86 .}
87 ./**
88. * use the editor to replace the corresponding text box.
89 .*/
90. FCKeditor. prototype. ReplaceTextarea = function ()
91 .{
92. // If the tag id = THIS. INSTANCENAME ___ Frame already exists, return directly
93. if (document. getElementById (this. InstanceName + '___ Frame '))
94. return;
95. // when your browser meets the preset browser types
96. if (! This. CheckBrowser | this. _ IsCompatibleBrowser ())
97 .{
98. // We must check the elements firstly using the Id and then the name.
99. // obtain the html Tag of id = this. InstanceName
100. var oTextarea = document. getElementById (this. InstanceName );
101. // obtain all labels whose names are THIS. instancename
102. var colElementsByName = document. getElementsByName (this. InstanceName );
103. var I = 0;
104 ./*
105. * considering that the user's html Tag name is not standardized, the author determines from the following calendar: the user uses name = this. instancename in the textarea tag.
106. * name = this. instancename is also used for other labels on the same page.
107 .*/
108. while (oTextarea | I = 0)
109 .{
110. // traverse until the textarea tag of name = this. instancename is found and assigned to oTextarea
111. if (oTextarea & oTextarea. tagName. toLowerCase () = 'textarea ')
112. break;
113. oTextarea = colElementsByName [I ++];
114 .}
115. // If the tag id or name is this. instancename does not exist, the error box is displayed.
116. if (! OTextarea)
117 .{
118. alert ('error: The TEXTAREA with id or name set to "'+ this. InstanceName +'" was not found ');
119. return;
120 .}
121 ./*
122. * after confirming that the textarea tag with name = this. instancename exists, assign the editor code to it.
123 .*/
124. oTextarea. style. display = 'none ';
125. // if the order of the tab key is defined for such a textarea tag on the page, assign it to this. TabIndex to be used.
126. if (oTextarea. tabIndex)
127. this. TabIndex = oTextarea. tabIndex;
128. this. _ InsertHtmlBefore (this. _ GetConfigHtml (), oTextarea );
129. this. _ InsertHtmlBefore (this. _ GetIFrameHtml (), oTextarea );
130 .}
131 .}
132.
133.
134.
135 ./**
136. * insert html code before the specified page tag
137. * @ param {Object} the html code to be inserted
138. * @ param {Object} the specified page tag (Object)
139 .*/
140. FCKeditor. prototype. _ InsertHtmlBefore = function (html, element)
141 .{
142. if (element. insertAdjacentHTML) // The Private insertAdjacentHTML method of IE
143. element. insertAdjacentHTML ('beforebegin', html );
144. else // non-IE browser
145 .{
146.
147. var oRange = document. createRange ();
148. oRange. setStartBefore (element );
149. var oFragment = oRange. createContextualFragment (html );
150. element. parentNode. insertBefore (oFragment, element );
151 .}
152 .}
153.
154.
155 ./*
156. * compile this. Config [] to generate a hidden domain,
157. * example:
158. * this. Config ['nileader '] = "1104", this. Config ['leaderni'] = "nichao "......
159. * then, sConfig = ...... & Nileader = 1104 & leaderni = nichao ......
160. * Of course, in the end, sConfig will be converted into percentage encoding by the encodeURIComponent function and put in hidden INPUT.
161 .*/
162. FCKeditor. prototype. _ GetConfigHtml = function ()
163 .{
164. var sConfig = '';
165. for (var o in this. Config)
166 .{
167. if (sConfig. length> 0) sConfig + = '&';
168. // encodeURIComponent function to convert to percent Encoding
169. sConfig + = encodeURIComponent (o) + '=' + encodeURIComponent (this. Config [o]);
170 .}
171. return '<input type = "hidden" id = "' + this. instanceName + '___ Config "value ="' + sConfig + '"style =" display: none "mce_style =" display: none "/> ';
172 .}
173.
174 ./*
175. * generating iframe html involves the confirmation of src.
176 .*/
177. FCKeditor. prototype. _ GetIFrameHtml = function ()
178 .{
179. var sFile = 'fckeditor.html ';
180. // In special cases, the window in which fckedito is located is not embedded in the browser
181. try
182 .{
183. if (/fcksource = true/I). test (window. top. location. search ))
184. sFile = 'fckeditor.original.html ';
185 .}
186. catch (e) {/* ignore this exception. In many cases, the window in which fckedito is located is embedded in the browser .*/}
187 ./*
188. * Notes:
189. * How iframe works: When iframe is editable, the page where src is actually edited
190. * here, an sLink is merged to put it into the iframe tag.
191 .*/
192. // sLink is the actual page, starting from the root directory of fck, such as sLink =/fckeditor/editor/fckeditor.html? InstanceName = nileader & Toolbar = nileadersbar
193. var sLink = this. BasePath + 'editor/'+ sFile + '? InstanceName = '+ encodeURIComponent (this. InstanceName );
194. if (this. ToolbarSet)
195. sLink + = '& Toolbar =' + this. ToolbarSet;
196. // generate a real html code for editing iframer. Of course, put src = slink title = "bkjia.com"
197. var html = '<iframe id = "' + this. InstanceName +
198. '___ Frame "src ="' + sLink +
199. '"mce_src ="' + sLink +
200. '"width ="' + this. Width +
201. '"height ="' + this. Height;
202. // If the traversal order using the "Tab" key is set, the iframe
203. if (this. TabIndex)
204. html + = '"tabindex ="' + this. TabIndex;
205. html + = '"frameborder =" 0 "scrolling =" no "> </iframe> ';
206. return html;
207 .}
208.
209 ./*
210. * check whether the user's Bock is the default value of fck.
211. * This method is meaningless because fck pursues oo.
212 .*/
213. FCKeditor. prototype. _ IsCompatibleBrowser = function ()
214 .{
215. return FCKeditor_IsCompatibleBrowser ();
216 .}
217.
218 ./**
219. * Throw an error
220. * @ param {Object} errorNumber error code
221. * @ param {Object} errorDescription error Overview
222 .*/
223. FCKeditor. prototype. _ ThrowError = function (errorNumber, errorDescription)
224 .{
225. this. ErrorNumber = errorNumber;
226. this. ErrorDescription = errorDescription;
227. // whether an error is displayed. The default value is true.
228. if (this. DisplayErrors)
229. {// print the error number and error Overview
230. document. write ('<div style = "COLOR: # ff0000" mce_style = "COLOR: # ff0000"> ');
231. document. write ('[FCKeditor Error' + this. ErrorNumber + ':' + this. ErrorDescription + ']');
232. document. write ('</div> ');
233 .}
234. // whether the OnError function is customized. If yes, it will handle the error
235. if (typeof (this. OnError) = 'function ')
236. this. OnError (this, errorNumber, errorDescription );
237 .}
238.
239 ./**
240. * escape text
241. * @ param {Object} text to be escaped
242. * @ return String text the text after escaping
243 .*/
244. FCKeditor. prototype. _ HTMLEncode = function (text)
245 .{
246. if (typeof (text )! = "String ")
247. text = text. toString ();
248. // replace all & "<> In the string with the corresponding Escape Character
249. text = text. replace (
250./&/g, "&"). replace (
251./"/g," "). replace (
252./</g, "<"). replace (
253./>/g, "> ");
254. return text;
255 .}
256.
257.; (function ()
258 .{
259. // assign the textarea element on the page to the editor variable
260. var textareaToEditor = function (textarea)
261 .{
262. var editor = new FCKeditor (textarea. name );
263. editor. Width = Math. max (textarea. offsetWidth, FCKeditor. MinWidth );
264. editor. Height = Math. max (textarea. offsetHeight, FCKeditor. MinHeight );
265. return editor;
266 .}
267 ./**
268. * Replace all <textarea> elements available in the document with FCKeditor
269. * instances.
270 .*
271. * // Replace all <textarea> elements in the page.
272. * FCKeditor. ReplaceAllTextareas ();
273 .*
274. * // Replace all <textarea class = "myClassName"> elements in the page.
275. * FCKeditor. ReplaceAllTextareas ('myclassname ');
276 .*
277. * // Selectively replace <textarea> elements, based on custom assertions.
278. * FCKeditor. ReplaceAllTextareas (function (textarea, editor)
279 .*{
280. * // Custom code to evaluate the replace, returning false if it
281. * // must not be done.
282. * // It also passes the "editor" parameter, so the developer can
283. * // customize the instance.
284 .*});
285 .*/
286. FCKeditor. ReplaceAllTextareas = function ()
287 .{
288. // obtain all textarea Elements
289. var textareas = document. getElementsByTagName ('textarea ');
290.
291. for (var I = 0; I <textareas. length; I ++)
292 .{
293. var editor = null;
294. var textarea = textareas [I];
295. var name = textarea. name;
296. // The "name" attribute must exist.
297. if (! Name | name. length = 0)
298. continue;
299. if (typeof arguments [0] = 'string ')
300 .{
301. // The textarea class name cocould be passed as the function
302. // parameter.
303. var classRegex = new RegExp ('(? : ^ |) '+ Arguments [0] + '(? : $ | )');
304. if (! ClassRegex. test (textarea. className ))
305. continue;
306 .}
307. else if (typeof arguments [0] = 'function ')
308 .{
309. // An assertion function cocould be passed as the function parameter.
310. // It must explicitly return "false" to ignore a specific <textarea>.
311. editor = textareaToEditor (textarea );
312. if (arguments [0] (textarea, editor) === false)
313. continue;
314 .}
315. if (! Editor)
316. editor = textareaToEditor (textarea );
317. editor. ReplaceTextarea ();
318 .}
319 .}
320 .})();
321.
322 ./**
323. * Check the browser compatibility
324. * Some information returned by the navigator object sAgent is used to determine whether the browser returns information including the browser code name, browser name, browser version language, and other information in lower case.
325. * example:
326. * mozilla/4.0 (compatible; msie 6.0; windows nt 5.2; sv1;. net clr 1.1.4322)
327 .*
328. * when judging the IE browser, Conditional compilation is added after IE4.0 is used,
329. * This attribute is not supported in W3C standard browsers because it is only supported by IE. Therefore, make proper use of this feature to Determine IE
330 .*/
331. function FCKeditor_IsCompatibleBrowser ()
332 .{
333. var sAgent = navigator. userAgent. toLowerCase ();
334. // The current browser is Internet Explorer 5.5 +
335. // use Conditional compilation to determine that IE is in IE,/* @ cc_on! @ */False =! False = true,
336. // if it is not an IE browser, ignore it./* @ cc_on! @ */False = false
337. if (/* @ cc_on! @ */False & sAgent. indexOf ("mac") =-1) // not an apple mac OS
338 .{
339. var sBrowserVersion = navigator. appVersion. match (/MSIE (..)/) [1];
340. return (sBrowserVersion> = 5.5 );
341 .}
342. // Gecko (Opera 9 tries to behave like Gecko at this point ).
343. // check whether the browser is OPERA 9
344. if (navigator. product = "Gecko" & navigator. productSub> = 20030210 &&! (Typeof (opera) = 'object' & opera. postError ))
345. return true;
346. // Opera 9.50 +
347. if (window. opera & window. opera. version & parseFloat (window. opera. version ()> = 9.5)
348. return true;
349. // Adobe AIR
350. // Checked before Safari because AIR have the WebKit rich text editor
351. // features from Safari 3.0.4, but the version reported is 420.
352. if (sAgent. indexOf ('adobeair /')! =-1)
353. return (sAgent. match (/adobeair \/(\ d +)/) [1]> = 1); // Build must be at least v1
354. // Safari 3 +
355. if (sAgent. indexOf ('applewebkit /')! =-1)
356. return (sAgent. match (/applewebkit \/(\ d +)/) [1]> = 522); // Build must be at least 522 (v3)
357. return false;
358 .}
In view of the limited level of the author, the majority of experts are invited to point out what is inappropriate in my comments, so as not to mislead others. Thank you. We recommend that you copy it to your IDE or
For more authoritative information, see FCK official Developers Guide
