<!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<
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
Java实现管理系统,包括电商系统、学生管理系统、图书管理系统、员工管理系统、宿舍管理系统、合同管理系统、酒店管理系统、资产管理系统、企业管理系统ERP等,基于SpringBoot、MySQL、MyBatis、SpringMVC、EasyUI、SSM等技术实现,适合于期末课设、毕设和工程商用。
资源推荐
资源详情
资源评论
收起资源包目录
教学资源管理系统,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
- 粉丝: 5651
- 资源: 165
下载权益
C知道特权
VIP文章
课程特权
开通VIP
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 7.(备用)180题自动计算结果(6不能用则用7).xls
- 机械设计饲料搅拌机sw18全套设计资料100%好用.zip
- DISC测试题目(详细版).doc
- DISC评分表格.xls
- Java项目:校园周边美食探索(java+SpringBoot+Mybaits+Vue+elementui+mysql)
- 明达集团招聘管理制度-终.doc
- 招聘与录用管理制度.doc
- 标准HR面试话术.doc
- 经理面试话术.doc
- 大学远程教育-计算机网络试卷题目.docx
- 技术人员面试话术.doc
- 电话邀约销售面试话术.doc
- hr电话邀约面试考察话术.doc
- 面试预约话术.doc
- python入门5个经典案例含代码示例.docx
- 基于FPGA实验板的多功能数字时钟-利用Quartus实现设计与仿真源码+课程设计报告
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功