<!DOCTYPE html>
<!--
Copyright (c) 2003-2015, 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</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to
用于学习php+mysql+bootstrap搭建的简单博客系统。.zip
需积分: 5 67 浏览量
2024-02-24
21:17:43
上传
评论
收藏 1.07MB ZIP 举报
用于学习php+mysql+bootstrap搭建的简单博客系统。.zip （303个子文件） 
bootstrap.min.css 115KB editor_ie7.css 37KB editor_iequirks.css 36KB editor_ie8.css 36KB editor_ie.css 35KB editor_gecko.css 35KB editor.css 34KB dialog_ie7.css 17KB dialog_ie8.css 17KB dialog_iequirks.css 16KB dialog_ie.css 16KB dialog.css 16KB sample.css 5KB outputxhtml.css 2KB contents.css 2KB toolbar.css 1KB wsc.css 1KB style.css 177B
outputforflash.fla 84KB
datafiltering.html 34KB inlineall.html 9KB outputforflash.html 9KB toolbar.html 8KB magicline.html 8KB fullpage.html 8KB jquery.html 7KB dialog.html 7KB outputhtml.html 7KB api.html 7KB replacebyclass.html 7KB replacebycode.html 7KB xhtmlstyle.html 6KB inlinebycode.html 6KB index.html 5KB inlinetextarea.html 5KB divreplace.html 4KB uilanguages.html 4KB enterkey.html 4KB readonly.html 3KB ajax.html 2KB uicolor.html 2KB tabindex.html 2KB appendto.html 2KB tmpFrameset.html 2KB ciframe.html 2KB header.html 1KB footer.html 532B index.html 409B
sample.jpg 14KB 1.jpg 3KB ckeditor.js 474KB jquery-2.1.1.min.js 82KB wsc.js 38KB bootstrap.min.js 35KB km.js 22KB ka.js 21KB image.js 20KB gu.js 19KB th.js 18KB el.js 18KB ru.js 17KB uk.js 17KB ug.js 17KB ku.js 16KB si.js 16KB bg.js 16KB hi.js 16KB bn.js 15KB fa.js 15KB mn.js 14KB ar.js 14KB tt.js 14KB sr.js 14KB he.js 14KB default.js 14KB vi.js 13KB ja.js 13KB ro.js 12KB fr.js 12KB hu.js 12KB pt-br.js 12KB pt.js 12KB es.js 12KB lv.js 12KB sq.js 12KB fr-ca.js 12KB sk.js 12KB ca.js 12KB pl.js 12KB gl.js 12KB cs.js 12KB lt.js 12KB it.js 12KB de.js 12KB tr.js 12KB eu.js 12KB ko.js 11KB nl.js 11KB fo.js 11KB fi.js 11KB共 303 条
- 1
- 2
- 3
- 4
资源评论
Kwan的解忧杂货铺
- 粉丝: 2w+
- 资源: 3699
最新资源
- 嵌入式复习-第鸠章 中断及应用
- 嵌入式复习-第八章 定时器原理及应用
- 嵌入式复习-第七章 GPIO原理及应用
- 编译原理课程设计 WHILE循环语句的翻译程序设计实现（LL（1）法、输出四元式）-带报告书
- MFC实现的左推导树右推导树+LR(0)分析
- Linux Kernel Networking: Implementation and Theory (2014)
- 编译原理大作业:类似C语言的编译器设计与实现-支持加减乘除转换 print 输出转换 if 条件转换 赋值语句转换
- 高分项目，基于Unity3D开发实现的三国群英传-武将天赋版，内含完整源码+资源
- vuInhub靶场实战系列-Kioptrix Level #3
- 高分项目，基于Unity3D开发实现的MMORPG KIT，内含完整源码+资源+unitypackage
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
