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