Projet

Général

Profil

Paste
Télécharger (33,9 ko) Statistiques
| Branche: | Révision:

root / drupal7 / sites / all / libraries / ckeditor-4.4.7-full / samples / datafiltering.html @ d69c481e

1
<!DOCTYPE html>
2
<!--
3
Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
4
For licensing, see LICENSE.md or http://ckeditor.com/license
5
-->
6
<html>
7
<head>
8
        <meta charset="utf-8">
9
        <title>Data Filtering &mdash; CKEditor Sample</title>
10
        <script src="../ckeditor.js"></script>
11
        <link rel="stylesheet" href="sample.css">
12
        <script>
13
                // Remove advanced tabs for all editors.
14
                CKEDITOR.config.removeDialogTabs = 'image:advanced;link:advanced;flash:advanced;creatediv:advanced;editdiv:advanced';
15
        </script>
16
</head>
17
<body>
18
        <h1 class="samples">
19
                <a href="index.html">CKEditor Samples</a> &raquo; Data Filtering and Features Activation
20
        </h1>
21
        <div class="description">
22
                <p>
23
                        This sample page demonstrates the idea of Advanced Content Filter
24
                        (<abbr title="Advanced Content Filter">ACF</abbr>), a sophisticated
25
                        tool that takes control over what kind of data is accepted by the editor and what
26
                        kind of output is produced.
27
                </p>
28
                <h2>When and what is being filtered?</h2>
29
                <p>
30
                        <abbr title="Advanced Content Filter">ACF</abbr> controls
31
                        <strong>every single source of data</strong> that comes to the editor.
32
                        It process both HTML that is inserted manually (i.e. pasted by the user)
33
                        and programmatically like:
34
                </p>
35
<pre class="samples">
36
editor.setData( '&lt;p&gt;Hello world!&lt;/p&gt;' );
37
</pre>
38
                <p>
39
                        <abbr title="Advanced Content Filter">ACF</abbr> discards invalid,
40
                        useless HTML tags and attributes so the editor remains "clean" during
41
                        runtime. <abbr title="Advanced Content Filter">ACF</abbr> behaviour
42
                        can be configured and adjusted for a particular case to prevent the
43
                        output HTML (i.e. in CMS systems) from being polluted.
44

    
45
                        This kind of filtering is a first, client-side line of defense
46
                        against "<a href="http://en.wikipedia.org/wiki/Tag_soup">tag soups</a>",
47
                        the tool that precisely restricts which tags, attributes and styles
48
                        are allowed (desired). When properly configured, <abbr title="Advanced Content Filter">ACF</abbr>
49
                        is an easy and fast way to produce a high-quality, intentionally filtered HTML.
50
                </p>
51

    
52
                <h3>How to configure or disable ACF?</h3>
53
                <p>
54
                        Advanced Content Filter is enabled by default, working in "automatic mode", yet
55
                        it provides a set of easy rules that allow adjusting filtering rules
56
                        and disabling the entire feature when necessary. The config property
57
                        responsible for this feature is <code><a class="samples"
58
                        href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent">config.allowedContent</a></code>.
59
                </p>
60
                <p>
61
                        By "automatic mode" is meant that loaded plugins decide which kind
62
                        of content is enabled and which is not. For example, if the link
63
                        plugin is loaded it implies that <code>&lt;a&gt;</code> tag is
64
                        automatically allowed. Each plugin is given a set
65
                        of predefined <abbr title="Advanced Content Filter">ACF</abbr> rules
66
                        that control the editor until <code><a class="samples"
67
                        href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent">
68
                        config.allowedContent</a></code>
69
                        is defined manually.
70
                </p>
71
                <p>
72
                        Let's assume our intention is to restrict the editor to accept (produce) <strong>paragraphs
73
                        only: no attributes, no styles, no other tags</strong>.
74
                        With <abbr title="Advanced Content Filter">ACF</abbr>
75
                        this is very simple. Basically set <code><a class="samples"
76
                        href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent">
77
                        config.allowedContent</a></code> to <code>'p'</code>:
78
                </p>
79
<pre class="samples">
80
var editor = CKEDITOR.replace( <em>textarea_id</em>, {
81
        <strong>allowedContent: 'p'</strong>
82
} );
83
</pre>
84
                <p>
85
                        Now try to play with allowed content:
86
                </p>
87
<pre class="samples">
88
// Trying to insert disallowed tag and attribute.
89
editor.setData( '&lt;p <strong>style="color: red"</strong>&gt;Hello <strong>&lt;em&gt;world&lt;/em&gt;</strong>!&lt;/p&gt;' );
90
alert( editor.getData() );
91

    
92
// Filtered data is returned.
93
"&lt;p&gt;Hello world!&lt;/p&gt;"
94
</pre>
95
                <p>
96
                        What happened? Since <code>config.allowedContent: 'p'</code> is set the editor assumes
97
                        that only plain <code>&lt;p&gt;</code> are accepted. Nothing more. This is why
98
                        <code>style</code> attribute and <code>&lt;em&gt;</code> tag are gone. The same
99
                        filtering would happen if we pasted disallowed HTML into this editor.
100
                </p>
101
                <p>
102
                        This is just a small sample of what <abbr title="Advanced Content Filter">ACF</abbr>
103
                        can do. To know more, please refer to the sample section below and
104
                        <a href="http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter">the official Advanced Content Filter guide</a>.
105
                </p>
106
                <p>
107
                        You may, of course, want CKEditor to avoid filtering of any kind.
108
                        To get rid of <abbr title="Advanced Content Filter">ACF</abbr>,
109
                        basically set <code><a class="samples"
110
                        href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent">
111
                        config.allowedContent</a></code> to <code>true</code> like this:
112
                </p>
113
<pre class="samples">
114
CKEDITOR.replace( <em>textarea_id</em>, {
115
        <strong>allowedContent: true</strong>
116
} );
117
</pre>
118

    
119
                <h2>Beyond data flow: Features activation</h2>
120
                <p>
121
                        <abbr title="Advanced Content Filter">ACF</abbr> is far more than
122
                        <abbr title="Input/Output">I/O</abbr> control: the entire
123
                        <abbr title="User Interface">UI</abbr> of the editor is adjusted to what
124
                        filters restrict. For example: if <code>&lt;a&gt;</code> tag is
125
                        <strong>disallowed</strong>
126
                        by <abbr title="Advanced Content Filter">ACF</abbr>,
127
                        then accordingly <code>link</code> command, toolbar button and link dialog
128
                        are also disabled. Editor is smart: it knows which features must be
129
                        removed from the interface to match filtering rules.
130
                </p>
131
                <p>
132
                        CKEditor can be far more specific. If <code>&lt;a&gt;</code> tag is
133
                        <strong>allowed</strong> by filtering rules to be used but it is restricted
134
                        to have only one attribute (<code>href</code>)
135
                        <code>config.allowedContent = 'a[!href]'</code>, then
136
                        "Target" tab of the link dialog is automatically disabled as <code>target</code>
137
                        attribute isn't included in <abbr title="Advanced Content Filter">ACF</abbr> rules
138
                        for <code>&lt;a&gt;</code>. This behaviour applies to dialog fields, context
139
                        menus and toolbar buttons.
140
                </p>
141

    
142
                <h2>Sample configurations</h2>
143
                <p>
144
                        There are several editor instances below that present different
145
                        <abbr title="Advanced Content Filter">ACF</abbr> setups. <strong>All of them,
146
                        except the last inline instance, share the same HTML content</strong> to visualize
147
                        how different filtering rules affect the same input data.
148
                </p>
149
        </div>
150

    
151
        <div>
152
                <label for="editor1">
153
                        Editor 1:
154
                </label>
155
                <div class="description">
156
                        <p>
157
                                This editor is using default configuration ("automatic mode"). It means that
158
                                <code><a class="samples"
159
                                href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent">
160
                                config.allowedContent</a></code> is defined by loaded plugins.
161
                                Each plugin extends filtering rules to make it's own associated content
162
                                available for the user.
163
                        </p>
164
                </div>
165
                <textarea cols="80" id="editor1" name="editor1" rows="10">
166
                        &lt;h1&gt;&lt;img alt=&quot;Saturn V carrying Apollo 11&quot; class=&quot;right&quot; src=&quot;assets/sample.jpg&quot;/&gt; Apollo 11&lt;/h1&gt; &lt;p&gt;&lt;b&gt;Apollo 11&lt;/b&gt; was the spaceflight that landed the first humans, Americans &lt;a href=&quot;http://en.wikipedia.org/wiki/Neil_Armstrong&quot; title=&quot;Neil Armstrong&quot;&gt;Neil Armstrong&lt;/a&gt; and &lt;a href=&quot;http://en.wikipedia.org/wiki/Buzz_Aldrin&quot; title=&quot;Buzz Aldrin&quot;&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.&lt;/p&gt; &lt;p&gt;Armstrong spent about &lt;s&gt;three and a half&lt;/s&gt; two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&amp;nbsp;kg) of lunar material for return to Earth. A third member of the mission, &lt;a href=&quot;http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)&quot; title=&quot;Michael Collins (astronaut)&quot;&gt;Michael Collins&lt;/a&gt;, piloted the &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_Command/Service_Module&quot; title=&quot;Apollo Command/Service Module&quot;&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.&lt;/p&gt; &lt;h2&gt;Broadcasting and &lt;em&gt;quotes&lt;/em&gt; &lt;a id=&quot;quotes&quot; name=&quot;quotes&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;One small step for [a] man, one giant leap for mankind.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Apollo 11 effectively ended the &lt;a href=&quot;http://en.wikipedia.org/wiki/Space_Race&quot; title=&quot;Space Race&quot;&gt;Space Race&lt;/a&gt; and fulfilled a national goal proposed in 1961 by the late U.S. President &lt;a href=&quot;http://en.wikipedia.org/wiki/John_F._Kennedy&quot; title=&quot;John F. Kennedy&quot;&gt;John F. Kennedy&lt;/a&gt; in a speech before the United States Congress:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.&lt;/p&gt;&lt;/blockquote&gt; &lt;h2&gt;Technical details &lt;a id=&quot;tech-details&quot; name=&quot;tech-details&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;table align=&quot;right&quot; border=&quot;1&quot; bordercolor=&quot;#ccc&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse:collapse;margin:10px 0 10px 15px;&quot;&gt; &lt;caption&gt;&lt;strong&gt;Mission crew&lt;/strong&gt;&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;Position&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Astronaut&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Commander&lt;/td&gt; &lt;td&gt;Neil A. Armstrong&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Command Module Pilot&lt;/td&gt; &lt;td&gt;Michael Collins&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Lunar Module Pilot&lt;/td&gt; &lt;td&gt;Edwin &amp;quot;Buzz&amp;quot; E. Aldrin, Jr.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Launched by a &lt;strong&gt;Saturn V&lt;/strong&gt; rocket from &lt;a href=&quot;http://en.wikipedia.org/wiki/Kennedy_Space_Center&quot; title=&quot;Kennedy Space Center&quot;&gt;Kennedy Space Center&lt;/a&gt; in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of &lt;a href=&quot;http://en.wikipedia.org/wiki/NASA&quot; title=&quot;NASA&quot;&gt;NASA&lt;/a&gt;&amp;#39;s Apollo program. The Apollo spacecraft had three parts:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;&lt;strong&gt;Command Module&lt;/strong&gt; with a cabin for the three astronauts which was the only part which landed back on Earth&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Service Module&lt;/strong&gt; which supported the Command Module with propulsion, electrical power, oxygen and water&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Lunar Module&lt;/strong&gt; for landing on the Moon.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;After being sent to the Moon by the Saturn V&amp;#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Mare_Tranquillitatis&quot; title=&quot;Mare Tranquillitatis&quot;&gt;Sea of Tranquility&lt;/a&gt;. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Pacific_Ocean&quot; title=&quot;Pacific Ocean&quot;&gt;Pacific Ocean&lt;/a&gt; on July 24.&lt;/p&gt; &lt;hr/&gt; &lt;p style=&quot;text-align: right;&quot;&gt;&lt;small&gt;Source: &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_11&quot;&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
167
                </textarea>
168

    
169
                <script>
170

171
                        CKEDITOR.replace( 'editor1' );
172

    
173
                </script>
174
        </div>
175

    
176
        <br>
177

    
178
        <div>
179
                <label for="editor2">
180
                        Editor 2:
181
                </label>
182
                <div class="description">
183
                        <p>
184
                                This editor is using a custom configuration for
185
                                <abbr title="Advanced Content Filter">ACF</abbr>:
186
                        </p>
187
<pre class="samples">
188
CKEDITOR.replace( 'editor2', {
189
        allowedContent:
190
                'h1 h2 h3 p blockquote strong em;' +
191
                'a[!href];' +
192
                'img(left,right)[!src,alt,width,height];' +
193
                'table tr th td caption;' +
194
                'span{!font-family};' +'
195
                'span{!color};' +
196
                'span(!marker);' +
197
                'del ins'
198
} );
199
</pre>
200
                        <p>
201
                                The following rules may require additional explanation:
202
                        </p>
203
                        <ul>
204
                                <li>
205
                                        <code>h1 h2 h3 p blockquote strong em</code> - These tags
206
                                        are accepted by the editor. Any tag attributes will be discarded.
207
                                </li>
208
                                <li>
209
                                        <code>a[!href]</code> - <code>href</code> attribute is obligatory
210
                                        for <code>&lt;a&gt;</code> tag. Tags without this attribute
211
                                        are disarded. No other attribute will be accepted.
212
                                </li>
213
                                <li>
214
                                        <code>img(left,right)[!src,alt,width,height]</code> - <code>src</code>
215
                                        attribute is obligatory for <code>&lt;img&gt;</code> tag.
216
                                        <code>alt</code>, <code>width</code>, <code>height</code>
217
                                        and <code>class</code> attributes are accepted but
218
                                        <code>class</code> must be either <code>class="left"</code>
219
                                        or <code>class="right"</code>
220
                                </li>
221
                                <li>
222
                                        <code>table tr th td caption</code> - These tags
223
                                        are accepted by the editor. Any tag attributes will be discarded.
224
                                </li>
225
                                <li>
226
                                        <code>span{!font-family}</code>, <code>span{!color}</code>,
227
                                        <code>span(!marker)</code> - <code>&lt;span&gt;</code> tags
228
                                        will be accepted if either <code>font-family</code> or
229
                                        <code>color</code> style is set or <code>class="marker"</code>
230
                                        is present.
231
                                </li>
232
                                <li>
233
                                        <code>del ins</code> - These tags
234
                                        are accepted by the editor. Any tag attributes will be discarded.
235
                                </li>
236
                        </ul>
237
                        <p>
238
                                Please note that <strong><abbr title="User Interface">UI</abbr> of the
239
                                editor is different</strong>. It's a response to what happened to the filters.
240
                                Since <code>text-align</code> isn't allowed, the align toolbar is gone.
241
                                The same thing happened to subscript/superscript, strike, underline
242
                                (<code>&lt;u&gt;</code>, <code>&lt;sub&gt;</code>, <code>&lt;sup&gt;</code>
243
                                are disallowed by <code><a class="samples"
244
                                href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent">
245
                                config.allowedContent</a></code>) and many other buttons.
246
                        </p>
247
                </div>
248
                <textarea cols="80" id="editor2" name="editor2" rows="10">
249
                        &lt;h1&gt;&lt;img alt=&quot;Saturn V carrying Apollo 11&quot; class=&quot;right&quot; src=&quot;assets/sample.jpg&quot;/&gt; Apollo 11&lt;/h1&gt; &lt;p&gt;&lt;b&gt;Apollo 11&lt;/b&gt; was the spaceflight that landed the first humans, Americans &lt;a href=&quot;http://en.wikipedia.org/wiki/Neil_Armstrong&quot; title=&quot;Neil Armstrong&quot;&gt;Neil Armstrong&lt;/a&gt; and &lt;a href=&quot;http://en.wikipedia.org/wiki/Buzz_Aldrin&quot; title=&quot;Buzz Aldrin&quot;&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.&lt;/p&gt; &lt;p&gt;Armstrong spent about &lt;s&gt;three and a half&lt;/s&gt; two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&amp;nbsp;kg) of lunar material for return to Earth. A third member of the mission, &lt;a href=&quot;http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)&quot; title=&quot;Michael Collins (astronaut)&quot;&gt;Michael Collins&lt;/a&gt;, piloted the &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_Command/Service_Module&quot; title=&quot;Apollo Command/Service Module&quot;&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.&lt;/p&gt; &lt;h2&gt;Broadcasting and &lt;em&gt;quotes&lt;/em&gt; &lt;a id=&quot;quotes&quot; name=&quot;quotes&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;One small step for [a] man, one giant leap for mankind.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Apollo 11 effectively ended the &lt;a href=&quot;http://en.wikipedia.org/wiki/Space_Race&quot; title=&quot;Space Race&quot;&gt;Space Race&lt;/a&gt; and fulfilled a national goal proposed in 1961 by the late U.S. President &lt;a href=&quot;http://en.wikipedia.org/wiki/John_F._Kennedy&quot; title=&quot;John F. Kennedy&quot;&gt;John F. Kennedy&lt;/a&gt; in a speech before the United States Congress:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.&lt;/p&gt;&lt;/blockquote&gt; &lt;h2&gt;Technical details &lt;a id=&quot;tech-details&quot; name=&quot;tech-details&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;table align=&quot;right&quot; border=&quot;1&quot; bordercolor=&quot;#ccc&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse:collapse;margin:10px 0 10px 15px;&quot;&gt; &lt;caption&gt;&lt;strong&gt;Mission crew&lt;/strong&gt;&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;Position&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Astronaut&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Commander&lt;/td&gt; &lt;td&gt;Neil A. Armstrong&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Command Module Pilot&lt;/td&gt; &lt;td&gt;Michael Collins&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Lunar Module Pilot&lt;/td&gt; &lt;td&gt;Edwin &amp;quot;Buzz&amp;quot; E. Aldrin, Jr.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Launched by a &lt;strong&gt;Saturn V&lt;/strong&gt; rocket from &lt;a href=&quot;http://en.wikipedia.org/wiki/Kennedy_Space_Center&quot; title=&quot;Kennedy Space Center&quot;&gt;Kennedy Space Center&lt;/a&gt; in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of &lt;a href=&quot;http://en.wikipedia.org/wiki/NASA&quot; title=&quot;NASA&quot;&gt;NASA&lt;/a&gt;&amp;#39;s Apollo program. The Apollo spacecraft had three parts:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;&lt;strong&gt;Command Module&lt;/strong&gt; with a cabin for the three astronauts which was the only part which landed back on Earth&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Service Module&lt;/strong&gt; which supported the Command Module with propulsion, electrical power, oxygen and water&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Lunar Module&lt;/strong&gt; for landing on the Moon.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;After being sent to the Moon by the Saturn V&amp;#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Mare_Tranquillitatis&quot; title=&quot;Mare Tranquillitatis&quot;&gt;Sea of Tranquility&lt;/a&gt;. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Pacific_Ocean&quot; title=&quot;Pacific Ocean&quot;&gt;Pacific Ocean&lt;/a&gt; on July 24.&lt;/p&gt; &lt;hr/&gt; &lt;p style=&quot;text-align: right;&quot;&gt;&lt;small&gt;Source: &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_11&quot;&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
250
                </textarea>
251
                <script>
252

253
                        CKEDITOR.replace( 'editor2', {
254
                                allowedContent:
255
                                        'h1 h2 h3 p blockquote strong em;' +
256
                                        'a[!href];' +
257
                                        'img(left,right)[!src,alt,width,height];' +
258
                                        'table tr th td caption;' +
259
                                        'span{!font-family};' +
260
                                        'span{!color};' +
261
                                        'span(!marker);' +
262
                                        'del ins'
263
                        } );
264

    
265
                </script>
266
        </div>
267

    
268
        <br>
269

    
270
        <div>
271
                <label for="editor3">
272
                        Editor 3:
273
                </label>
274
                <div class="description">
275
                        <p>
276
                                This editor is using a custom configuration for
277
                                <abbr title="Advanced Content Filter">ACF</abbr>.
278
                                Note that filters can be configured as an object literal
279
                                as an alternative to a string-based definition.
280
                        </p>
281
<pre class="samples">
282
CKEDITOR.replace( 'editor3', {
283
        allowedContent: {
284
                'b i ul ol big small': true,
285
                'h1 h2 h3 p blockquote li': {
286
                        styles: 'text-align'
287
                },
288
                a: { attributes: '!href,target' },
289
                img: {
290
                        attributes: '!src,alt',
291
                        styles: 'width,height',
292
                        classes: 'left,right'
293
                }
294
        }
295
} );
296
</pre>
297
                </div>
298
                <textarea cols="80" id="editor3" name="editor3" rows="10">
299
                        &lt;h1&gt;&lt;img alt=&quot;Saturn V carrying Apollo 11&quot; class=&quot;right&quot; src=&quot;assets/sample.jpg&quot;/&gt; Apollo 11&lt;/h1&gt; &lt;p&gt;&lt;b&gt;Apollo 11&lt;/b&gt; was the spaceflight that landed the first humans, Americans &lt;a href=&quot;http://en.wikipedia.org/wiki/Neil_Armstrong&quot; title=&quot;Neil Armstrong&quot;&gt;Neil Armstrong&lt;/a&gt; and &lt;a href=&quot;http://en.wikipedia.org/wiki/Buzz_Aldrin&quot; title=&quot;Buzz Aldrin&quot;&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.&lt;/p&gt; &lt;p&gt;Armstrong spent about &lt;s&gt;three and a half&lt;/s&gt; two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&amp;nbsp;kg) of lunar material for return to Earth. A third member of the mission, &lt;a href=&quot;http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)&quot; title=&quot;Michael Collins (astronaut)&quot;&gt;Michael Collins&lt;/a&gt;, piloted the &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_Command/Service_Module&quot; title=&quot;Apollo Command/Service Module&quot;&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.&lt;/p&gt; &lt;h2&gt;Broadcasting and &lt;em&gt;quotes&lt;/em&gt; &lt;a id=&quot;quotes&quot; name=&quot;quotes&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;One small step for [a] man, one giant leap for mankind.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Apollo 11 effectively ended the &lt;a href=&quot;http://en.wikipedia.org/wiki/Space_Race&quot; title=&quot;Space Race&quot;&gt;Space Race&lt;/a&gt; and fulfilled a national goal proposed in 1961 by the late U.S. President &lt;a href=&quot;http://en.wikipedia.org/wiki/John_F._Kennedy&quot; title=&quot;John F. Kennedy&quot;&gt;John F. Kennedy&lt;/a&gt; in a speech before the United States Congress:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.&lt;/p&gt;&lt;/blockquote&gt; &lt;h2&gt;Technical details &lt;a id=&quot;tech-details&quot; name=&quot;tech-details&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;table align=&quot;right&quot; border=&quot;1&quot; bordercolor=&quot;#ccc&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse:collapse;margin:10px 0 10px 15px;&quot;&gt; &lt;caption&gt;&lt;strong&gt;Mission crew&lt;/strong&gt;&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;Position&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Astronaut&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Commander&lt;/td&gt; &lt;td&gt;Neil A. Armstrong&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Command Module Pilot&lt;/td&gt; &lt;td&gt;Michael Collins&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Lunar Module Pilot&lt;/td&gt; &lt;td&gt;Edwin &amp;quot;Buzz&amp;quot; E. Aldrin, Jr.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Launched by a &lt;strong&gt;Saturn V&lt;/strong&gt; rocket from &lt;a href=&quot;http://en.wikipedia.org/wiki/Kennedy_Space_Center&quot; title=&quot;Kennedy Space Center&quot;&gt;Kennedy Space Center&lt;/a&gt; in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of &lt;a href=&quot;http://en.wikipedia.org/wiki/NASA&quot; title=&quot;NASA&quot;&gt;NASA&lt;/a&gt;&amp;#39;s Apollo program. The Apollo spacecraft had three parts:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;&lt;strong&gt;Command Module&lt;/strong&gt; with a cabin for the three astronauts which was the only part which landed back on Earth&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Service Module&lt;/strong&gt; which supported the Command Module with propulsion, electrical power, oxygen and water&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Lunar Module&lt;/strong&gt; for landing on the Moon.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;After being sent to the Moon by the Saturn V&amp;#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Mare_Tranquillitatis&quot; title=&quot;Mare Tranquillitatis&quot;&gt;Sea of Tranquility&lt;/a&gt;. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Pacific_Ocean&quot; title=&quot;Pacific Ocean&quot;&gt;Pacific Ocean&lt;/a&gt; on July 24.&lt;/p&gt; &lt;hr/&gt; &lt;p style=&quot;text-align: right;&quot;&gt;&lt;small&gt;Source: &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_11&quot;&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
300
                </textarea>
301
                <script>
302

303
                        CKEDITOR.replace( 'editor3', {
304
                                allowedContent: {
305
                                        'b i ul ol big small': true,
306
                                        'h1 h2 h3 p blockquote li': {
307
                                                styles: 'text-align'
308
                                        },
309
                                        a: { attributes: '!href,target' },
310
                                        img: {
311
                                                attributes: '!src,alt',
312
                                                styles: 'width,height',
313
                                                classes: 'left,right'
314
                                        }
315
                                }
316
                        } );
317

    
318
                </script>
319
        </div>
320

    
321
        <br>
322

    
323
        <div>
324
                <label for="editor4">
325
                        Editor 4:
326
                </label>
327
                <div class="description">
328
                        <p>
329
                                This editor is using a custom set of plugins and buttons.
330
                        </p>
331
<pre class="samples">
332
CKEDITOR.replace( 'editor4', {
333
        removePlugins: 'bidi,font,forms,flash,horizontalrule,iframe,justify,table,tabletools,smiley',
334
        removeButtons: 'Anchor,Underline,Strike,Subscript,Superscript,Image',
335
        format_tags: 'p;h1;h2;h3;pre;address'
336
} );
337
</pre>
338
                        <p>
339
                                As you can see, removing plugins and buttons implies filtering.
340
                                Several tags are not allowed in the editor because there's no
341
                                plugin/button that is responsible for creating and editing this
342
                                kind of content (for example: the image is missing because
343
                                of <code>removeButtons: 'Image'</code>). The conclusion is that
344
                                <abbr title="Advanced Content Filter">ACF</abbr> works "backwards"
345
                                as well: <strong>modifying <abbr title="User Interface">UI</abbr>
346
                                elements is changing allowed content rules</strong>.
347
                        </p>
348
                </div>
349
                <textarea cols="80" id="editor4" name="editor4" rows="10">
350
                        &lt;h1&gt;&lt;img alt=&quot;Saturn V carrying Apollo 11&quot; class=&quot;right&quot; src=&quot;assets/sample.jpg&quot;/&gt; Apollo 11&lt;/h1&gt; &lt;p&gt;&lt;b&gt;Apollo 11&lt;/b&gt; was the spaceflight that landed the first humans, Americans &lt;a href=&quot;http://en.wikipedia.org/wiki/Neil_Armstrong&quot; title=&quot;Neil Armstrong&quot;&gt;Neil Armstrong&lt;/a&gt; and &lt;a href=&quot;http://en.wikipedia.org/wiki/Buzz_Aldrin&quot; title=&quot;Buzz Aldrin&quot;&gt;Buzz Aldrin&lt;/a&gt;, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.&lt;/p&gt; &lt;p&gt;Armstrong spent about &lt;s&gt;three and a half&lt;/s&gt; two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&amp;nbsp;kg) of lunar material for return to Earth. A third member of the mission, &lt;a href=&quot;http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)&quot; title=&quot;Michael Collins (astronaut)&quot;&gt;Michael Collins&lt;/a&gt;, piloted the &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_Command/Service_Module&quot; title=&quot;Apollo Command/Service Module&quot;&gt;command&lt;/a&gt; spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.&lt;/p&gt; &lt;h2&gt;Broadcasting and &lt;em&gt;quotes&lt;/em&gt; &lt;a id=&quot;quotes&quot; name=&quot;quotes&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;p&gt;Broadcast on live TV to a world-wide audience, Armstrong stepped onto the lunar surface and described the event as:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;One small step for [a] man, one giant leap for mankind.&lt;/p&gt;&lt;/blockquote&gt; &lt;p&gt;Apollo 11 effectively ended the &lt;a href=&quot;http://en.wikipedia.org/wiki/Space_Race&quot; title=&quot;Space Race&quot;&gt;Space Race&lt;/a&gt; and fulfilled a national goal proposed in 1961 by the late U.S. President &lt;a href=&quot;http://en.wikipedia.org/wiki/John_F._Kennedy&quot; title=&quot;John F. Kennedy&quot;&gt;John F. Kennedy&lt;/a&gt; in a speech before the United States Congress:&lt;/p&gt; &lt;blockquote&gt;&lt;p&gt;[...] before this decade is out, of landing a man on the Moon and returning him safely to the Earth.&lt;/p&gt;&lt;/blockquote&gt; &lt;h2&gt;Technical details &lt;a id=&quot;tech-details&quot; name=&quot;tech-details&quot;&gt;&lt;/a&gt;&lt;/h2&gt; &lt;table align=&quot;right&quot; border=&quot;1&quot; bordercolor=&quot;#ccc&quot; cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; style=&quot;border-collapse:collapse;margin:10px 0 10px 15px;&quot;&gt; &lt;caption&gt;&lt;strong&gt;Mission crew&lt;/strong&gt;&lt;/caption&gt; &lt;thead&gt; &lt;tr&gt; &lt;th scope=&quot;col&quot;&gt;Position&lt;/th&gt; &lt;th scope=&quot;col&quot;&gt;Astronaut&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Commander&lt;/td&gt; &lt;td&gt;Neil A. Armstrong&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Command Module Pilot&lt;/td&gt; &lt;td&gt;Michael Collins&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Lunar Module Pilot&lt;/td&gt; &lt;td&gt;Edwin &amp;quot;Buzz&amp;quot; E. Aldrin, Jr.&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;p&gt;Launched by a &lt;strong&gt;Saturn V&lt;/strong&gt; rocket from &lt;a href=&quot;http://en.wikipedia.org/wiki/Kennedy_Space_Center&quot; title=&quot;Kennedy Space Center&quot;&gt;Kennedy Space Center&lt;/a&gt; in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of &lt;a href=&quot;http://en.wikipedia.org/wiki/NASA&quot; title=&quot;NASA&quot;&gt;NASA&lt;/a&gt;&amp;#39;s Apollo program. The Apollo spacecraft had three parts:&lt;/p&gt; &lt;ol&gt; &lt;li&gt;&lt;strong&gt;Command Module&lt;/strong&gt; with a cabin for the three astronauts which was the only part which landed back on Earth&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Service Module&lt;/strong&gt; which supported the Command Module with propulsion, electrical power, oxygen and water&lt;/li&gt; &lt;li&gt;&lt;strong&gt;Lunar Module&lt;/strong&gt; for landing on the Moon.&lt;/li&gt; &lt;/ol&gt; &lt;p&gt;After being sent to the Moon by the Saturn V&amp;#39;s upper stage, the astronauts separated the spacecraft from it and travelled for three days until they entered into lunar orbit. Armstrong and Aldrin then moved into the Lunar Module and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Mare_Tranquillitatis&quot; title=&quot;Mare Tranquillitatis&quot;&gt;Sea of Tranquility&lt;/a&gt;. They stayed a total of about 21 and a half hours on the lunar surface. After lifting off in the upper part of the Lunar Module and rejoining Collins in the Command Module, they returned to Earth and landed in the &lt;a href=&quot;http://en.wikipedia.org/wiki/Pacific_Ocean&quot; title=&quot;Pacific Ocean&quot;&gt;Pacific Ocean&lt;/a&gt; on July 24.&lt;/p&gt; &lt;hr/&gt; &lt;p style=&quot;text-align: right;&quot;&gt;&lt;small&gt;Source: &lt;a href=&quot;http://en.wikipedia.org/wiki/Apollo_11&quot;&gt;Wikipedia.org&lt;/a&gt;&lt;/small&gt;&lt;/p&gt;
351
                </textarea>
352
                <script>
353

354
                        CKEDITOR.replace( 'editor4', {
355
                                removePlugins: 'bidi,div,font,forms,flash,horizontalrule,iframe,justify,table,tabletools,smiley',
356
                                removeButtons: 'Anchor,Underline,Strike,Subscript,Superscript,Image',
357
                                format_tags: 'p;h1;h2;h3;pre;address'
358
                        } );
359

    
360
                </script>
361
        </div>
362

    
363
        <br>
364

    
365
        <div>
366
                <label for="editor5">
367
                        Editor 5:
368
                </label>
369
                <div class="description">
370
                        <p>
371
                                This editor is built on editable <code>&lt;h1&gt;</code> element.
372
                                <abbr title="Advanced Content Filter">ACF</abbr> takes care of
373
                                what can be included in <code>&lt;h1&gt;</code>. Note that there
374
                                are no block styles in Styles combo. Also why lists, indentation,
375
                                blockquote, div, form and other buttons are missing.
376
                        </p>
377
                        <p>
378
                                <abbr title="Advanced Content Filter">ACF</abbr> makes sure that
379
                                no disallowed tags will come to <code>&lt;h1&gt;</code> so the final
380
                                markup is valid. If the user tried to paste some invalid HTML
381
                                into this editor (let's say a list), it would be automatically
382
                                converted into plain text.
383
                        </p>
384
                </div>
385
                <h1 id="editor5" contenteditable="true">
386
                        <em>Apollo 11</em> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong" title="Neil Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin" title="Buzz Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC.
387
                </h1>
388
        </div>
389

    
390
        <div id="footer">
391
                <hr>
392
                <p>
393
                        CKEditor - The text editor for the Internet - <a class="samples" href="http://ckeditor.com/">http://ckeditor.com</a>
394
                </p>
395
                <p id="copy">
396
                        Copyright &copy; 2003-2015, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
397
                        Knabben. All rights reserved.
398
                </p>
399
        </div>
400
</body>
401
</html>