samples/plugins/htmlwriter/outputhtml.html

   1 <!DOCTYPE html>\r
   2 <!--\r
   3 Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.\r
   4 For licensing, see LICENSE.md or http://ckeditor.com/license\r
   5 -->\r
   6 <html>\r
   7 <head>\r
   8         <meta charset="utf-8">\r
   9         <title>HTML Compliant Output &mdash; CKEditor Sample</title>\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                                          * Allowed content rules which beside limiting allowed HTML\r
  77                                          * will also take care of transforming styles to attributes\r
  78                                          * (currently only for img - see transformation rules defined below).\r
  79                                          *\r
  80                                          * Read more: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter\r
  81                                          */\r
  82                                         allowedContent:\r
  83                                                 'h1 h2 h3 p pre[align]; ' +\r
  84                                                 'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +\r
  85                                                 'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',\r
  86 \r
  87                                         /*\r
  88                                          * Core styles.\r
  89                                          */\r
  90                                         coreStyles_bold: { element: 'b' },\r
  91                                         coreStyles_italic: { element: 'i' },\r
  92                                         coreStyles_underline: { element: 'u' },\r
  93                                         coreStyles_strike: { element: 'strike' },\r
  94 \r
  95                                         /*\r
  96                                          * Font face.\r
  97                                          */\r
  98 \r
  99                                         // Define the way font elements will be applied to the document.\r
 100                                         // The "font" element will be used.\r
 101                                         font_style: {\r
 102                                                 element: 'font',\r
 103                                                 attributes: { 'face': '#(family)' }\r
 104                                         },\r
 105 \r
 106                                         /*\r
 107                                          * Font sizes.\r
 108                                          */\r
 109                                         fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',\r
 110                                         fontSize_style: {\r
 111                                                 element: 'font',\r
 112                                                 attributes: { 'size': '#(size)' }\r
 113                                         },\r
 114 \r
 115                                         /*\r
 116                                          * Font colors.\r
 117                                          */\r
 118 \r
 119                                         colorButton_foreStyle: {\r
 120                                                 element: 'font',\r
 121                                                 attributes: { 'color': '#(color)' }\r
 122                                         },\r
 123 \r
 124                                         colorButton_backStyle: {\r
 125                                                 element: 'font',\r
 126                                                 styles: { 'background-color': '#(color)' }\r
 127                                         },\r
 128 \r
 129                                         /*\r
 130                                          * Styles combo.\r
 131                                          */\r
 132                                         stylesSet: [\r
 133                                                 { name: 'Computer Code', element: 'code' },\r
 134                                                 { name: 'Keyboard Phrase', element: 'kbd' },\r
 135                                                 { name: 'Sample Text', element: 'samp' },\r
 136                                                 { name: 'Variable', element: 'var' },\r
 137                                                 { name: 'Deleted Text', element: 'del' },\r
 138                                                 { name: 'Inserted Text', element: 'ins' },\r
 139                                                 { name: 'Cited Work', element: 'cite' },\r
 140                                                 { name: 'Inline Quotation', element: 'q' }\r
 141                                         ],\r
 142 \r
 143                                         on: {\r
 144                                                 pluginsLoaded: configureTransformations,\r
 145                                                 loaded: configureHtmlWriter\r
 146                                         }\r
 147                                 });\r
 148 \r
 149                                 /*\r
 150                                  * Add missing content transformations.\r
 151                                  */\r
 152                                 function configureTransformations( evt ) {\r
 153                                         var editor = evt.editor;\r
 154 \r
 155                                         editor.dataProcessor.htmlFilter.addRules( {\r
 156                                                 attributes: {\r
 157                                                         style: function( value, element ) {\r
 158                                                                 // Return #RGB for background and border colors\r
 159                                                                 return CKEDITOR.tools.convertRgbToHex( value );\r
 160                                                         }\r
 161                                                 }\r
 162                                         } );\r
 163 \r
 164                                         // Default automatic content transformations do not yet take care of\r
 165                                         // align attributes on blocks, so we need to add our own transformation rules.\r
 166                                         function alignToAttribute( element ) {\r
 167                                                 if ( element.styles[ 'text-align' ] ) {\r
 168                                                         element.attributes.align = element.styles[ 'text-align' ];\r
 169                                                         delete element.styles[ 'text-align' ];\r
 170                                                 }\r
 171                                         }\r
 172                                         editor.filter.addTransformations( [\r
 173                                                 [ { element: 'p',       right: alignToAttribute } ],\r
 174                                                 [ { element: 'h1',      right: alignToAttribute } ],\r
 175                                                 [ { element: 'h2',      right: alignToAttribute } ],\r
 176                                                 [ { element: 'h3',      right: alignToAttribute } ],\r
 177                                                 [ { element: 'pre',     right: alignToAttribute } ]\r
 178                                         ] );\r
 179                                 }\r
 180 \r
 181                                 /*\r
 182                                  * Adjust the behavior of htmlWriter to make it output HTML like FCKeditor.\r
 183                                  */\r
 184                                 function configureHtmlWriter( evt ) {\r
 185                                         var editor = evt.editor,\r
 186                                                 dataProcessor = editor.dataProcessor;\r
 187 \r
 188                                         // Out self closing tags the HTML4 way, like <br>.\r
 189                                         dataProcessor.writer.selfClosingEnd = '>';\r
 190 \r
 191                                         // Make output formatting behave similar to FCKeditor.\r
 192                                         var dtd = CKEDITOR.dtd;\r
 193                                         for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {\r
 194                                                 dataProcessor.writer.setRules( e, {\r
 195                                                         indent: true,\r
 196                                                         breakBeforeOpen: true,\r
 197                                                         breakAfterOpen: false,\r
 198                                                         breakBeforeClose: !dtd[ e ][ '#' ],\r
 199                                                         breakAfterClose: true\r
 200                                                 });\r
 201                                         }\r
 202                                 }\r
 203 \r
 204                         </script>\r
 205                 </p>\r
 206                 <p>\r
 207                         <input type="submit" value="Submit">\r
 208                 </p>\r
 209         </form>\r
 210         <div id="footer">\r
 211                 <hr>\r
 212                 <p>\r
 213                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
 214                 </p>\r
 215                 <p id="copy">\r
 216                         Copyright &copy; 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
 217                         Knabben. All rights reserved.\r
 218                 </p>\r
 219         </div>\r
 220 </body>\r
 221 </html>\r