<!DOCTYPE html>
<!--
Copyright (c) 2003-2017, 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="warning deprecated">
This sample is not maintained anymore. Check out its <a href="http://sdk.ckeditor.com/samples/acf.html">brand new version in CKEditor SDK</a>.
</div>
<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 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>
没有合适的资源?快使用搜索试试~ 我知道了~
CKeditor数学公式编辑器插件.rar
共1355个文件
png:966个
js:252个
css:38个
需积分: 5 0 下载量 124 浏览量
2023-05-24
15:55:03
上传
评论
收藏 2.76MB RAR 举报
温馨提示
富文本编辑器是基于web的文本编辑器,其功能同样可以很强大,一些功能比较强大的富文本编辑器还被称为在线的office word。CKEditor是波兰的开源的富文本编辑器,其功能非常强大,支持内容编辑和文件上传,最关键的是它是不收费的。在网页中的进行公示编辑比较麻烦,使用图片固然可以解决一时的问题,但是修改起来比较麻烦,而比较好的方法及时使用Latex。 CKEditor 官网给出的插件商店里提供了几款公式编辑器,大概比较一下: Equation Editor : 功能花哨,生成图片,关键是存储在服务器端的。 Math Editor :最近更新2013年,没配置成功 WIRIS - Math & science editor:支持手写公式,收费产品 MathEx:配置麻烦,直接略过了 Texzilla :用过一段时间,输入之后以字符串形式显示,预览的时候需要 mathjax 支持,受制于人。 某天,突然发现 Katex 也是CKEditor的一款插件,试了一下,按照官网提供的说明,下载插件Katex的压缩包,解压,放置到 plugins
资源推荐
资源详情
资源评论
收起资源包目录
CKeditor数学公式编辑器插件.rar (1355个子文件)
samples.css 64KB
editor_ie8.css 48KB
editor_iequirks.css 47KB
editor_ie.css 47KB
editor_gecko.css 46KB
editor.css 46KB
dialog_ie8.css 15KB
dialog_iequirks.css 14KB
dialog_ie.css 14KB
dialog.css 13KB
ui.css 12KB
ui.css 12KB
fui.css 10KB
fui.css 10KB
codemirror.css 8KB
fui.min.css 7KB
fui.min.css 7KB
sample.css 5KB
contents.css 3KB
outputxhtml.css 2KB
fontello.css 2KB
scrollbar.css 1KB
scrollbar.css 1KB
templates.css 1KB
copyformatting.css 1KB
wsc.css 1KB
toolbar.css 1KB
wsc.css 1KB
tableselection.css 1KB
base.css 1KB
base.css 1KB
neo.css 815B
colordialog.css 752B
show-hint.css 662B
dialog.css 396B
scayt.css 356B
page.css 153B
page.css 153B
fontello.eot 5KB
outputforflash.fla 84KB
spinner.gif 3KB
loading.gif 2KB
loading.gif 2KB
angel_smile.gif 1KB
devil_smile.gif 1KB
shades_smile.gif 1KB
angry_smile.gif 1KB
tongue_smile.gif 1KB
tounge_smile.gif 1KB
regular_smile.gif 1KB
wink_smile.gif 1KB
confused_smile.gif 1KB
teeth_smile.gif 1KB
omg_smile.gif 820B
cry_smile.gif 795B
embarrassed_smile.gif 786B
embaressed_smile.gif 786B
sad_smile.gif 782B
whatchutalkingabout_smile.gif 775B
broken_heart.gif 732B
thumbs_down.gif 715B
thumbs_up.gif 714B
heart.gif 692B
kiss.gif 683B
lightbulb.gif 660B
template3.gif 557B
template1.gif 539B
envelope.gif 506B
template2.gif 497B
hiddenfield.gif 178B
pagebreak.gif 99B
datafiltering.html 46KB
index.html 17KB
index.html 15KB
inlineall.html 10KB
outputforflash.html 10KB
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 7KB
index.html 6KB
inlinebycode.html 6KB
index.html 6KB
inlinetextarea.html 5KB
divreplace.html 4KB
uilanguages.html 4KB
enterkey.html 4KB
kityFormulaDialog.html 4KB
kityFormulaDialog.html 4KB
readonly.html 3KB
ajax.html 3KB
uicolor.html 2KB
tabindex.html 2KB
appendto.html 2KB
共 1355 条
- 1
- 2
- 3
- 4
- 5
- 6
- 14
资源评论
野生的狒狒
- 粉丝: 1496
- 资源: 1530
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功