1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/ckeditor/samples/old/htmlwriter/outputhtml.html Thu Dec 15 18:10:20 2016 +0300
1.3 @@ -0,0 +1,224 @@
1.4 +<!DOCTYPE html>
1.5 +<!--
1.6 +Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
1.7 +For licensing, see LICENSE.md or http://ckeditor.com/license
1.8 +-->
1.9 +<html>
1.10 +<head>
1.11 + <meta charset="utf-8">
1.12 + <title>HTML Compliant Output — CKEditor Sample</title>
1.13 + <script src="../../../ckeditor.js"></script>
1.14 + <script src="../../../samples/old/sample.js"></script>
1.15 + <link href="../../../samples/old/sample.css" rel="stylesheet">
1.16 + <meta name="ckeditor-sample-required-plugins" content="sourcearea">
1.17 + <meta name="ckeditor-sample-name" content="Output HTML">
1.18 + <meta name="ckeditor-sample-group" content="Advanced Samples">
1.19 + <meta name="ckeditor-sample-description" content="Configuring CKEditor to produce legacy HTML 4 code.">
1.20 +</head>
1.21 +<body>
1.22 + <h1 class="samples">
1.23 + <a href="../../../samples/old/index.html">CKEditor Samples</a> » Producing HTML Compliant Output
1.24 + </h1>
1.25 + <div class="warning deprecated">
1.26 + This sample is not maintained anymore. Check out the <a href="http://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>.
1.27 + </div>
1.28 + <div class="description">
1.29 + <p>
1.30 + This sample shows how to configure CKEditor to output valid
1.31 + <a class="samples" href="http://www.w3.org/TR/html401/">HTML 4.01</a> code.
1.32 + Traditional HTML elements like <code><b></code>,
1.33 + <code><i></code>, and <code><font></code> are used in place of
1.34 + <code><strong></code>, <code><em></code>, and CSS styles.
1.35 + </p>
1.36 + <p>
1.37 + To add a CKEditor instance outputting legacy HTML 4.01 code, load the editor using a standard
1.38 + JavaScript call, and define CKEditor features to use the HTML compliant elements and attributes.
1.39 + </p>
1.40 + <p>
1.41 + A snippet of the configuration code can be seen below; check the source of this page for
1.42 + full definition:
1.43 + </p>
1.44 +<pre class="samples">
1.45 +CKEDITOR.replace( '<em>textarea_id</em>', {
1.46 + coreStyles_bold: { element: 'b' },
1.47 + coreStyles_italic: { element: 'i' },
1.48 +
1.49 + fontSize_style: {
1.50 + element: 'font',
1.51 + attributes: { 'size': '#(size)' }
1.52 + }
1.53 +
1.54 + ...
1.55 +});</pre>
1.56 + </div>
1.57 + <form action="../../../samples/sample_posteddata.php" method="post">
1.58 + <p>
1.59 + <label for="editor1">
1.60 + Editor 1:
1.61 + </label>
1.62 + <textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <b>sample text</b>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
1.63 + <script>
1.64 +
1.65 + CKEDITOR.replace( 'editor1', {
1.66 + /*
1.67 + * Ensure that htmlwriter plugin, which is required for this sample, is loaded.
1.68 + */
1.69 + extraPlugins: 'htmlwriter',
1.70 +
1.71 + /*
1.72 + * Style sheet for the contents
1.73 + */
1.74 + contentsCss: 'body {color:#000; background-color#:FFF;}',
1.75 +
1.76 + /*
1.77 + * Simple HTML5 doctype
1.78 + */
1.79 + docType: '<!DOCTYPE HTML>',
1.80 +
1.81 + /*
1.82 + * Allowed content rules which beside limiting allowed HTML
1.83 + * will also take care of transforming styles to attributes
1.84 + * (currently only for img - see transformation rules defined below).
1.85 + *
1.86 + * Read more: http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
1.87 + */
1.88 + allowedContent:
1.89 + 'h1 h2 h3 p pre[align]; ' +
1.90 + 'blockquote code kbd samp var del ins cite q b i u strike ul ol li hr table tbody tr td th caption; ' +
1.91 + 'img[!src,alt,align,width,height]; font[!face]; font[!family]; font[!color]; font[!size]; font{!background-color}; a[!href]; a[!name]',
1.92 +
1.93 + /*
1.94 + * Core styles.
1.95 + */
1.96 + coreStyles_bold: { element: 'b' },
1.97 + coreStyles_italic: { element: 'i' },
1.98 + coreStyles_underline: { element: 'u' },
1.99 + coreStyles_strike: { element: 'strike' },
1.100 +
1.101 + /*
1.102 + * Font face.
1.103 + */
1.104 +
1.105 + // Define the way font elements will be applied to the document.
1.106 + // The "font" element will be used.
1.107 + font_style: {
1.108 + element: 'font',
1.109 + attributes: { 'face': '#(family)' }
1.110 + },
1.111 +
1.112 + /*
1.113 + * Font sizes.
1.114 + */
1.115 + fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
1.116 + fontSize_style: {
1.117 + element: 'font',
1.118 + attributes: { 'size': '#(size)' }
1.119 + },
1.120 +
1.121 + /*
1.122 + * Font colors.
1.123 + */
1.124 +
1.125 + colorButton_foreStyle: {
1.126 + element: 'font',
1.127 + attributes: { 'color': '#(color)' }
1.128 + },
1.129 +
1.130 + colorButton_backStyle: {
1.131 + element: 'font',
1.132 + styles: { 'background-color': '#(color)' }
1.133 + },
1.134 +
1.135 + /*
1.136 + * Styles combo.
1.137 + */
1.138 + stylesSet: [
1.139 + { name: 'Computer Code', element: 'code' },
1.140 + { name: 'Keyboard Phrase', element: 'kbd' },
1.141 + { name: 'Sample Text', element: 'samp' },
1.142 + { name: 'Variable', element: 'var' },
1.143 + { name: 'Deleted Text', element: 'del' },
1.144 + { name: 'Inserted Text', element: 'ins' },
1.145 + { name: 'Cited Work', element: 'cite' },
1.146 + { name: 'Inline Quotation', element: 'q' }
1.147 + ],
1.148 +
1.149 + on: {
1.150 + pluginsLoaded: configureTransformations,
1.151 + loaded: configureHtmlWriter
1.152 + }
1.153 + });
1.154 +
1.155 + /*
1.156 + * Add missing content transformations.
1.157 + */
1.158 + function configureTransformations( evt ) {
1.159 + var editor = evt.editor;
1.160 +
1.161 + editor.dataProcessor.htmlFilter.addRules( {
1.162 + attributes: {
1.163 + style: function( value, element ) {
1.164 + // Return #RGB for background and border colors
1.165 + return CKEDITOR.tools.convertRgbToHex( value );
1.166 + }
1.167 + }
1.168 + } );
1.169 +
1.170 + // Default automatic content transformations do not yet take care of
1.171 + // align attributes on blocks, so we need to add our own transformation rules.
1.172 + function alignToAttribute( element ) {
1.173 + if ( element.styles[ 'text-align' ] ) {
1.174 + element.attributes.align = element.styles[ 'text-align' ];
1.175 + delete element.styles[ 'text-align' ];
1.176 + }
1.177 + }
1.178 + editor.filter.addTransformations( [
1.179 + [ { element: 'p', right: alignToAttribute } ],
1.180 + [ { element: 'h1', right: alignToAttribute } ],
1.181 + [ { element: 'h2', right: alignToAttribute } ],
1.182 + [ { element: 'h3', right: alignToAttribute } ],
1.183 + [ { element: 'pre', right: alignToAttribute } ]
1.184 + ] );
1.185 + }
1.186 +
1.187 + /*
1.188 + * Adjust the behavior of htmlWriter to make it output HTML like FCKeditor.
1.189 + */
1.190 + function configureHtmlWriter( evt ) {
1.191 + var editor = evt.editor,
1.192 + dataProcessor = editor.dataProcessor;
1.193 +
1.194 + // Out self closing tags the HTML4 way, like <br>.
1.195 + dataProcessor.writer.selfClosingEnd = '>';
1.196 +
1.197 + // Make output formatting behave similar to FCKeditor.
1.198 + var dtd = CKEDITOR.dtd;
1.199 + for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
1.200 + dataProcessor.writer.setRules( e, {
1.201 + indent: true,
1.202 + breakBeforeOpen: true,
1.203 + breakAfterOpen: false,
1.204 + breakBeforeClose: !dtd[ e ][ '#' ],
1.205 + breakAfterClose: true
1.206 + });
1.207 + }
1.208 + }
1.209 +
1.210 + </script>
1.211 + </p>
1.212 + <p>
1.213 + <input type="submit" value="Submit">
1.214 + </p>
1.215 + </form>
1.216 + <div id="footer">
1.217 + <hr>
1.218 + <p>
1.219 + CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
1.220 + </p>
1.221 + <p id="copy">
1.222 + Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
1.223 + Knabben. All rights reserved.
1.224 + </p>
1.225 + </div>
1.226 +</body>
1.227 +</html>