<!DOCTYPE html>
<!--
Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.md or http://ckeditor.com/license
-->
<html>
<head>
<meta charset="utf-8">
<title>Data Filtering — CKEditor Sample</title>
<script src="../ckeditor.js"></script>
<link rel="stylesheet" href="sample.css">
<script>
// Remove advanced tabs for all editors.
CKEDITOR.config.removeDialogTabs = 'image:advanced;link:advanced;flash:advanced;creatediv:advanced;editdiv:advanced';
</script>
</head>
<body>
<h1 class="samples">
<a href="index.html">CKEditor Samples</a> » Data Filtering and Features Activation
</h1>
<div class="description">
<p>
This sample page demonstrates the idea of Advanced Content Filter
(<abbr title="Advanced Content Filter">ACF</abbr>), a sophisticated
tool that takes control over what kind of data is accepted by the editor and what
kind of output is produced.
</p>
<h2>When and what is being filtered?</h2>
<p>
<abbr title="Advanced Content Filter">ACF</abbr> controls
<strong>every single source of data</strong> that comes to the editor.
It process both HTML that is inserted manually (i.e. pasted by the user)
and programmatically like:
</p>
<pre class="samples">
editor.setData( '<p>Hello world!</p>' );
</pre>
<p>
<abbr title="Advanced Content Filter">ACF</abbr> discards invalid,
useless HTML tags and attributes so the editor remains "clean" during
runtime. <abbr title="Advanced Content Filter">ACF</abbr> behaviour
can be configured and adjusted for a particular case to prevent the
output HTML (i.e. in CMS systems) from being polluted.
This kind of filtering is a first, client-side line of defense
against "<a href="http://en.wikipedia.org/wiki/Tag_soup">tag soups</a>",
the tool that precisely restricts which tags, attributes and styles
are allowed (desired). When properly configured, <abbr title="Advanced Content Filter">ACF</abbr>
is an easy and fast way to produce a high-quality, intentionally filtered HTML.
</p>
<h3>How to configure or disable ACF?</h3>
<p>
Advanced Content Filter is enabled by default, working in "automatic mode", yet
it provides a set of easy rules that allow adjusting filtering rules
and disabling the entire feature when necessary. The config property
responsible for this feature is <code><a class="samples"
href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent">config.allowedContent</a></code>.
</p>
<p>
By "automatic mode" is meant that loaded plugins decide which kind
of content is enabled and which is not. For example, if the link
plugin is loaded it implies that <code><a></code> tag is
automatically allowed. Each plugin is given a set
of predefined <abbr title="Advanced Content Filter">ACF</abbr> rules
that control the editor until <code><a class="samples"
href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent">
config.allowedContent</a></code>
is defined manually.
</p>
<p>
Let's assume our intention is to restrict the editor to accept (produce) <strong>paragraphs
only: no attributes, no styles, no other tags</strong>.
With <abbr title="Advanced Content Filter">ACF</abbr>
this is very simple. Basically set <code><a class="samples"
href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent">
config.allowedContent</a></code> to <code>'p'</code>:
</p>
<pre class="samples">
var editor = CKEDITOR.replace( <em>textarea_id</em>, {
<strong>allowedContent: 'p'</strong>
} );
</pre>
<p>
Now try to play with allowed content:
</p>
<pre class="samples">
// Trying to insert disallowed tag and attribute.
editor.setData( '<p <strong>style="color: red"</strong>>Hello <strong><em>world</em></strong>!</p>' );
alert( editor.getData() );
// Filtered data is returned.
"<p>Hello world!</p>"
</pre>
<p>
What happened? Since <code>config.allowedContent: 'p'</code> is set the editor assumes
that only plain <code><p></code> are accepted. Nothing more. This is why
<code>style</code> attribute and <code><em></code> tag are gone. The same
filtering would happen if we pasted disallowed HTML into this editor.
</p>
<p>
This is just a small sample of what <abbr title="Advanced Content Filter">ACF</abbr>
can do. To know more, please refer to the sample section below and
<a href="http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter">the official Advanced Content Filter guide</a>.
</p>
<p>
You may, of course, want CKEditor to avoid filtering of any kind.
To get rid of <abbr title="Advanced Content Filter">ACF</abbr>,
basically set <code><a class="samples"
href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent">
config.allowedContent</a></code> to <code>true</code> like this:
</p>
<pre class="samples">
CKEDITOR.replace( <em>textarea_id</em>, {
<strong>allowedContent: true</strong>
} );
</pre>
<h2>Beyond data flow: Features activation</h2>
<p>
<abbr title="Advanced Content Filter">ACF</abbr> is far more than
<abbr title="Input/Output">I/O</abbr> control: the entire
<abbr title="User Interface">UI</abbr> of the editor is adjusted to what
filters restrict. For example: if <code><a></code> tag is
<strong>disallowed</strong>
by <abbr title="Advanced Content Filter">ACF</abbr>,
then accordingly <code>link</code> command, toolbar button and link dialog
are also disabled. Editor is smart: it knows which features must be
removed from the interface to match filtering rules.
</p>
<p>
CKEditor can be far more specific. If <code><a></code> tag is
<strong>allowed</strong> by filtering rules to be used but it is restricted
to have only one attribute (<code>href</code>)
<code>config.allowedContent = 'a[!href]'</code>, then
"Target" tab of the link dialog is automatically disabled as <code>target</code>
attribute isn't included in <abbr title="Advanced Content Filter">ACF</abbr> rules
for <code><a></code>. This behaviour applies to dialog fields, context
menus and toolbar buttons.
</p>
<h2>Sample configurations</h2>
<p>
There are several editor instances below that present different
<abbr title="Advanced Content Filter">ACF</abbr> setups. <strong>All of them,
except the last inline instance, share the same HTML content</strong> to visualize
how different filtering rules affect the same input data.
</p>
</div>
<div>
<label for="editor1">
Editor 1:
</label>
<div class="description">
<p>
This editor is using default configuration ("automatic mode"). It means that
<code><a class="samples"
href="http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent">
config.allowedContent</a></code> is defined by loaded plugins.
Each plugin extends filtering rules to make it's own associated content
available for the user.
</p>
</div>
<textarea cols="80" id="editor1" name="editor1" rows="10">
<h1><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg"/> Apollo 11</h1> <p><b>Apollo 11</b> 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. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p> <p>Armstrong spent about <s>three and a half<
教学资源管理系统，By Java.zip （1368个子文件） 
.classpath 1KB org.eclipse.wst.common.component 475B org.eclipse.wst.jsdt.ui.superType.container 49B dx.ios.default.css 775KB xenon.css 744KB dx.ios7.default.css 311KB xenon-skins.css 267KB dx.win8.black.css 188KB xenon-core.css 185KB dx.win8.white.css 182KB dx.light.css 174KB dx.dark.css 170KB xenon-components.css 164KB uikit.gradient.css 150KB dx.android.holo-light.css 148KB dx.android.holo-dark.css 147KB uikit.almost-flat.css 146KB uikit.css 138KB bootstrap.css 128KB elusive-embedded.css 115KB bootstrap.min.css 107KB bootstrap.css 90KB dx.common.css 90KB uikit.css 84KB uikit.gradient.min.css 84KB uikit.almost-flat.min.css 81KB bootstrap.min.css 79KB uikit.min.css 75KB xenon-forms.css 68KB linecons-embedded.css 65KB uikit.css 48KB meteocons-embedded.css 38KB editor_ie7.css 37KB editor_iequirks.css 36KB editor_ie8.css 36KB editor_ie.css 35KB editor_gecko.css 35KB editor.css 34KB editor.css 34KB uikit.gradient.addons.css 32KB uikit.almost-flat.addons.css 31KB elusive-ie7.css 28KB uikit.addons.css 28KB elusive-ie7-codes.css 28KB font-awesome.css 26KB font-awesome.min.css 21KB fullcalendar.css 21KB font-awesome.min.css 20KB _all.css 20KB bootstrap-social.css 19KB select2.css 19KB bootstrap-theme.min.css 18KB dialog_ie7.css 17KB jquery.dataTables.css 17KB dialog_ie8.css 17KB dialog_iequirks.css 16KB dialog_ie.css 16KB elusive.css 16KB dialog.css 16KB uikit.gradient.addons.min.css 15KB jquery.dataTables.min.css 15KB elusive-codes.css 14KB uikit.almost-flat.addons.min.css 14KB _all.css 14KB _all.css 14KB editor_ie7.css 14KB editor_ie.css 13KB editor_iequirks.css 13KB editor_ie8.css 13KB editor_gecko.css 13KB uikit.addons.min.css 12KB spectrum.css 12KB _all.css 12KB bootstrap-responsive.css 12KB rwd-table.css 12KB jquery.dataTables_themeroller.css 12KB dropzone.css 11KB rwd-table.min.css 11KB dialog_ie.css 10KB dataTables.tableTools.css 10KB dialog_ie7.css 10KB dialog_ie8.css 10KB dialog_opera.css 10KB fullcalendar.min.css 10KB dialog_iequirks.css 10KB dialog.css 10KB templatemo_style.css 9KB bootstrap-responsive.min.css 9KB codemirror.css 8KB jquery.selectBoxIt.css 7KB dataTables.bootstrap.css 7KB toastr.css 7KB daterangepicker-bs3.css 6KB daterangepicker-bs2.css 5KB meteocons-ie7.css 5KB linecons-ie7.css 5KB toastr.min.css 5KB sample.css 5KB fullcalendar.print.css 5KB meteocons-ie7-codes.css 5KB共 1368 条
- 1
- 2
- 3
- 4
- 5
- 6
- 14
资源评论
东哥说AI
- 粉丝: 5609
- 资源: 165
下载权益
C知道特权
VIP文章
课程特权
VIP享7折，此内容立减5.97元 开通VIP
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
