Projet

Général

Profil

Paste
Télécharger (6,89 ko) Statistiques
| Branche: | Révision:

root / drupal7 / sites / all / libraries / ckeditor-4.9.2-full / samples / old / xhtmlstyle.html @ b986a83e

1
<!DOCTYPE html>
2
<!--
3
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
-->
6
<html>
7
<head>
8
        <meta charset="utf-8">
9
        <title>XHTML Compliant Output &mdash; CKEditor Sample</title>
10
        <meta name="ckeditor-sample-required-plugins" content="sourcearea">
11
        <script src="../../ckeditor.js"></script>
12
        <script src="sample.js"></script>
13
        <link href="sample.css" rel="stylesheet">
14
</head>
15
<body>
16
        <h1 class="samples">
17
                <a href="index.html">CKEditor Samples</a> &raquo; Producing XHTML Compliant Output
18
        </h1>
19
        <div class="warning deprecated">
20
                This sample is not maintained anymore. Check out its <a href="https://sdk.ckeditor.com/samples/basicstyles.html">brand new version in CKEditor SDK</a>.
21
        </div>
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/xhtml11/">XHTML 1.1</a> code.
26
                        Deprecated elements (<code>&lt;font&gt;</code>, <code>&lt;u&gt;</code>) or attributes
27
                        (<code>size</code>, <code>face</code>) will be replaced with XHTML compliant code.
28
                </p>
29
                <p>
30
                        To add a CKEditor instance outputting valid XHTML code, load the editor using a standard
31
                        JavaScript call and define CKEditor features to use the XHTML compliant elements and styles.
32
                </p>
33
                <p>
34
                        A snippet of the configuration code can be seen below; check the source of this page for
35
                        full definition:
36
                </p>
37
<pre class="samples">
38
CKEDITOR.replace( '<em>textarea_id</em>', {
39
        contentsCss: 'assets/outputxhtml.css',
40

    
41
        coreStyles_bold: {
42
                element: 'span',
43
                attributes: { 'class': 'Bold' }
44
        },
45
        coreStyles_italic: {
46
                element: 'span',
47
                attributes: { 'class': 'Italic' }
48
        },
49

    
50
        ...
51
});</pre>
52
        </div>
53
        <form action="sample_posteddata.php" method="post">
54
                <p>
55
                        <label for="editor1">
56
                                Editor 1:
57
                        </label>
58
                        <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;span class="Bold"&gt;sample text&lt;/span&gt;. You are using &lt;a href="https://ckeditor.com/"&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
59
                        <script>
60

61
                                CKEDITOR.replace( 'editor1', {
62
                                        /*
63
                                         * Style sheet for the contents
64
                                         */
65
                                        contentsCss: 'assets/outputxhtml/outputxhtml.css',
66

67
                                        /*
68
                                         * Special allowed content rules for spans used by
69
                                         * font face, size, and color buttons.
70
                                         *
71
                                         * Note: all rules have been written separately so
72
                                         * it was possible to specify required classes.
73
                                         */
74
                                        extraAllowedContent: 'span(!FontColor1);span(!FontColor2);span(!FontColor3);' +
75
                                                'span(!FontColor1BG);span(!FontColor2BG);span(!FontColor3BG);' +
76
                                                'span(!FontComic);span(!FontCourier);span(!FontTimes);' +
77
                                                'span(!FontSmaller);span(!FontLarger);span(!FontSmall);span(!FontBig);span(!FontDouble)',
78

79
                                        /*
80
                                         * Core styles.
81
                                         */
82
                                        coreStyles_bold: {
83
                                                element: 'span',
84
                                                attributes: { 'class': 'Bold' }
85
                                        },
86
                                        coreStyles_italic: {
87
                                                element: 'span',
88
                                                attributes: { 'class': 'Italic' }
89
                                        },
90
                                        coreStyles_underline: {
91
                                                element: 'span',
92
                                                attributes: { 'class': 'Underline' }
93
                                        },
94
                                        coreStyles_strike: {
95
                                                element: 'span',
96
                                                attributes: { 'class': 'StrikeThrough' },
97
                                                overrides: 'strike'
98
                                        },
99
                                        coreStyles_subscript: {
100
                                                element: 'span',
101
                                                attributes: { 'class': 'Subscript' },
102
                                                overrides: 'sub'
103
                                        },
104
                                        coreStyles_superscript: {
105
                                                element: 'span',
106
                                                attributes: { 'class': 'Superscript' },
107
                                                overrides: 'sup'
108
                                        },
109

110
                                        /*
111
                                         * Font face.
112
                                         */
113

114
                                        // List of fonts available in the toolbar combo. Each font definition is
115
                                        // separated by a semi-colon (;). We are using class names here, so each font
116
                                        // is defined by {Combo Label}/{Class Name}.
117
                                        font_names: 'Comic Sans MS/FontComic;Courier New/FontCourier;Times New Roman/FontTimes',
118

119
                                        // Define the way font elements will be applied to the document. The "span"
120
                                        // element will be used. When a font is selected, the font name defined in the
121
                                        // above list is passed to this definition with the name "Font", being it
122
                                        // injected in the "class" attribute.
123
                                        // We must also instruct the editor to replace span elements that are used to
124
                                        // set the font (Overrides).
125
                                        font_style: {
126
                                                element: 'span',
127
                                                attributes: { 'class': '#(family)' },
128
                                                overrides: [
129
                                                        {
130
                                                                element: 'span',
131
                                                                attributes: {
132
                                                                        'class': /^Font(?:Comic|Courier|Times)$/
133
                                                                }
134
                                                        }
135
                                                ]
136
                                        },
137

138
                                        /*
139
                                         * Font sizes.
140
                                         */
141
                                        fontSize_sizes: 'Smaller/FontSmaller;Larger/FontLarger;8pt/FontSmall;14pt/FontBig;Double Size/FontDouble',
142
                                        fontSize_style: {
143
                                                element: 'span',
144
                                                attributes: { 'class': '#(size)' },
145
                                                overrides: [
146
                                                        {
147
                                                                element: 'span',
148
                                                                attributes: {
149
                                                                        'class': /^Font(?:Smaller|Larger|Small|Big|Double)$/
150
                                                                }
151
                                                        }
152
                                                ]
153
                                        } ,
154

155
                                        /*
156
                                         * Font colors.
157
                                         */
158
                                        colorButton_enableMore: false,
159

160
                                        colorButton_colors: 'FontColor1/FF9900,FontColor2/0066CC,FontColor3/F00',
161
                                        colorButton_foreStyle: {
162
                                                element: 'span',
163
                                                attributes: { 'class': '#(color)' },
164
                                                overrides: [
165
                                                        {
166
                                                                element: 'span',
167
                                                                attributes: {
168
                                                                        'class': /^FontColor(?:1|2|3)$/
169
                                                                }
170
                                                        }
171
                                                ]
172
                                        },
173

174
                                        colorButton_backStyle: {
175
                                                element: 'span',
176
                                                attributes: { 'class': '#(color)BG' },
177
                                                overrides: [
178
                                                        {
179
                                                                element: 'span',
180
                                                                attributes: {
181
                                                                        'class': /^FontColor(?:1|2|3)BG$/
182
                                                                }
183
                                                        }
184
                                                ]
185
                                        },
186

187
                                        /*
188
                                         * Indentation.
189
                                         */
190
                                        indentClasses: [ 'Indent1', 'Indent2', 'Indent3' ],
191

192
                                        /*
193
                                         * Paragraph justification.
194
                                         */
195
                                        justifyClasses: [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyFull' ],
196

197
                                        /*
198
                                         * Styles combo.
199
                                         */
200
                                        stylesSet: [
201
                                                { name: 'Strong Emphasis', element: 'strong' },
202
                                                { name: 'Emphasis', element: 'em' },
203

204
                                                { name: 'Computer Code', element: 'code' },
205
                                                { name: 'Keyboard Phrase', element: 'kbd' },
206
                                                { name: 'Sample Text', element: 'samp' },
207
                                                { name: 'Variable', element: 'var' },
208

209
                                                { name: 'Deleted Text', element: 'del' },
210
                                                { name: 'Inserted Text', element: 'ins' },
211

212
                                                { name: 'Cited Work', element: 'cite' },
213
                                                { name: 'Inline Quotation', element: 'q' }
214
                                        ]
215
                                });
216

    
217
                        </script>
218
                </p>
219
                <p>
220
                        <input type="submit" value="Submit">
221
                </p>
222
        </form>
223
        <div id="footer">
224
                <hr>
225
                <p>
226
                        CKEditor - The text editor for the Internet - <a class="samples" href="https://ckeditor.com/">https://ckeditor.com</a>
227
                </p>
228
                <p id="copy">
229
                        Copyright &copy; 2003-2018, <a class="samples" href="https://cksource.com/">CKSource</a> - Frederico
230
                        Knabben. All rights reserved.
231
                </p>
232
        </div>
233
</body>
234
</html>