samples/plugins/htmlwriter/outputhtml.html

   1 <!DOCTYPE html>\r
   2 <!--\r
   3 Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.\r
   4 For licensing, see LICENSE.html or http://ckeditor.com/license\r
   5 -->\r
   6 <html>\r
   7 <head>\r
   8         <title>HTML Compliant Output &mdash; CKEditor Sample</title>\r
   9         <meta charset="utf-8">\r
  10         <script src="../../../ckeditor.js"></script>\r
  11         <script src="../../../samples/sample.js"></script>\r
  12         <link href="../../../samples/sample.css" rel="stylesheet">\r
  13         <meta name="ckeditor-sample-required-plugins" content="sourcearea">\r
  14         <meta name="ckeditor-sample-name" content="Output HTML">\r
  15         <meta name="ckeditor-sample-group" content="Advanced Samples">\r
  16         <meta name="ckeditor-sample-description" content="Configuring CKEditor to produce legacy HTML 4 code.">\r
  17 </head>\r
  18 <body>\r
  19         <h1 class="samples">\r
  20                 <a href="../../../samples/index.html">CKEditor Samples</a> &raquo; Producing HTML Compliant Output\r
  21         </h1>\r
  22         <div class="description">\r
  23                 <p>\r
  24                         This sample shows how to configure CKEditor to output valid\r
  25                         <a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.\r
  26                         Traditional HTML elements like <code>&lt;b&gt;</code>,\r
  27                         <code>&lt;i&gt;</code>, and <code>&lt;font&gt;</code> are used in place of\r
  28                         <code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code>, and CSS styles.\r
  29                 </p>\r
  30                 <p>\r
  31                         To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard\r
  32                         JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.\r
  33                 </p>\r
  34                 <p>\r
  35                         A snippet of the configuration code can be seen below; check the source of this page for\r
  36                         full definition:\r
  37                 </p>\r
  38 <pre class="samples">\r
  39 CKEDITOR.replace( '<em>textarea_id</em>', {\r
  40         coreStyles_bold: { element: 'b' },\r
  41         coreStyles_italic: { element: 'i' },\r
  42 \r
  43         fontSize_style: {\r
  44                 element: 'font',\r
  45                 attributes: { 'size': '#(size)' }\r
  46         }\r
  47 \r
  48         ...\r
  49 });</pre>\r
  50         </div>\r
  51         <form action="../../../samples/sample_posteddata.php" method="post">\r
  52                 <p>\r
  53                         <label for="editor1">\r
  54                                 Editor 1:\r
  55                         </label>\r
  56                         <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
  57                         <script>\r
  58 \r
  59                                 CKEDITOR.replace( 'editor1', {\r
  60                                         /*\r
  61                                          * Ensure that htmlwriter plugin, which is required for this sample, is loaded.\r
  62                                          */\r
  63                                         extraPlugins: 'htmlwriter',\r
  64 \r
  65                                         /*\r
  66                                          * Style sheet for the contents\r
  67                                          */\r
  68                                         contentsCss: 'body {color:#000; background-color#:FFF;}',\r
  69 \r
  70                                         /*\r
  71                                          * Simple HTML5 doctype\r
  72                                          */\r
  73                                         docType: '<!DOCTYPE HTML>',\r
  74 \r
  75                                         /*\r
  76                                          * Core styles.\r
  77                                          */\r
  78                                         coreStyles_bold: { element: 'b' },\r
  79                                         coreStyles_italic: { element: 'i' },\r
  80                                         coreStyles_underline: { element: 'u' },\r
  81                                         coreStyles_strike: { element: 'strike' },\r
  82 \r
  83                                         /*\r
  84                                          * Font face.\r
  85                                          */\r
  86 \r
  87                                         // Define the way font elements will be applied to the document.\r
  88                                         // The "font" element will be used.\r
  89                                         font_style: {\r
  90                                                 element: 'font',\r
  91                                                 attributes: { 'face': '#(family)' }\r
  92                                         },\r
  93 \r
  94                                         /*\r
  95                                          * Font sizes.\r
  96                                          */\r
  97                                         fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',\r
  98                                         fontSize_style: {\r
  99                                                 element: 'font',\r
 100                                                 attributes: { 'size': '#(size)' }\r
 101                                         } ,\r
 102 \r
 103                                         /*\r
 104                                          * Font colors.\r
 105                                          */\r
 106                                         colorButton_enableMore: true,\r
 107 \r
 108                                         colorButton_foreStyle: {\r
 109                                                 element: 'font',\r
 110                                                 attributes: { 'color': '#(color)' }\r
 111                                         },\r
 112 \r
 113                                         colorButton_backStyle: {\r
 114                                                 element: 'font',\r
 115                                                 styles: { 'background-color': '#(color)' }\r
 116                                         },\r
 117 \r
 118                                         /*\r
 119                                          * Styles combo.\r
 120                                          */\r
 121                                         stylesSet: [\r
 122                                                 { name: 'Computer Code', element: 'code' },\r
 123                                                 { name: 'Keyboard Phrase', element: 'kbd' },\r
 124                                                 { name: 'Sample Text', element: 'samp' },\r
 125                                                 { name: 'Variable', element: 'var' },\r
 126                                                 { name: 'Deleted Text', element: 'del' },\r
 127                                                 { name: 'Inserted Text', element: 'ins' },\r
 128                                                 { name: 'Cited Work', element: 'cite' },\r
 129                                                 { name: 'Inline Quotation', element: 'q' }\r
 130                                         ],\r
 131 \r
 132                                         on: { 'instanceReady': configureHtmlOutput }\r
 133                                 });\r
 134 \r
 135                                 /*\r
 136                                  * Adjust the behavior of the dataProcessor to avoid styles\r
 137                                  * and make it look like FCKeditor HTML output.\r
 138                                  */\r
 139                                 function configureHtmlOutput( ev ) {\r
 140                                         var editor = ev.editor,\r
 141                                                 dataProcessor = editor.dataProcessor,\r
 142                                                 htmlFilter = dataProcessor && dataProcessor.htmlFilter;\r
 143 \r
 144                                         // Out self closing tags the HTML4 way, like <br>.\r
 145                                         dataProcessor.writer.selfClosingEnd = '>';\r
 146 \r
 147                                         // Make output formatting behave similar to FCKeditor\r
 148                                         var dtd = CKEDITOR.dtd;\r
 149                                         for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {\r
 150                                                 dataProcessor.writer.setRules( e, {\r
 151                                                         indent: true,\r
 152                                                         breakBeforeOpen: true,\r
 153                                                         breakAfterOpen: false,\r
 154                                                         breakBeforeClose: !dtd[ e ][ '#' ],\r
 155                                                         breakAfterClose: true\r
 156                                                 });\r
 157                                         }\r
 158 \r
 159                                         // Output properties as attributes, not styles.\r
 160                                         htmlFilter.addRules( {\r
 161                                                 elements: {\r
 162                                                         $: function( element ) {\r
 163                                                                 // Output dimensions of images as width and height\r
 164                                                                 if ( element.name == 'img' ) {\r
 165                                                                         var style = element.attributes.style;\r
 166 \r
 167                                                                         if ( style ) {\r
 168                                                                                 // Get the width from the style.\r
 169                                                                                 var match = ( /(?:^|\s)width\s*:\s*(\d+)px/i ).exec( style ),\r
 170                                                                                         width = match && match[ 1 ];\r
 171 \r
 172                                                                                 // Get the height from the style.\r
 173                                                                                 match = ( /(?:^|\s)height\s*:\s*(\d+)px/i ).exec( style );\r
 174                                                                                 var height = match && match[ 1 ];\r
 175 \r
 176                                                                                 if ( width ) {\r
 177                                                                                         element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );\r
 178                                                                                         element.attributes.width = width;\r
 179                                                                                 }\r
 180 \r
 181                                                                                 if ( height ) {\r
 182                                                                                         element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );\r
 183                                                                                         element.attributes.height = height;\r
 184                                                                                 }\r
 185                                                                         }\r
 186                                                                 }\r
 187 \r
 188                                                                 // Output alignment of paragraphs using align\r
 189                                                                 if ( element.name == 'p' ) {\r
 190                                                                         style = element.attributes.style;\r
 191 \r
 192                                                                         if ( style ) {\r
 193                                                                                 // Get the align from the style.\r
 194                                                                                 match = ( /(?:^|\s)text-align\s*:\s*(\w*);/i ).exec( style );\r
 195                                                                                 var align = match && match[ 1 ];\r
 196 \r
 197                                                                                 if ( align ) {\r
 198                                                                                         element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );\r
 199                                                                                         element.attributes.align = align;\r
 200                                                                                 }\r
 201                                                                         }\r
 202                                                                 }\r
 203 \r
 204                                                                 if ( !element.attributes.style )\r
 205                                                                         delete element.attributes.style;\r
 206 \r
 207                                                                 return element;\r
 208                                                         }\r
 209                                                 },\r
 210 \r
 211                                                 attributes: {\r
 212                                                         style: function( value, element ) {\r
 213                                                                 // Return #RGB for background and border colors\r
 214                                                                 return CKEDITOR.tools.convertRgbToHex( value );\r
 215                                                         }\r
 216                                                 }\r
 217                                         });\r
 218                                 }\r
 219 \r
 220                         </script>\r
 221                 </p>\r
 222                 <p>\r
 223                         <input type="submit" value="Submit">\r
 224                 </p>\r
 225         </form>\r
 226         <div id="footer">\r
 227                 <hr>\r
 228                 <p>\r
 229                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
 230                 </p>\r
 231                 <p id="copy">\r
 232                         Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
 233                         Knabben. All rights reserved.\r
 234                 </p>\r
 235         </div>\r
 236 </body>\r
 237 </html>\r