httemplate/elements/ckeditor/samples/old/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/old/sample.js"></script>\r
  12         <link href="../../../samples/old/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/old/index.html">CKEditor Samples</a> &raquo; Producing HTML Compliant Output\r
  21         </h1>\r
  22         <div class="warning deprecated">\r
  23                 This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.\r
  24         </div>\r
  25         <div class="description">\r
  26                 <p>\r
  27                         This sample shows how to configure CKEditor to output valid\r
  28                         <a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.\r
  29                         Traditional HTML elements like <code>&lt;b&gt;</code>,\r
  30                         <code>&lt;i&gt;</code>, and <code>&lt;font&gt;</code> are used in place of\r
  31                         <code>&lt;strong&gt;</code>, <code>&lt;em&gt;</code>, and CSS styles.\r
  32                 </p>\r
  33                 <p>\r
  34                         To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard\r
  35                         JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.\r
  36                 </p>\r
  37                 <p>\r
  38                         A snippet of the configuration code can be seen below; check the source of this page for\r
  39                         full definition:\r
  40                 </p>\r
  41 <pre class="samples">\r
  42 CKEDITOR.replace( '<em>textarea_id</em>', {\r
  43         coreStyles_bold: { element: 'b' },\r
  44         coreStyles_italic: { element: 'i' },\r
  45 \r
  46         fontSize_style: {\r
  47                 element: 'font',\r
  48                 attributes: { 'size': '#(size)' }\r
  49         }\r
  50 \r
  51         ...\r
  52 });</pre>\r
  53         </div>\r
  54         <form action="../../../samples/sample_posteddata.php" method="post">\r
  55                 <p>\r
  56                         <label for="editor1">\r
  57                                 Editor 1:\r
  58                         </label>\r
  59                         <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
  60                         <script>\r
  61 \r
  62                                 CKEDITOR.replace( 'editor1', {\r
  63                                         /*\r
  64                                          * Ensure that htmlwriter plugin, which is required for this sample, is loaded.\r
  65                                          */\r
  66                                         extraPlugins: 'htmlwriter',\r
  67 \r
  68                                         /*\r
  69                                          * Style sheet for the contents\r
  70                                          */\r
  71                                         contentsCss: 'body {color:#000; background-color#:FFF;}',\r
  72 \r
  73                                         /*\r
  74                                          * Simple HTML5 doctype\r
  75                                          */\r
  76                                         docType: '<!DOCTYPE HTML>',\r
  77 \r
  78                                         /*\r
  79                                          * Allowed content rules which beside limiting allowed HTML\r
  80                                          * will also take care of transforming styles to attributes\r
  81                                          * (currently only for img - see transformation rules defined below).\r
  82                                          *\r
  83                                          * Read more: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter\r
  84                                          */\r
  85                                         allowedContent:\r
  86                                                 'h1 h2 h3 p pre[align]; ' +\r
  87                                                 'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +\r
  88                                                 'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',\r
  89 \r
  90                                         /*\r
  91                                          * Core styles.\r
  92                                          */\r
  93                                         coreStyles_bold: { element: 'b' },\r
  94                                         coreStyles_italic: { element: 'i' },\r
  95                                         coreStyles_underline: { element: 'u' },\r
  96                                         coreStyles_strike: { element: 'strike' },\r
  97 \r
  98                                         /*\r
  99                                          * Font face.\r
 100                                          */\r
 101 \r
 102                                         // Define the way font elements will be applied to the document.\r
 103                                         // The "font" element will be used.\r
 104                                         font_style: {\r
 105                                                 element: 'font',\r
 106                                                 attributes: { 'face': '#(family)' }\r
 107                                         },\r
 108 \r
 109                                         /*\r
 110                                          * Font sizes.\r
 111                                          */\r
 112                                         fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',\r
 113                                         fontSize_style: {\r
 114                                                 element: 'font',\r
 115                                                 attributes: { 'size': '#(size)' }\r
 116                                         },\r
 117 \r
 118                                         /*\r
 119                                          * Font colors.\r
 120                                          */\r
 121 \r
 122                                         colorButton_foreStyle: {\r
 123                                                 element: 'font',\r
 124                                                 attributes: { 'color': '#(color)' }\r
 125                                         },\r
 126 \r
 127                                         colorButton_backStyle: {\r
 128                                                 element: 'font',\r
 129                                                 styles: { 'background-color': '#(color)' }\r
 130                                         },\r
 131 \r
 132                                         /*\r
 133                                          * Styles combo.\r
 134                                          */\r
 135                                         stylesSet: [\r
 136                                                 { name: 'Computer Code', element: 'code' },\r
 137                                                 { name: 'Keyboard Phrase', element: 'kbd' },\r
 138                                                 { name: 'Sample Text', element: 'samp' },\r
 139                                                 { name: 'Variable', element: 'var' },\r
 140                                                 { name: 'Deleted Text', element: 'del' },\r
 141                                                 { name: 'Inserted Text', element: 'ins' },\r
 142                                                 { name: 'Cited Work', element: 'cite' },\r
 143                                                 { name: 'Inline Quotation', element: 'q' }\r
 144                                         ],\r
 145 \r
 146                                         on: {\r
 147                                                 pluginsLoaded: configureTransformations,\r
 148                                                 loaded: configureHtmlWriter\r
 149                                         }\r
 150                                 });\r
 151 \r
 152                                 /*\r
 153                                  * Add missing content transformations.\r
 154                                  */\r
 155                                 function configureTransformations( evt ) {\r
 156                                         var editor = evt.editor;\r
 157 \r
 158                                         editor.dataProcessor.htmlFilter.addRules( {\r
 159                                                 attributes: {\r
 160                                                         style: function( value, element ) {\r
 161                                                                 // Return #RGB for background and border colors\r
 162                                                                 return CKEDITOR.tools.convertRgbToHex( value );\r
 163                                                         }\r
 164                                                 }\r
 165                                         } );\r
 166 \r
 167                                         // Default automatic content transformations do not yet take care of\r
 168                                         // align attributes on blocks, so we need to add our own transformation rules.\r
 169                                         function alignToAttribute( element ) {\r
 170                                                 if ( element.styles[ 'text-align' ] ) {\r
 171                                                         element.attributes.align = element.styles[ 'text-align' ];\r
 172                                                         delete element.styles[ 'text-align' ];\r
 173                                                 }\r
 174                                         }\r
 175                                         editor.filter.addTransformations( [\r
 176                                                 [ { element: 'p',       right: alignToAttribute } ],\r
 177                                                 [ { element: 'h1',      right: alignToAttribute } ],\r
 178                                                 [ { element: 'h2',      right: alignToAttribute } ],\r
 179                                                 [ { element: 'h3',      right: alignToAttribute } ],\r
 180                                                 [ { element: 'pre',     right: alignToAttribute } ]\r
 181                                         ] );\r
 182                                 }\r
 183 \r
 184                                 /*\r
 185                                  * Adjust the behavior of htmlWriter to make it output HTML like FCKeditor.\r
 186                                  */\r
 187                                 function configureHtmlWriter( evt ) {\r
 188                                         var editor = evt.editor,\r
 189                                                 dataProcessor = editor.dataProcessor;\r
 190 \r
 191                                         // Out self closing tags the HTML4 way, like <br>.\r
 192                                         dataProcessor.writer.selfClosingEnd = '>';\r
 193 \r
 194                                         // Make output formatting behave similar to FCKeditor.\r
 195                                         var dtd = CKEDITOR.dtd;\r
 196                                         for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {\r
 197                                                 dataProcessor.writer.setRules( e, {\r
 198                                                         indent: true,\r
 199                                                         breakBeforeOpen: true,\r
 200                                                         breakAfterOpen: false,\r
 201                                                         breakBeforeClose: !dtd[ e ][ '#' ],\r
 202                                                         breakAfterClose: true\r
 203                                                 });\r
 204                                         }\r
 205                                 }\r
 206 \r
 207                         </script>\r
 208                 </p>\r
 209                 <p>\r
 210                         <input type="submit" value="Submit">\r
 211                 </p>\r
 212         </form>\r
 213         <div id="footer">\r
 214                 <hr>\r
 215                 <p>\r
 216                         CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>\r
 217                 </p>\r
 218                 <p id="copy">\r
 219                         Copyright &copy; 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico\r
 220                         Knabben. All rights reserved.\r
 221                 </p>\r
 222         </div>\r
 223 </body>\r
 224 </html>\r