_samples/output_html.html

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