CKEditor 3.0 配置 使用
2009-09-11 21:17
CKEditor 3.0安装配置,感觉比较简单,但本次没有涉及上传文件的配置,下篇文章将写一下如何将CKEditor的兄弟产品:ckfinder 功能强大的上传文件管理器整合进 CKEditor3.0
下载CKEditor 3.0,地址:http://ckeditor.com/
首先,下载下来解压后,把文件夹ckeditor放到你的站点。
其次,在你的网页里面加入下面脚本:
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
注意红色部分,这里根据你自己的编辑器路径修改,请务必配置正确。
再次,在需要引用CKEditor编辑器的地方加入下面代码:
- <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
- 这里是内容
-
</textarea>
- 如果你是ASP.NET开发人员 可以写成:
-
<textarea class="ckeditor" id="txtContent" runat="server" name="txtContent"></textarea>
-
-
-
-
<textarea cols="80" id="editor1" name="editor1" rows="10">
- 这里是内容
-
</textarea>
-
lt;script type="text/javascript">
- CKEDITOR.replace( 'editor1' );
-
lt;/script>
<textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10">
这里是内容
</textarea>
如果你是ASP.NET开发人员 可以写成:
<textarea class="ckeditor" id="txtContent" runat="server" name="txtContent"></textarea>
或者:
<textarea cols="80" id="editor1" name="editor1" rows="10">
这里是内容
</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1' );
</script>
这样,一个编辑器就基本可以使用了。
--------------------------------------------------
配置属于自己的编辑器,配置Config.js文件(官方给出配置的几种方法,详见参考官方文档)如下:
http://docs.fckeditor.net/ckeditor_api/symbols/CKEDITOR.config.html#.autoUpdateElement
用记事本打开config.js文件,可看到下面代码:
- CKEDITOR.editorConfig = function( config )
- {
-
-
config.language = 'zh-cn';
-
-
-
config.height = 400;
-
config.skin='v2';
-
- config.toolbar =
- [
-
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
-
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
-
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
-
['Link','Unlink','Anchor'],
-
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
-
'/',
-
['Styles','Format','Font','FontSize'],
-
['TextColor','BGColor'],
-
['Maximize', 'ShowBlocks','-','Source','-','Undo','Redo']
-
- ];
- };
CKEDITOR.editorConfig = function( config )
{
// Define changes to default configuration here. For example:
config.language = 'zh-cn'; //配置语言
//config.uiColor = '#FFF'; //背景颜色
//config.width = 500; //宽度
config.height = 400; //高度
config.skin='v2';
//工具栏
config.toolbar =
[
['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
'/',
['Styles','Format','Font','FontSize'],
['TextColor','BGColor'],
['Maximize', 'ShowBlocks','-','Source','-','Undo','Redo']
];
};
为了减少编辑器的大小,可以删除一些不必要的文件,如把_samples、_source、_tests三个文件夹删除,进入lang文件目录,保留en.js、zh.js、zh-cn.js三个文件,其余的语言文件如果你用不到,可以删除。
相关推荐
CKEditor3.0稳定版,从国内官网下载的最新版本好像不太好用,这个版本也是从其他网站下载的,个人感觉还挺好像的,界面也蛮好看。
CKeditor3.0详细配置[定义].pdf
CKEditor3.0 CKEditor CKfinder 编辑器 上传 我自己整合的!
CKFinder 1.4 下载地址:http://ckfinder.com/CKEditor3.0 下载地址:http://ckeditor.com/实例: 代码如下: <textarea id=”Textarea1″ name=”editor1″ rows=”10″ cols=”80″></textarea> ...
CKEditor即大名鼎鼎的...这应该是和它的开发公司CKSource的名字有关吧,该公司的另一个产品为CKFinder(一个Ajax文件管理器),这次可能为了保持一致,将FCK更改为CK,但是版本号继承了下来,为CKeditor3.0版。
看完YaSin写得“将CKfinder 整合进 CKEditor3.0 ”之后,我总觉得问题有点复杂,尤其是修改压缩了的js文件。
FCKeditor是sourceforge.net上面的一个开源项目,主要是实现在线网页编辑器的功能,可以让web程序拥有如MS Word这样强大的编辑功能。官方网站为http://www.fckeditor.net ,在服务器端... 这里是最新版的ckeditor3.0
比较好CKeditor v3.0 最新版(PHP)
ckeditor_3.0 最好最新的网站文本编译器
最近项目开发需要用到CKEditor在线编辑器,但发现他本身没有自带,所以需要自己手动配置插件。但网上很多配置都有问题,自己摸索了好久终于搞定。需要注意的细节有:flvPlayer文件夹的内容直接放在ckeditor文件夹...
ckeditor的详细配置,ckeditor是FCKeditor的最新版本,支持各种浏览器。
CKeditor配置使用[参照].pdf
ckeditor的配置实用
ckeditor配置(详细)内涵详细使用说明
这是一个非常有用的在线编辑工具,里内包含了具体配置方法
ckeditor5 v19完整配置文件,含教程及源文件,index.html调用文件及配置文件为单独文件,可以用于复制替换及学习,提醒个别插件必须在网站调试模式下才能正常显示工具,ckfinder需要自行从网上下载,默认为放在网站...
ckeditor 配配置文件
CKFinder是一款基于AJAX的文件浏览器,这是ASP.NET专用版,它可以在线浏览文件、管理文件、上传文件,以树形Tree的方式展开目录,自动检测图片并生成缩略图,它是由Fckeditor公司出品,同时也可配合FckEditor来使用,...