1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/ckeditor/samples/old/xhtmlstyle.html Thu Dec 15 18:10:20 2016 +0300
1.3 @@ -0,0 +1,234 @@
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>XHTML Compliant Output — CKEditor Sample</title>
1.13 + <meta name="ckeditor-sample-required-plugins" content="sourcearea">
1.14 + <script src="../../ckeditor.js"></script>
1.15 + <script src="sample.js"></script>
1.16 + <link href="sample.css" rel="stylesheet">
1.17 +</head>
1.18 +<body>
1.19 + <h1 class="samples">
1.20 + <a href="index.html">CKEditor Samples</a> » Producing XHTML Compliant Output
1.21 + </h1>
1.22 + <div class="warning deprecated">
1.23 + This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/basicstyles.html">brand new version in CKEditor SDK</a>.
1.24 + </div>
1.25 + <div class="description">
1.26 + <p>
1.27 + This sample shows how to configure CKEditor to output valid
1.28 + <a class="samples" href="http://www.w3.org/TR/xhtml11/">XHTML 1.1</a> code.
1.29 + Deprecated elements (<code><font></code>, <code><u></code>) or attributes
1.30 + (<code>size</code>, <code>face</code>) will be replaced with XHTML compliant code.
1.31 + </p>
1.32 + <p>
1.33 + To add a CKEditor instance outputting valid XHTML code, load the editor using a standard
1.34 + JavaScript call and define CKEditor features to use the XHTML compliant elements and styles.
1.35 + </p>
1.36 + <p>
1.37 + A snippet of the configuration code can be seen below; check the source of this page for
1.38 + full definition:
1.39 + </p>
1.40 +<pre class="samples">
1.41 +CKEDITOR.replace( '<em>textarea_id</em>', {
1.42 + contentsCss: 'assets/outputxhtml.css',
1.43 +
1.44 + coreStyles_bold: {
1.45 + element: 'span',
1.46 + attributes: { 'class': 'Bold' }
1.47 + },
1.48 + coreStyles_italic: {
1.49 + element: 'span',
1.50 + attributes: { 'class': 'Italic' }
1.51 + },
1.52 +
1.53 + ...
1.54 +});</pre>
1.55 + </div>
1.56 + <form action="sample_posteddata.php" method="post">
1.57 + <p>
1.58 + <label for="editor1">
1.59 + Editor 1:
1.60 + </label>
1.61 + <textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <span class="Bold">sample text</span>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
1.62 + <script>
1.63 +
1.64 + CKEDITOR.replace( 'editor1', {
1.65 + /*
1.66 + * Style sheet for the contents
1.67 + */
1.68 + contentsCss: 'assets/outputxhtml/outputxhtml.css',
1.69 +
1.70 + /*
1.71 + * Special allowed content rules for spans used by
1.72 + * font face, size, and color buttons.
1.73 + *
1.74 + * Note: all rules have been written separately so
1.75 + * it was possible to specify required classes.
1.76 + */
1.77 + extraAllowedContent: 'span(!FontColor1);span(!FontColor2);span(!FontColor3);' +
1.78 + 'span(!FontColor1BG);span(!FontColor2BG);span(!FontColor3BG);' +
1.79 + 'span(!FontComic);span(!FontCourier);span(!FontTimes);' +
1.80 + 'span(!FontSmaller);span(!FontLarger);span(!FontSmall);span(!FontBig);span(!FontDouble)',
1.81 +
1.82 + /*
1.83 + * Core styles.
1.84 + */
1.85 + coreStyles_bold: {
1.86 + element: 'span',
1.87 + attributes: { 'class': 'Bold' }
1.88 + },
1.89 + coreStyles_italic: {
1.90 + element: 'span',
1.91 + attributes: { 'class': 'Italic' }
1.92 + },
1.93 + coreStyles_underline: {
1.94 + element: 'span',
1.95 + attributes: { 'class': 'Underline' }
1.96 + },
1.97 + coreStyles_strike: {
1.98 + element: 'span',
1.99 + attributes: { 'class': 'StrikeThrough' },
1.100 + overrides: 'strike'
1.101 + },
1.102 + coreStyles_subscript: {
1.103 + element: 'span',
1.104 + attributes: { 'class': 'Subscript' },
1.105 + overrides: 'sub'
1.106 + },
1.107 + coreStyles_superscript: {
1.108 + element: 'span',
1.109 + attributes: { 'class': 'Superscript' },
1.110 + overrides: 'sup'
1.111 + },
1.112 +
1.113 + /*
1.114 + * Font face.
1.115 + */
1.116 +
1.117 + // List of fonts available in the toolbar combo. Each font definition is
1.118 + // separated by a semi-colon (;). We are using class names here, so each font
1.119 + // is defined by {Combo Label}/{Class Name}.
1.120 + font_names: 'Comic Sans MS/FontComic;Courier New/FontCourier;Times New Roman/FontTimes',
1.121 +
1.122 + // Define the way font elements will be applied to the document. The "span"
1.123 + // element will be used. When a font is selected, the font name defined in the
1.124 + // above list is passed to this definition with the name "Font", being it
1.125 + // injected in the "class" attribute.
1.126 + // We must also instruct the editor to replace span elements that are used to
1.127 + // set the font (Overrides).
1.128 + font_style: {
1.129 + element: 'span',
1.130 + attributes: { 'class': '#(family)' },
1.131 + overrides: [
1.132 + {
1.133 + element: 'span',
1.134 + attributes: {
1.135 + 'class': /^Font(?:Comic|Courier|Times)$/
1.136 + }
1.137 + }
1.138 + ]
1.139 + },
1.140 +
1.141 + /*
1.142 + * Font sizes.
1.143 + */
1.144 + fontSize_sizes: 'Smaller/FontSmaller;Larger/FontLarger;8pt/FontSmall;14pt/FontBig;Double Size/FontDouble',
1.145 + fontSize_style: {
1.146 + element: 'span',
1.147 + attributes: { 'class': '#(size)' },
1.148 + overrides: [
1.149 + {
1.150 + element: 'span',
1.151 + attributes: {
1.152 + 'class': /^Font(?:Smaller|Larger|Small|Big|Double)$/
1.153 + }
1.154 + }
1.155 + ]
1.156 + } ,
1.157 +
1.158 + /*
1.159 + * Font colors.
1.160 + */
1.161 + colorButton_enableMore: false,
1.162 +
1.163 + colorButton_colors: 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00',
1.164 + colorButton_foreStyle: {
1.165 + element: 'span',
1.166 + attributes: { 'class': '#(color)' },
1.167 + overrides: [
1.168 + {
1.169 + element: 'span',
1.170 + attributes: {
1.171 + 'class': /^FontColor(?:1|2|3)$/
1.172 + }
1.173 + }
1.174 + ]
1.175 + },
1.176 +
1.177 + colorButton_backStyle: {
1.178 + element: 'span',
1.179 + attributes: { 'class': '#(color)BG' },
1.180 + overrides: [
1.181 + {
1.182 + element: 'span',
1.183 + attributes: {
1.184 + 'class': /^FontColor(?:1|2|3)BG$/
1.185 + }
1.186 + }
1.187 + ]
1.188 + },
1.189 +
1.190 + /*
1.191 + * Indentation.
1.192 + */
1.193 + indentClasses: [ 'Indent1', 'Indent2', 'Indent3' ],
1.194 +
1.195 + /*
1.196 + * Paragraph justification.
1.197 + */
1.198 + justifyClasses: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull' ],
1.199 +
1.200 + /*
1.201 + * Styles combo.
1.202 + */
1.203 + stylesSet: [
1.204 + { name: 'Strong Emphasis', element: 'strong' },
1.205 + { name: 'Emphasis', element: 'em' },
1.206 +
1.207 + { name: 'Computer Code', element: 'code' },
1.208 + { name: 'Keyboard Phrase', element: 'kbd' },
1.209 + { name: 'Sample Text', element: 'samp' },
1.210 + { name: 'Variable', element: 'var' },
1.211 +
1.212 + { name: 'Deleted Text', element: 'del' },
1.213 + { name: 'Inserted Text', element: 'ins' },
1.214 +
1.215 + { name: 'Cited Work', element: 'cite' },
1.216 + { name: 'Inline Quotation', element: 'q' }
1.217 + ]
1.218 + });
1.219 +
1.220 + </script>
1.221 + </p>
1.222 + <p>
1.223 + <input type="submit" value="Submit">
1.224 + </p>
1.225 + </form>
1.226 + <div id="footer">
1.227 + <hr>
1.228 + <p>
1.229 + CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
1.230 + </p>
1.231 + <p id="copy">
1.232 + Copyright © 2003-2016, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
1.233 + Knabben. All rights reserved.
1.234 + </p>
1.235 + </div>
1.236 +</body>
1.237 +</html>