1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
---|
2 | <!-- |
---|
3 | * FCKeditor - The text editor for internet |
---|
4 | * Copyright (C) 2003-2006 Frederico Caldeira Knabben |
---|
5 | * |
---|
6 | * Licensed under the terms of the GNU Lesser General Public License: |
---|
7 | * http://www.opensource.org/licenses/lgpl-license.php |
---|
8 | * |
---|
9 | * For further information visit: |
---|
10 | * http://www.fckeditor.net/ |
---|
11 | * |
---|
12 | * "Support Open Source software. What about a donation today?" |
---|
13 | * |
---|
14 | * File Name: sample12.html |
---|
15 | * Sample page. |
---|
16 | * |
---|
17 | * File Authors: |
---|
18 | * Alfonso Martinez de Lizarrondo (alfonso at uritec dot net) |
---|
19 | * based on a testcase by Finn Hakansson <finn_hakansson@yahoo.com> |
---|
20 | --> |
---|
21 | <html xmlns="http://www.w3.org/1999/xhtml"> |
---|
22 | <head> |
---|
23 | <title>FCKeditor - Sample</title> |
---|
24 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
---|
25 | <meta name="robots" content="noindex, nofollow" /> |
---|
26 | <link href="../sample.css" rel="stylesheet" type="text/css" /> |
---|
27 | <script type="text/javascript" src="../../fckeditor.js"></script> |
---|
28 | |
---|
29 | <script type="text/javascript"> |
---|
30 | |
---|
31 | var first_time = true; |
---|
32 | |
---|
33 | function new_editor(name) |
---|
34 | { |
---|
35 | var e = new FCKeditor( name + '_fckeditor_textarea' ) ; |
---|
36 | e.Width = '100%' ; |
---|
37 | e.Height = '350' ; |
---|
38 | |
---|
39 | // Automatically calculates the editor base path based on the _samples directory. |
---|
40 | // This is usefull only for these samples. A real application should use something like this: |
---|
41 | // oFCKeditor.BasePath = '/fckeditor/' ; // '/fckeditor/' is the default value. |
---|
42 | var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf('_samples')) ; |
---|
43 | |
---|
44 | e.BasePath = sBasePath ; |
---|
45 | e.ReplaceTextarea() ; |
---|
46 | } |
---|
47 | |
---|
48 | |
---|
49 | function fckeditor_loaded( name ) |
---|
50 | { |
---|
51 | if ( typeof(FCKeditorAPI) == 'undefined' ) |
---|
52 | return false; |
---|
53 | |
---|
54 | var oEditor = FCKeditorAPI.GetInstance( name + '_fckeditor_textarea' ) ; |
---|
55 | return ( typeof(oEditor) != 'undefined' ); |
---|
56 | } |
---|
57 | |
---|
58 | |
---|
59 | function toggle_editor( name ) |
---|
60 | { |
---|
61 | if ( first_time ) |
---|
62 | { |
---|
63 | first_time = false ; |
---|
64 | new_editor( name ) ; |
---|
65 | } |
---|
66 | |
---|
67 | if ( !fckeditor_loaded( name ) ) |
---|
68 | { |
---|
69 | window.setTimeout( "toggle_editor('" + name + "')" , 1000 ) ; |
---|
70 | return ; |
---|
71 | } |
---|
72 | |
---|
73 | var oEditor = FCKeditorAPI.GetInstance( name + '_fckeditor_textarea' ) ; |
---|
74 | |
---|
75 | var x = ['', 'none']; |
---|
76 | var i = 0; |
---|
77 | |
---|
78 | if (document.getElementById( name + '_textarea_div' ).style.display == '' ) |
---|
79 | { |
---|
80 | var content = document.getElementById( name + '_textarea' ).value ; |
---|
81 | oEditor.SetHTML( content ) ; |
---|
82 | i++ ; |
---|
83 | } |
---|
84 | else |
---|
85 | { |
---|
86 | var content = oEditor.GetXHTML() ; |
---|
87 | document.getElementById( name + '_textarea' ).value = content ; |
---|
88 | } |
---|
89 | |
---|
90 | document.getElementById( name + '_textarea_div' ).style.display = x[i++] ; |
---|
91 | document.getElementById( name + '_fckeditor_div' ).style.display = x[i % 2] ; |
---|
92 | |
---|
93 | // This is a hack for Gecko... it stops editing when the editor is hidden. |
---|
94 | if ( !document.all ) |
---|
95 | { |
---|
96 | if (oEditor.EditMode == FCK_EDITMODE_WYSIWYG) |
---|
97 | oEditor.MakeEditable() ; |
---|
98 | } |
---|
99 | } |
---|
100 | |
---|
101 | function prepare_save(name) |
---|
102 | { |
---|
103 | //if the textarea isn't visible update the content from the editor |
---|
104 | if ( document.getElementById( name + '_textarea_div' ).style.display == 'none' ) |
---|
105 | { |
---|
106 | var oEditor = FCKeditorAPI.GetInstance( name + '_fckeditor_textarea' ) ; |
---|
107 | document.getElementById( name + '_textarea' ).value = oEditor.GetXHTML() ; |
---|
108 | } |
---|
109 | } |
---|
110 | |
---|
111 | </script> |
---|
112 | </head> |
---|
113 | <body> |
---|
114 | <h1> |
---|
115 | FCKeditor - JavaScript - Sample 12 |
---|
116 | </h1> |
---|
117 | <div> |
---|
118 | This sample starts with a normal Textarea and provides the ability to switch back and forth between the regular textarea and FCKeditor.<br /> |
---|
119 | It uses the javascript API to do the operations so it will work even if the internal implementation changes.<br /> |
---|
120 | <br /> |
---|
121 | It's also a simple example about how to change a textarea (the hidden one) with an instace of FCKeditor at runtime. |
---|
122 | </div> |
---|
123 | <hr /> |
---|
124 | |
---|
125 | <form action="sampleposteddata.asp" method="post" target="_blank"> |
---|
126 | |
---|
127 | <table width="100%"> |
---|
128 | <tr> |
---|
129 | <td> |
---|
130 | |
---|
131 | <div id="XYZ_textarea_div"> |
---|
132 | <table> |
---|
133 | <tr> |
---|
134 | <td>Regular Textarea</td> |
---|
135 | <td><a href="javascript:toggle_editor('XYZ')">FCKeditor</a></td> |
---|
136 | </tr> |
---|
137 | </table> |
---|
138 | <br /> |
---|
139 | <textarea id="XYZ_textarea" cols="80" rows="20" style="width:100%"><b>Some</b> text to start with.</textarea> |
---|
140 | </div> |
---|
141 | |
---|
142 | <div id="XYZ_fckeditor_div" style="display:none"> |
---|
143 | <table> |
---|
144 | <tr> |
---|
145 | <td><a href="javascript:toggle_editor('XYZ');">Regular Textarea</a></td> |
---|
146 | <td>FCKeditor</td> |
---|
147 | </tr> |
---|
148 | </table> |
---|
149 | <br /> |
---|
150 | <textarea id="XYZ_fckeditor_textarea"></textarea> |
---|
151 | </div> |
---|
152 | |
---|
153 | </td> |
---|
154 | </tr> |
---|
155 | </table> |
---|
156 | |
---|
157 | <input type="submit" onclick="prepare_save();" name="save" /> |
---|
158 | </form> |
---|
159 | </body> |
---|
160 | </html> |
---|