1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
---|
2 | <!-- |
---|
3 | Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. |
---|
4 | For licensing, see LICENSE.html or http://ckeditor.com/license |
---|
5 | --> |
---|
6 | <html xmlns="http://www.w3.org/1999/xhtml"> |
---|
7 | <head> |
---|
8 | <title>Replace Textarea by Code — CKEditor Sample</title> |
---|
9 | <meta content="text/html; charset=utf-8" http-equiv="content-type" /> |
---|
10 | <meta name="robots" content="noindex, nofollow" /> |
---|
11 | |
---|
12 | <script type="text/javascript" src="../../../releases/ckeditor/3.6.1/ckeditor/ckeditor_source.js"></script> |
---|
13 | <script type="text/javascript" src="../ckfinder.js"></script> |
---|
14 | </head> |
---|
15 | <body> |
---|
16 | <h1 class="samples"> |
---|
17 | CKEditor Sample — Replace Textarea Elements Using JavaScript Code |
---|
18 | </h1> |
---|
19 | <div class="description"> |
---|
20 | <p> |
---|
21 | This sample shows how to automatically replace all <code><textarea></code> elements |
---|
22 | with a CKEditor instance by using a JavaScript call. |
---|
23 | </p> |
---|
24 | <p> |
---|
25 | To replace a <code><textarea></code> element, place the following call at any point |
---|
26 | after the <code><textarea></code> element or inside a <code><script></code> element located |
---|
27 | in the <code><head></code> section of the page, in a <code>window.onload</code> event handler: |
---|
28 | </p> |
---|
29 | <pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>' );</pre> |
---|
30 | <p> |
---|
31 | Note that <code><em>textarea_id</em></code> in the code above is the <code>id</code> attribute of |
---|
32 | the <code><textarea></code> element to be replaced. |
---|
33 | </p> |
---|
34 | </div> |
---|
35 | |
---|
36 | <!-- This <div> holds alert messages to be display in the sample page. --> |
---|
37 | <div id="alerts"> |
---|
38 | <noscript> |
---|
39 | <p> |
---|
40 | <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript |
---|
41 | support, like yours, you should still see the contents (HTML data) and you should |
---|
42 | be able to edit it normally, without a rich editor interface. |
---|
43 | </p> |
---|
44 | </noscript> |
---|
45 | </div> |
---|
46 | <form action="sample_posteddata.php" method="post"> |
---|
47 | <p> |
---|
48 | <label for="editor1"> |
---|
49 | Editor 1:</label> |
---|
50 | <table> |
---|
51 | <tr> |
---|
52 | <td colspan="2"><textarea cols="74" rows="9" name="tx_Body" id="tx_Body"></textarea></td> |
---|
53 | </tr> |
---|
54 | </table> |
---|
55 | |
---|
56 | </textarea> |
---|
57 | <script type="text/javascript"> |
---|
58 | //<![CDATA[ |
---|
59 | // This call can be placed at any point after the |
---|
60 | // <textarea>, or inside a <head><script> in a |
---|
61 | // window.onload event handler. |
---|
62 | |
---|
63 | // Replace the <textarea id="editor"> with an CKEditor |
---|
64 | // instance, using default configurations. |
---|
65 | var TheEditor = CKEDITOR.replace('tx_Body', |
---|
66 | { customConfig : '', |
---|
67 | on : { 'instanceReady' : configureHtmlOutput }, |
---|
68 | skin: 'office2003', |
---|
69 | width: 600, |
---|
70 | height: 300, |
---|
71 | startupFocus: true, |
---|
72 | docType: '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">', |
---|
73 | fillEmptyBlocks: false, |
---|
74 | enterMode: CKEDITOR.ENTER_BR, |
---|
75 | font_defaultLabel: 'Verdana', |
---|
76 | fontSize_defaultLabel: '12', |
---|
77 | contentsCss: 'https://www.med.dal.ca/ckeditor/HTMLEmail.css', |
---|
78 | toolbar: |
---|
79 | [ |
---|
80 | { name: 'document', items : [ 'Source','-',/*'Save','NewPage','DocProps','Preview',*/'Print'/*,'-','Templates'*/ ] }, |
---|
81 | { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, |
---|
82 | { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] }, |
---|
83 | '/', |
---|
84 | { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] }, |
---|
85 | { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }, |
---|
86 | { name: 'links', items : [ 'Link','Unlink','Anchor' ] }, |
---|
87 | { name: 'insert', items : [ 'Image',/*'Flash',*/'Table','HorizontalRule','Smiley','SpecialChar','PageBreak'/*,'Iframe'*/ ] }, |
---|
88 | '/', |
---|
89 | { name: 'styles', items : [ /*'Styles','Format',*/'Font','FontSize' ] }, |
---|
90 | { name: 'colors', items : [ 'TextColor','BGColor' ] }, |
---|
91 | { name: 'tools', items : [ /*'Maximize', */'ShowBlocks','-','About' ] } |
---|
92 | ] |
---|
93 | } ); |
---|
94 | //]]> |
---|
95 | CKFinder.setupCKEditor( TheEditor, '../' ) ; |
---|
96 | |
---|
97 | /* |
---|
98 | * Adjust the behavior of the dataProcessor to avoid styles |
---|
99 | * and make it look like FCKeditor HTML output. |
---|
100 | */ |
---|
101 | function configureHtmlOutput( ev ) |
---|
102 | { |
---|
103 | var editor = ev.editor, |
---|
104 | dataProcessor = editor.dataProcessor, |
---|
105 | htmlFilter = dataProcessor && dataProcessor.htmlFilter; |
---|
106 | // Make output formatting behave similar to FCKeditor |
---|
107 | var dtd = CKEDITOR.dtd; |
---|
108 | for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) |
---|
109 | { |
---|
110 | dataProcessor.writer.setRules( e, |
---|
111 | { |
---|
112 | indent : true, |
---|
113 | breakBeforeOpen : true, |
---|
114 | breakAfterOpen : false, |
---|
115 | breakBeforeClose : !dtd[ e ][ '##' ], |
---|
116 | breakAfterClose : true |
---|
117 | }); |
---|
118 | } |
---|
119 | |
---|
120 | // Output properties as attributes, not styles. |
---|
121 | htmlFilter.addRules( |
---|
122 | { |
---|
123 | elements : |
---|
124 | { |
---|
125 | $ : function( element ){ |
---|
126 | // Output dimensions of images as width and height |
---|
127 | if ( element.name == 'img' ) |
---|
128 | { |
---|
129 | var style = element.attributes.style; |
---|
130 | if ( style ){ |
---|
131 | // Get the width from the style. |
---|
132 | var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ), |
---|
133 | width = match && match[1]; |
---|
134 | |
---|
135 | // Get the height from the style. |
---|
136 | match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style ); |
---|
137 | var height = match && match[1]; |
---|
138 | |
---|
139 | if ( width ){ |
---|
140 | element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' ); |
---|
141 | element.attributes.width = width; |
---|
142 | } |
---|
143 | if ( height ){ |
---|
144 | element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' ); |
---|
145 | element.attributes.height = height; |
---|
146 | } |
---|
147 | } |
---|
148 | } |
---|
149 | |
---|
150 | // Output alignment of paragraphs using align |
---|
151 | if ( element.name == 'p' ) |
---|
152 | { |
---|
153 | style = element.attributes.style; |
---|
154 | |
---|
155 | if ( style ){ |
---|
156 | // Get the align from the style. |
---|
157 | match = /(?:^|\s)text-align\s*:\s*(\w*);/i.exec( style ); |
---|
158 | var align = match && match[1]; |
---|
159 | |
---|
160 | if ( align ){ |
---|
161 | element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' ); |
---|
162 | element.attributes.align = align; |
---|
163 | } |
---|
164 | } |
---|
165 | } |
---|
166 | |
---|
167 | if ( !element.attributes.style ) |
---|
168 | delete element.attributes.style; |
---|
169 | |
---|
170 | return element; |
---|
171 | } |
---|
172 | }, |
---|
173 | |
---|
174 | attributes : |
---|
175 | { |
---|
176 | style : function( value, element ){ |
---|
177 | // Return ##RGB for background and border colors |
---|
178 | return convertRGBToHex( value ); |
---|
179 | } |
---|
180 | } |
---|
181 | } ); |
---|
182 | } |
---|
183 | |
---|
184 | /** |
---|
185 | * Convert a CSS rgb(R, G, B) color back to ##RRGGBB format. |
---|
186 | * @param Css style string (can include more than one color |
---|
187 | * @return Converted css style. |
---|
188 | */ |
---|
189 | function convertRGBToHex( cssStyle ){ |
---|
190 | return cssStyle.replace( /(?:rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\))/gi, function( match, red, green, blue ){ |
---|
191 | red = parseInt( red, 10 ).toString( 16 ); |
---|
192 | green = parseInt( green, 10 ).toString( 16 ); |
---|
193 | blue = parseInt( blue, 10 ).toString( 16 ); |
---|
194 | var color = [red, green, blue] ; |
---|
195 | |
---|
196 | // Add padding zeros if the hex value is less than 0x10. |
---|
197 | for ( var i = 0 ; i < color.length ; i++ ){ |
---|
198 | color[i] = String( '0' + color[i] ).slice( -2 ) ; |
---|
199 | } |
---|
200 | |
---|
201 | return '##' + color.join( '' ) ; |
---|
202 | }); |
---|
203 | } |
---|
204 | |
---|
205 | |
---|
206 | </script> |
---|
207 | </p> |
---|
208 | <p> |
---|
209 | <input type="submit" value="Submit" /> |
---|
210 | </p> |
---|
211 | </form> |
---|
212 | <div id="footer"> |
---|
213 | <hr /> |
---|
214 | <p> |
---|
215 | CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a> |
---|
216 | </p> |
---|
217 | <p id="copy"> |
---|
218 | Copyright © 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico |
---|
219 | Knabben. All rights reserved. |
---|
220 | </p> |
---|
221 | </div> |
---|
222 | </body> |
---|
223 | </html> |
---|