root / drupal7 / sites / all / libraries / ckeditor-4.4.7-full / samples / plugins / htmlwriter / outputhtml.html @ d69c481e
1 | 85ad3d82 | Assos Assos | <!DOCTYPE html>
|
---|---|---|---|
2 | <!--
|
||
3 | d69c481e | Florent Torregrosa | Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
|
4 | 85ad3d82 | Assos Assos | For licensing, see LICENSE.md or http://ckeditor.com/license
|
5 | -->
|
||
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 | <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> » 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><b></code>, |
||
27 | <code><i></code>, and <code><font></code> are used in place of |
||
28 | <code><strong></code>, <code><em></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"><p>This is some <b>sample text</b>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></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 | d69c481e | Florent Torregrosa | Copyright © 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico |
217 | 85ad3d82 | Assos Assos | Knabben. All rights reserved. |
218 | </p>
|
||
219 | </div>
|
||
220 | </body>
|
||
221 | </html>
|