source: main/trunk/greenstone3/web/interfaces/default/js/ckeditor/samples/datafiltering.html@ 29861

Last change on this file since 29861 was 29861, checked in by Georgiy Litvinov, 9 years ago

renamed interfaces
File size: 33.9 KB
Line 
1<!DOCTYPE html>
2<!--
3Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
4For 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">
36editor.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">
80var 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.
89editor.setData( '&lt;p <strong>style="color: red"</strong>&gt;Hello <strong>&lt;em&gt;world&lt;/em&gt;</strong>!&lt;/p&gt;' );
90alert( 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">
114CKEDITOR.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">
188CKEDITOR.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">
282CKEDITOR.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">
332CKEDITOR.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>
Note: See TracBrowser for help on using the repository browser.