skins/ckeditor/samples/datafiltering.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
   4 For licensing, see LICENSE.md or http://ckeditor.com/license
   5 -->
   6 <html>
   7 <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-2014, <a class="samples" href="http://cksource.com/">CKSource</a> - Frederico
 397                         Knabben. All rights reserved.
 398                 </p>
 399         </div>
 400 </body>
 401 </html>