Ticket #8111: mytest.html

File mytest.html, 7.6 KB (added by Jakub Ś, 14 years ago)
Line 
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<!--
3Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
4For 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 &mdash; 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 &mdash; Replace Textarea Elements Using JavaScript Code
18        </h1>
19        <div class="description">
20        <p>
21                This sample shows how to automatically replace all <code>&lt;textarea&gt;</code> elements
22                with a CKEditor instance by using a JavaScript call.
23        </p>
24        <p>
25                To replace a <code>&lt;textarea&gt;</code> element, place the following call at any point
26                after the <code>&lt;textarea&gt;</code> element or inside a <code>&lt;script&gt;</code> element located
27                in the <code>&lt;head&gt;</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>&lt;textarea&gt;</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                        //]]>
95CKFinder.setupCKEditor( TheEditor, '../' ) ;
96
97/*
98 * Adjust the behavior of the dataProcessor to avoid styles
99 * and make it look like FCKeditor HTML output.
100 */
101function 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*/
189function 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 &copy; 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>
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy