CKEditor onblur 事件
CKEDITOR.instances.YOUR_TEXTAREA_ID.on('blur', function() {
alert('onblur 123');
});
一、简介
CKEditor即大名鼎鼎的FCKeditor,它终于在最近发布新版本了,与增加版本号不同,这次完全把它改名了,更名为CKeditor。这应该是和它的开发公司CKSource的名字有关吧,该公司的另一个产品为CKFinder(一个Ajax文件管理器),这次可能为了保持一致,将FCK更改为CK,但是版本号继承了下来,为CKeditor3.0版。
二、官方手册
官方手册地址:http://docs.cksource.com/CKEditor_3.x/Developers_Guide
三、基本的使用
1、先下载(下载地址:http://ckeditor.com/)、解压将其中的ckeditor文件夹放到你的网站根目录下,或者是你指定的项目中都可以,可以浏览_sample文件夹中的内容查看ckeditor的demo。
2、将ckeditor加载到你的页面中:
由于CKEditor是一个Javascript的应用,所有我们加载它仅需要在页面中将它引用进来:
<head>
...
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
这样ckeditor就可以被我们使用了!
3、创建一个CKEditor的实例:
CKEditor借用textarea来传输他的数据到服务器,但是这个textarea对用户是透明的,我们可以这样使用:
<textarea name="editor1"><p>Initial value.</p></textarea>
现在我们在利用EKEditor的Api来"替换"textarea成一个CKEditor实例:
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
注意,这段js代码必须要在textarea html代码段加载之后执行,所有我们可以将这段直接放到<textarea>之后:
<textarea name="editor1"><p>Initial value.</p></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
或者是当页面加载完成时候执行它:
<head>
..
<script type="text/javascript">
window.onload = function(){
CKEDITOR.replace( 'editor1' );
};
</script>
</head>
<html>
..
<textarea name="editor1"><p>Initial value.</p></textarea>
</html>
4、服务器端接收CKEditor传过来的数据:
同我们之前讲的一样,Ckeditor就类似于一个textarea,所我们可以在服务器端这样接收客户端POST过来的数据:
<?php
$editor_data = $_POST[ 'editor1' ];
?>
有时候,一些应用(像Ajax)需要在客户端出来ckeditor的数据,我们可以使用ckeitor的api很容易的这样做到:
<script type="text/javascript">
var editor_data = CKEDITOR.instances.editor1.getData();
</script>
5、最后放一个完整的例子:
<html>
<head>
<title>Sample - CKEditor</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
</head>
<body>
<form method="post">
<p>
My Editor:<br />
<textarea name="editor1"><p>Initial value.</p></textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
</p>
<p>
<input type="submit" />
</p>
</form>
</body>
</html>
1、创建一个editor实例:
先把jquery和ckeditor的js文件包含进来(jquery.js已经在我们下载的ckeditor文件夹中了):
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/ckeditor/adapters/jquery.js"></script>
然后我们可以在任何<textarea>、<p>、<div>元素都能被转换成在线编辑器,仅需要其对象的ckeditor()方法:
$( 'textarea.editor' ).ckeditor();
obj.ckeditor([callback[,options]]),ckeditor()包含两个参数,第一个是当editor编辑器执行完成时的回调函数,第二个参数是作为
所创建编辑器实例的配置,
$('.jquery_ckeditor').ckeditor( function() { /* callback code */ }, { skin : 'office2003' } );
在每一个回调函数中的$(this)是指代当前的CKEditor编辑器对象。
一旦编辑器实例被创建(即回调函数被调用的时候),可以利用ckeditorGet()来获取一个CKEditor的编辑器对象,同样我们也可以通过
val()方法来获取指定CKEditor中的值:
//获取ckeditor对象
var editor = $('textarea.editor').ckeditorGet();
alert( editor.checkDirty() );
由于获取和设置编辑器的值是很普遍的操作,所有ckeditor编辑器提供了val()操作:
//获取编辑器对象中的值
var data = $( 'textarea.editor' ).val();
//设置编辑器中的值
$( 'textarea.editor' ).val( 'my new content' );
这个方法能通过在加载Jquery Adapter之前,设置CKEDITOR.config.jqueryOverrideVal为false来禁止
对于textarea,当表单提交时候,编辑器editor将自动的返回它的内容。
五、CKEditor的配置文件
1、简介:
我们可以通过CKEditor的配置文件来使它适应我们的应用,主要的配置文件就是config.js,可以在我们下载的文件夹中找到!
2、可用的配置:
所有可用的配置都可以在文档http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html中找到
3、在页面中定义配置:
最后的方法是在我们创建我们的编辑器实例的时候来设置它的基本配置!这样可以避免接触源文件,也方便以后的升级。
在页面中我们可以通过CKEDITOR.replace和CKEDITOR.appendTo来设置:
CKEDITOR.replace( 'editor1',
{
toolbar : 'Basic',
uiColor : '#9AB8F3'
});
4、使用config.js文件
我们同样可以同过CKEditor中的congfig.js文件来进行配置,在config.js文件中,这个文件下下来其中就是一个空函数,我们可以对其
进行编辑:
CKEDITOR.editorConfig = function( config ){
config.language = 'fr';
config.uiColor = '#AADC6E';
};
我们也可以用我们自己的配置:
CKEDITOR.replace( 'editor1',{
customConfig : '/custom/ckeditor_config.js'
});
其中的js文件必须要和默认配置文件中的设置一样!
5、配置覆盖规则:
a.当edtitor实例被创建之后,在这一配置都都设置;
b.如果用户在页面中设置好了editor的配置,优先加载页面中的配置,再加载外联配置文件中的配置
6、避免加载扩展的设置文件:
CKEDITOR.replace( 'editor1', {
customConfig : ''
});
六、CKEditor的Toolbar设置:
1、简介:由于针对不同的用户需求,不是所有的属性都需要,所有我们可以定制化我们的Toolbar!
2、工具栏的定义其实就是一个js数组,包含了所有的可显示的东西,我们有两种方法来配置我们的工具栏:一种是直接设置到默认的工
具栏数组中,还有一种就是定制我们自己的工具栏,其格式要是toolbar_<name>,然后这个name就可以被我们通过toolbar设置在页面中
了。(其中的'-'代表分割符!'[]'代表一组设置!'/'代表的换行,即让几个块工具栏在同一行中!)
默认的:
config.toolbar_Full =
[
['Source','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
'/',
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','About']
];
config.toolbar_Basic =
[
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];
3、自定义我们的工具栏:
一个简单的方法就是通过config.js文件,直接加入我们的配置,或者更好的就是另外建立一个我们的自定义的配置文件,然后把它加载
进来:
CKEDITOR.editorConfig = function( config )
{
config.toolbar = 'MyToolbar';
config.toolbar_MyToolbar =
[
['NewPage','Preview'],
['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format'],
['Bold','Italic','Strike'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['Link','Unlink','Anchor'],
['Maximize','-','About']
];
};
然后,你可以根据你的用户需求给予他们不同的工具栏:
CKEDITOR.replace( 'editor1',
{
toolbar : 'MyToolbar'
});
CKEDITOR.replace( 'editor2',
{
toolbar : 'Basic'
});
另一个方法就是直接在我们的页面中设置,即toolbar设置项:
CKEDITOR.replace( 'editor1',
{
toolbar :
[
['Styles', 'Format'],
['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
]
});
分享到:
相关推荐
此文件是CKEditor3.x在的配置使用,主要是正对JAVA项目的 CKEditor本身不支持图片上传功能,此文档将描述如何配置和使用图片上传 其中图片上传支持FTP服务器功能,和压缩指定大小的功能。
ckeditor3.x 支持自定义上传,媒体预览 ,采用flvplayer、jwplayer方式,自己刚刚实现成功,后台代码自己补全,我的是java代码就不提供了
在网上找了半天,看见两偏整合教程不错,把两偏整理成一偏供参考。 别人一个文档就要10分才能下,本人分不多了,扣大家5分来赚取回来。...Ckeditor3.X与ckfinder2.X整合forJAVA (支持文件上传,解决中文乱码)
ckeditor_4.x 基于4.x版的自定义按钮控件 可自定义图片按钮、文本按钮 - 详细配置
编辑能力极强,基本和word差不多了。看起来界面极其优秀的一款。 有简洁大方的UI界面,轻量级。官网上有文档可学习使用。
) Rails 5.x,4.2.x集成文件浏览器HTML5文件上传器用于formtastic和simple_form表单生成器的钩子与授权框架和集成安装对于基本用法,只需包含ckeditor gem: gem 'ckeditor'或者,如果您想使用Github的最新版本:...
用于最新CKEditor4.0的行距插件,不能用于CKEditor3.X.X及以前版本
鼎鼎大名的FCKEditor的最新版本。谁用谁知道。 注意这个是使用手册,E文的,代码请到www.ckeditor.com下载
早在 2009 年 9 月, 将 FCK 2 拼写页面功能移植为 CKEditor 3.x 的插件。不幸的是,该版本不适用于 CKEditor 4。 我已经修改了 ckeditor3 版本并对其进行了调整,以便它可以与 CKEditor 4 一起使用。我已经合并了...
CKEditor是新一代的FCKeditor,是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一,因其惊人的性能与可扩展性而广泛的被运用于各大网站。
(ckeditor4.x和ckfinder2.x)php,js版 ckeditor有多插件(img2,uploadfile)
从剪帖板,本地硬盘,第三方软件或Word文档中复制图片,然后点击编辑器工具栏中的”粘贴图片”按钮。图片将自动上传到Web服务器中.
ckeditor 4.x 最新版本,含全部插件,支持字体,颜色,图片上传。
ExtJS 4.x + CKEditor 这是一个简单的页面,它使用了 ExtJS 中使用的的包装器。如何使用(非MVC) 请参阅包含的示例 index.html 文件。如何使用 (MVC) 通过本地下载的副本或通过 CKEditor CDN 包含 CKEditor。 将 js...
.NET环境下ckeditor与ckfinder配置(附ckfinder1.x注册机)
Angular(2.x +)的CKEditor组件 用法 安装 导入CKEditor js文件 < script src =" //cdn.ckeditor.com/4.7.1/full/ckeditor.js " > </ script > 安装ngx-ckeditor npm i -S ngx-ckeditor 样本 在您的...
ext-2.3.0+CKEditor 3.0.1+ckfinder_asp_1.4配置详解 一、去http://cksource.com/下载这两个东西 二、去http://www.extjs.com/下载ext-2.3.0 三、将ext-2.3.0、CKEditor 3.0.1、ckfinder_asp_1.4,取出解压后的...
CKeditor编辑器是FCKeditor的升级版本想对于FCK来说,确实比较好用,加载速度也比较快以下是如果通过JS获取CKeditor编辑器的值,用于表单验证 if(CKEDITOR.instances.content.getData()==””){alert(“内容不能...
Droploader - CKEditor 的图片上传插件该插件允许使用标准文件上传后端通过拖放到编辑器窗口来上传一张或多张图像。 此功能将与 CKEditor 4.5 捆绑在一起,该插件首次发布时处于测试阶段。 然而,新的捆绑插件使用了...