[239] | 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>HTML Compliant Output — CKEditor Sample</title>
|
---|
| 9 | <meta content="text/html; charset=utf-8" http-equiv="content-type" />
|
---|
| 10 | <script type="text/javascript" src="../ckeditor.js"></script>
|
---|
| 11 | <script src="sample.js" type="text/javascript"></script>
|
---|
| 12 | <link href="sample.css" rel="stylesheet" type="text/css" />
|
---|
| 13 | </head>
|
---|
| 14 | <body>
|
---|
| 15 | <h1 class="samples">
|
---|
| 16 | CKEditor Sample — Producing HTML Compliant Output
|
---|
| 17 | </h1>
|
---|
| 18 | <div class="description">
|
---|
| 19 | <p>
|
---|
| 20 | This sample shows how to configure CKEditor to output valid
|
---|
| 21 | <a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.
|
---|
| 22 | Traditional HTML elements like <code><b></code>,
|
---|
| 23 | <code><i></code>, and <code><font></code> are used in place of
|
---|
| 24 | <code><strong></code>, <code><em></code>, and CSS styles.
|
---|
| 25 | </p>
|
---|
| 26 | <p>
|
---|
| 27 | To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard
|
---|
| 28 | JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.
|
---|
| 29 | </p>
|
---|
| 30 | <p>
|
---|
| 31 | A snippet of the configuration code can be seen below; check the source of this page for
|
---|
| 32 | full definition:
|
---|
| 33 | </p>
|
---|
| 34 | <pre class="samples">CKEDITOR.replace( '<em>textarea_id</em>',
|
---|
| 35 | {
|
---|
| 36 | coreStyles_bold : { element : 'b' },
|
---|
| 37 | coreStyles_italic : { element : 'i' },
|
---|
| 38 |
|
---|
| 39 | fontSize_style :
|
---|
| 40 | {
|
---|
| 41 | element : 'font',
|
---|
| 42 | attributes : { 'size' : '#(size)' }
|
---|
| 43 | }
|
---|
| 44 |
|
---|
| 45 | // More definitions follow.
|
---|
| 46 | });</pre>
|
---|
| 47 | </div>
|
---|
| 48 |
|
---|
| 49 | <!-- This <div> holds alert messages to be display in the sample page. -->
|
---|
| 50 | <div id="alerts">
|
---|
| 51 | <noscript>
|
---|
| 52 | <p>
|
---|
| 53 | <strong>CKEditor requires JavaScript to run</strong>. In a browser with no JavaScript
|
---|
| 54 | support, like yours, you should still see the contents (HTML data) and you should
|
---|
| 55 | be able to edit it normally, without a rich editor interface.
|
---|
| 56 | </p>
|
---|
| 57 | </noscript>
|
---|
| 58 | </div>
|
---|
| 59 | <form action="sample_posteddata.php" method="post">
|
---|
| 60 | <p>
|
---|
| 61 | <label for="editor1">
|
---|
| 62 | Editor 1:</label>
|
---|
| 63 | <textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <b>sample text</b>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
|
---|
| 64 | <script type="text/javascript">
|
---|
| 65 | //<![CDATA[
|
---|
| 66 |
|
---|
| 67 | CKEDITOR.replace( 'editor1',
|
---|
| 68 | {
|
---|
| 69 | /*
|
---|
| 70 | * Style sheet for the contents
|
---|
| 71 | */
|
---|
| 72 | contentsCss : 'body {color:#000; background-color#:FFF;}',
|
---|
| 73 |
|
---|
| 74 | /*
|
---|
| 75 | * Simple HTML5 doctype
|
---|
| 76 | */
|
---|
| 77 | docType : '<!DOCTYPE HTML>',
|
---|
| 78 |
|
---|
| 79 | /*
|
---|
| 80 | * Core styles.
|
---|
| 81 | */
|
---|
| 82 | coreStyles_bold : { element : 'b' },
|
---|
| 83 | coreStyles_italic : { element : 'i' },
|
---|
| 84 | coreStyles_underline : { element : 'u'},
|
---|
| 85 | coreStyles_strike : { element : 'strike' },
|
---|
| 86 |
|
---|
| 87 | /*
|
---|
| 88 | * Font face
|
---|
| 89 | */
|
---|
| 90 | // Define the way font elements will be applied to the document. The "font"
|
---|
| 91 | // element will be used.
|
---|
| 92 | font_style :
|
---|
| 93 | {
|
---|
| 94 | element : 'font',
|
---|
| 95 | attributes : { 'face' : '#(family)' }
|
---|
| 96 | },
|
---|
| 97 |
|
---|
| 98 | /*
|
---|
| 99 | * Font sizes.
|
---|
| 100 | */
|
---|
| 101 | fontSize_sizes : 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
|
---|
| 102 | fontSize_style :
|
---|
| 103 | {
|
---|
| 104 | element : 'font',
|
---|
| 105 | attributes : { 'size' : '#(size)' }
|
---|
| 106 | } ,
|
---|
| 107 |
|
---|
| 108 | /*
|
---|
| 109 | * Font colors.
|
---|
| 110 | */
|
---|
| 111 | colorButton_enableMore : true,
|
---|
| 112 |
|
---|
| 113 | colorButton_foreStyle :
|
---|
| 114 | {
|
---|
| 115 | element : 'font',
|
---|
| 116 | attributes : { 'color' : '#(color)' }
|
---|
| 117 | },
|
---|
| 118 |
|
---|
| 119 | colorButton_backStyle :
|
---|
| 120 | {
|
---|
| 121 | element : 'font',
|
---|
| 122 | styles : { 'background-color' : '#(color)' }
|
---|
| 123 | },
|
---|
| 124 |
|
---|
| 125 | /*
|
---|
| 126 | * Styles combo.
|
---|
| 127 | */
|
---|
| 128 | stylesSet :
|
---|
| 129 | [
|
---|
| 130 | { name : 'Computer Code', element : 'code' },
|
---|
| 131 | { name : 'Keyboard Phrase', element : 'kbd' },
|
---|
| 132 | { name : 'Sample Text', element : 'samp' },
|
---|
| 133 | { name : 'Variable', element : 'var' },
|
---|
| 134 |
|
---|
| 135 | { name : 'Deleted Text', element : 'del' },
|
---|
| 136 | { name : 'Inserted Text', element : 'ins' },
|
---|
| 137 |
|
---|
| 138 | { name : 'Cited Work', element : 'cite' },
|
---|
| 139 | { name : 'Inline Quotation', element : 'q' }
|
---|
| 140 | ],
|
---|
| 141 |
|
---|
| 142 | on : { 'instanceReady' : configureHtmlOutput }
|
---|
| 143 | });
|
---|
| 144 |
|
---|
| 145 | /*
|
---|
| 146 | * Adjust the behavior of the dataProcessor to avoid styles
|
---|
| 147 | * and make it look like FCKeditor HTML output.
|
---|
| 148 | */
|
---|
| 149 | function configureHtmlOutput( ev )
|
---|
| 150 | {
|
---|
| 151 | var editor = ev.editor,
|
---|
| 152 | dataProcessor = editor.dataProcessor,
|
---|
| 153 | htmlFilter = dataProcessor && dataProcessor.htmlFilter;
|
---|
| 154 |
|
---|
| 155 | // Out self closing tags the HTML4 way, like <br>.
|
---|
| 156 | dataProcessor.writer.selfClosingEnd = '>';
|
---|
| 157 |
|
---|
| 158 | // Make output formatting behave similar to FCKeditor
|
---|
| 159 | var dtd = CKEDITOR.dtd;
|
---|
| 160 | for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) )
|
---|
| 161 | {
|
---|
| 162 | dataProcessor.writer.setRules( e,
|
---|
| 163 | {
|
---|
| 164 | indent : true,
|
---|
| 165 | breakBeforeOpen : true,
|
---|
| 166 | breakAfterOpen : false,
|
---|
| 167 | breakBeforeClose : !dtd[ e ][ '#' ],
|
---|
| 168 | breakAfterClose : true
|
---|
| 169 | });
|
---|
| 170 | }
|
---|
| 171 |
|
---|
| 172 | // Output properties as attributes, not styles.
|
---|
| 173 | htmlFilter.addRules(
|
---|
| 174 | {
|
---|
| 175 | elements :
|
---|
| 176 | {
|
---|
| 177 | $ : function( element )
|
---|
| 178 | {
|
---|
| 179 | // Output dimensions of images as width and height
|
---|
| 180 | if ( element.name == 'img' )
|
---|
| 181 | {
|
---|
| 182 | var style = element.attributes.style;
|
---|
| 183 |
|
---|
| 184 | if ( style )
|
---|
| 185 | {
|
---|
| 186 | // Get the width from the style.
|
---|
| 187 | var match = /(?:^|\s)width\s*:\s*(\d+)px/i.exec( style ),
|
---|
| 188 | width = match && match[1];
|
---|
| 189 |
|
---|
| 190 | // Get the height from the style.
|
---|
| 191 | match = /(?:^|\s)height\s*:\s*(\d+)px/i.exec( style );
|
---|
| 192 | var height = match && match[1];
|
---|
| 193 |
|
---|
| 194 | if ( width )
|
---|
| 195 | {
|
---|
| 196 | element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
|
---|
| 197 | element.attributes.width = width;
|
---|
| 198 | }
|
---|
| 199 |
|
---|
| 200 | if ( height )
|
---|
| 201 | {
|
---|
| 202 | element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
|
---|
| 203 | element.attributes.height = height;
|
---|
| 204 | }
|
---|
| 205 | }
|
---|
| 206 | }
|
---|
| 207 |
|
---|
| 208 | // Output alignment of paragraphs using align
|
---|
| 209 | if ( element.name == 'p' )
|
---|
| 210 | {
|
---|
| 211 | style = element.attributes.style;
|
---|
| 212 |
|
---|
| 213 | if ( style )
|
---|
| 214 | {
|
---|
| 215 | // Get the align from the style.
|
---|
| 216 | match = /(?:^|\s)text-align\s*:\s*(\w*);/i.exec( style );
|
---|
| 217 | var align = match && match[1];
|
---|
| 218 |
|
---|
| 219 | if ( align )
|
---|
| 220 | {
|
---|
| 221 | element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
|
---|
| 222 | element.attributes.align = align;
|
---|
| 223 | }
|
---|
| 224 | }
|
---|
| 225 | }
|
---|
| 226 |
|
---|
| 227 | if ( !element.attributes.style )
|
---|
| 228 | delete element.attributes.style;
|
---|
| 229 |
|
---|
| 230 | return element;
|
---|
| 231 | }
|
---|
| 232 | },
|
---|
| 233 |
|
---|
| 234 | attributes :
|
---|
| 235 | {
|
---|
| 236 | style : function( value, element )
|
---|
| 237 | {
|
---|
| 238 | // Return #RGB for background and border colors
|
---|
| 239 | return convertRGBToHex( value );
|
---|
| 240 | }
|
---|
| 241 | }
|
---|
| 242 | } );
|
---|
| 243 | }
|
---|
| 244 |
|
---|
| 245 |
|
---|
| 246 | /**
|
---|
| 247 | * Convert a CSS rgb(R, G, B) color back to #RRGGBB format.
|
---|
| 248 | * @param Css style string (can include more than one color
|
---|
| 249 | * @return Converted css style.
|
---|
| 250 | */
|
---|
| 251 | function convertRGBToHex( cssStyle )
|
---|
| 252 | {
|
---|
| 253 | return cssStyle.replace( /(?:rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\))/gi, function( match, red, green, blue )
|
---|
| 254 | {
|
---|
| 255 | red = parseInt( red, 10 ).toString( 16 );
|
---|
| 256 | green = parseInt( green, 10 ).toString( 16 );
|
---|
| 257 | blue = parseInt( blue, 10 ).toString( 16 );
|
---|
| 258 | var color = [red, green, blue] ;
|
---|
| 259 |
|
---|
| 260 | // Add padding zeros if the hex value is less than 0x10.
|
---|
| 261 | for ( var i = 0 ; i < color.length ; i++ )
|
---|
| 262 | color[i] = String( '0' + color[i] ).slice( -2 ) ;
|
---|
| 263 |
|
---|
| 264 | return '#' + color.join( '' ) ;
|
---|
| 265 | });
|
---|
| 266 | }
|
---|
| 267 | //]]>
|
---|
| 268 | </script>
|
---|
| 269 | </p>
|
---|
| 270 | <p>
|
---|
| 271 | <input type="submit" value="Submit" />
|
---|
| 272 | </p>
|
---|
| 273 | </form>
|
---|
| 274 | <div id="footer">
|
---|
| 275 | <hr />
|
---|
| 276 | <p>
|
---|
| 277 | CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
|
---|
| 278 | </p>
|
---|
| 279 | <p id="copy">
|
---|
| 280 | Copyright © 2003-2011, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
|
---|
| 281 | Knabben. All rights reserved.
|
---|
| 282 | </p>
|
---|
| 283 | </div>
|
---|
| 284 | </body>
|
---|
| 285 | </html>
|
---|