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