← Back to branch summary

~therp-nl/web-addons/6.1-web_print_from_browser-hide_kanban_controls

« back to all changes in this revision

Viewing changes to web_ckeditor4/static/lib/ckeditor/samples/plugins/htmlwriter/outputhtml.html

  • Committer: Stefan Rijnhart
  • Author(s): hbrunn at therp
  • Date: 2013-05-29 22:55:12 UTC
  • mfrom: (11.1.10 web-ckeditor4)
  • Revision ID: stefan@therp.nl-20130529225512-jwz5q1jej6lozmcn
[ADD] web_ckeditor

Show diffs side-by-side

added added

removed removed

Lines of Context:
web_ckeditor4/static/lib/ckeditor/samples/plugins/htmlwriter/outputhtml.html
 
1
<!DOCTYPE html>
 
2
<!--
 
3
Copyright (c) 2003-2013, CKSource - Frederico Knabben. All rights reserved.
 
4
For licensing, see LICENSE.html or http://ckeditor.com/license
 
5
-->
 
6
<html>
 
7
<head>
 
8
        <title>HTML Compliant Output &mdash; CKEditor Sample</title>
 
9
        <meta charset="utf-8">
 
10
        <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> &raquo; 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>&lt;b&gt;</code>,
 
27
                        <code>&lt;i&gt;</code>, and <code>&lt;font&gt;</code> are used in place of
 
28
                        <code>&lt;strong&gt;</code>, <code>&lt;em&gt;</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">&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>
 
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
                                         * Core styles.
 
77
                                         */
 
78
                                        coreStyles_bold: { element: 'b' },
 
79
                                        coreStyles_italic: { element: 'i' },
 
80
                                        coreStyles_underline: { element: 'u' },
 
81
                                        coreStyles_strike: { element: 'strike' },
 
82
 
 
83
                                        /*
 
84
                                         * Font face.
 
85
                                         */
 
86
 
 
87
                                        // Define the way font elements will be applied to the document.
 
88
                                        // The "font" element will be used.
 
89
                                        font_style: {
 
90
                                                element: 'font',
 
91
                                                attributes: { 'face': '#(family)' }
 
92
                                        },
 
93
 
 
94
                                        /*
 
95
                                         * Font sizes.
 
96
                                         */
 
97
                                        fontSize_sizes: 'xx-small/1;x-small/2;small/3;medium/4;large/5;x-large/6;xx-large/7',
 
98
                                        fontSize_style: {
 
99
                                                element: 'font',
 
100
                                                attributes: { 'size': '#(size)' }
 
101
                                        } ,
 
102
 
 
103
                                        /*
 
104
                                         * Font colors.
 
105
                                         */
 
106
                                        colorButton_enableMore: true,
 
107
 
 
108
                                        colorButton_foreStyle: {
 
109
                                                element: 'font',
 
110
                                                attributes: { 'color': '#(color)' }
 
111
                                        },
 
112
 
 
113
                                        colorButton_backStyle: {
 
114
                                                element: 'font',
 
115
                                                styles: { 'background-color': '#(color)' }
 
116
                                        },
 
117
 
 
118
                                        /*
 
119
                                         * Styles combo.
 
120
                                         */
 
121
                                        stylesSet: [
 
122
                                                { name: 'Computer Code', element: 'code' },
 
123
                                                { name: 'Keyboard Phrase', element: 'kbd' },
 
124
                                                { name: 'Sample Text', element: 'samp' },
 
125
                                                { name: 'Variable', element: 'var' },
 
126
                                                { name: 'Deleted Text', element: 'del' },
 
127
                                                { name: 'Inserted Text', element: 'ins' },
 
128
                                                { name: 'Cited Work', element: 'cite' },
 
129
                                                { name: 'Inline Quotation', element: 'q' }
 
130
                                        ],
 
131
 
 
132
                                        on: { 'instanceReady': configureHtmlOutput }
 
133
                                });
 
134
 
 
135
                                /*
 
136
                                 * Adjust the behavior of the dataProcessor to avoid styles
 
137
                                 * and make it look like FCKeditor HTML output.
 
138
                                 */
 
139
                                function configureHtmlOutput( ev ) {
 
140
                                        var editor = ev.editor,
 
141
                                                dataProcessor = editor.dataProcessor,
 
142
                                                htmlFilter = dataProcessor && dataProcessor.htmlFilter;
 
143
 
 
144
                                        // Out self closing tags the HTML4 way, like <br>.
 
145
                                        dataProcessor.writer.selfClosingEnd = '>';
 
146
 
 
147
                                        // Make output formatting behave similar to FCKeditor
 
148
                                        var dtd = CKEDITOR.dtd;
 
149
                                        for ( var e in CKEDITOR.tools.extend( {}, dtd.$nonBodyContent, dtd.$block, dtd.$listItem, dtd.$tableContent ) ) {
 
150
                                                dataProcessor.writer.setRules( e, {
 
151
                                                        indent: true,
 
152
                                                        breakBeforeOpen: true,
 
153
                                                        breakAfterOpen: false,
 
154
                                                        breakBeforeClose: !dtd[ e ][ '#' ],
 
155
                                                        breakAfterClose: true
 
156
                                                });
 
157
                                        }
 
158
 
 
159
                                        // Output properties as attributes, not styles.
 
160
                                        htmlFilter.addRules( {
 
161
                                                elements: {
 
162
                                                        $: function( element ) {
 
163
                                                                // Output dimensions of images as width and height
 
164
                                                                if ( element.name == 'img' ) {
 
165
                                                                        var style = element.attributes.style;
 
166
 
 
167
                                                                        if ( style ) {
 
168
                                                                                // Get the width from the style.
 
169
                                                                                var match = ( /(?:^|\s)width\s*:\s*(\d+)px/i ).exec( style ),
 
170
                                                                                        width = match && match[ 1 ];
 
171
 
 
172
                                                                                // Get the height from the style.
 
173
                                                                                match = ( /(?:^|\s)height\s*:\s*(\d+)px/i ).exec( style );
 
174
                                                                                var height = match && match[ 1 ];
 
175
 
 
176
                                                                                if ( width ) {
 
177
                                                                                        element.attributes.style = element.attributes.style.replace( /(?:^|\s)width\s*:\s*(\d+)px;?/i , '' );
 
178
                                                                                        element.attributes.width = width;
 
179
                                                                                }
 
180
 
 
181
                                                                                if ( height ) {
 
182
                                                                                        element.attributes.style = element.attributes.style.replace( /(?:^|\s)height\s*:\s*(\d+)px;?/i , '' );
 
183
                                                                                        element.attributes.height = height;
 
184
                                                                                }
 
185
                                                                        }
 
186
                                                                }
 
187
 
 
188
                                                                // Output alignment of paragraphs using align
 
189
                                                                if ( element.name == 'p' ) {
 
190
                                                                        style = element.attributes.style;
 
191
 
 
192
                                                                        if ( style ) {
 
193
                                                                                // Get the align from the style.
 
194
                                                                                match = ( /(?:^|\s)text-align\s*:\s*(\w*);/i ).exec( style );
 
195
                                                                                var align = match && match[ 1 ];
 
196
 
 
197
                                                                                if ( align ) {
 
198
                                                                                        element.attributes.style = element.attributes.style.replace( /(?:^|\s)text-align\s*:\s*(\w*);?/i , '' );
 
199
                                                                                        element.attributes.align = align;
 
200
                                                                                }
 
201
                                                                        }
 
202
                                                                }
 
203
 
 
204
                                                                if ( !element.attributes.style )
 
205
                                                                        delete element.attributes.style;
 
206
 
 
207
                                                                return element;
 
208
                                                        }
 
209
                                                },
 
210
 
 
211
                                                attributes: {
 
212
                                                        style: function( value, element ) {
 
213
                                                                // Return #RGB for background and border colors
 
214
                                                                return CKEDITOR.tools.convertRgbToHex( value );
 
215
                                                        }
 
216
                                                }
 
217
                                        });
 
218
                                }
 
219
 
 
220
                        </script>
 
221
                </p>
 
222
                <p>
 
223
                        <input type="submit" value="Submit">
 
224
                </p>
 
225
        </form>
 
226
        <div id="footer">
 
227
                <hr>
 
228
                <p>
 
229
                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
 
230
                </p>
 
231
                <p id="copy">
 
232
                        Copyright &copy; 2003-2013, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
 
233
                        Knabben. All rights reserved.
 
234
                </p>
 
235
        </div>
 
236
</body>
 
237
</html>