root / drupal7 / sites / all / libraries / ckeditor-4.9.2-full / samples / old / htmlwriter / outputhtml.html @ b986a83e
1 | 85ad3d82 | Assos Assos | <!DOCTYPE html>
|
---|---|---|---|
2 | <!--
|
||
3 | b986a83e | Florent Torregrosa | Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
|
4 | For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
||
5 | 85ad3d82 | Assos Assos | -->
|
6 | <html>
|
||
7 | <head>
|
||
8 | <meta charset="utf-8"> |
||
9 | d69c481e | Florent Torregrosa | <title>HTML Compliant Output — CKEditor Sample</title> |
10 | 85ad3d82 | Assos Assos | <script src="../../../ckeditor.js"></script> |
11 | 0aee3c58 | Assos Assos | <script src="../../../samples/old/sample.js"></script> |
12 | <link href="../../../samples/old/sample.css" rel="stylesheet"> |
||
13 | 85ad3d82 | Assos Assos | <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 | 0aee3c58 | Assos Assos | <a href="../../../samples/old/index.html">CKEditor Samples</a> » Producing HTML Compliant Output |
21 | 85ad3d82 | Assos Assos | </h1>
|
22 | 0aee3c58 | Assos Assos | <div class="warning deprecated"> |
23 | b986a83e | Florent Torregrosa | This sample is not maintained anymore. Check out the <a href="https://sdk.ckeditor.com/">brand new samples in CKEditor SDK</a>. |
24 | 0aee3c58 | Assos Assos | </div>
|
25 | 85ad3d82 | Assos Assos | <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><b></code>, |
||
30 | <code><i></code>, and <code><font></code> are used in place of |
||
31 | <code><strong></code>, <code><em></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 | b986a83e | Florent Torregrosa | <textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <b>sample text</b>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></textarea> |
60 | 85ad3d82 | Assos Assos | <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 | b986a83e | Florent Torregrosa | * Read more: https://docs.ckeditor.com/ckeditor4/docs/#!/guide/dev_advanced_content_filter
|
84 | 85ad3d82 | Assos Assos | */
|
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 | b986a83e | Florent Torregrosa | CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a> |
217 | 85ad3d82 | Assos Assos | </p>
|
218 | <p id="copy"> |
||
219 | b986a83e | Florent Torregrosa | Copyright © 2003-2018, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico |
220 | 85ad3d82 | Assos Assos | Knabben. All rights reserved. |
221 | </p>
|
||
222 | </div>
|
||
223 | </body>
|
||
224 | </html>
|