skins/ckeditor/samples/plugins/htmlwriter/outputhtml.html

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