Subversion-Projekte lars-tiefland.cienc

Revision

Details | Letzte Änderung | Log anzeigen | RSS feed

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