sources/plugins/htmlwriter/samples/outputhtml.html

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