CKEditor的使用示例

CKEditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器。以前叫FCKEditor。

1、到官网下载CKEditor：http://ckeditor.com/download ，解压后复制到工程的WEBROOT目录下。

2、新建JSP页面，引用其JS文件<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

3、用CKEditor替代textarea：

<textarearows="30"cols="50"name="editor01">请输入.</textarea>

4、用CKEditor替代textarea，有两种方法，相应的javascript代码如下：

在textarea后面加入javascript：

<scripttype="text/javascript">CKEDITOR.replace('editor01');</script>

或

在加载后调用响应的方法：

<scripttype="text/javascript">window.onload=function()
    {
        CKEDITOR.replace('editor01');
    }; </script>

配置完成，效果如下图：

该编辑器是默认配置，显示了所有工具栏，可使只显示需要的工具栏；编辑框的背景颜色等也可以调整。替代textarea的javascript如下：

function window.onload() {    //页面加载完成后执行以下表达式CKEDITOR.replace( 'noticeContent',{uiColor : '#ccccff',toolbar :[ { name: 'document', items : ['Save','DocProps','Preview','Print'] },{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] }, { name: 'basicstyles', items : ['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl'] },{ name: 'links', items : [ 'Link','Unlink','Anchor' ] }, { name: 'insert', items: ['Table','HorizontalRule','SpecialChar','PageBreak' ]}, { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] }, { name:'colors', items : [ 'TextColor','BGColor' ] },{ name: 'tools', items : [ 'Maximize' ] } ]});    }

修改后，效果如下：

其中toolbar的完整内容如下，工具按钮是分组的，一个name内的大括号就是一个工具按钮分组，items后边是具体的按钮，我们可以对这些内容进行适当的删除：

function window.onload() {    //页面加载完成后执行以下表达式CKEDITOR.replace( 'noticeContent',{toolbar :[ { name: 'document', items : ['Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] }, { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, { name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] }, { name: 'forms', items : [ 'Form', 'Checkbox', 'Radio','TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] }, '/', { name: 'basicstyles', items : ['Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl'] }, { name: 'links', items : [ 'Link','Unlink','Anchor' ] }, { name: 'insert', items: ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ]}, '/', { name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] }, { name:'colors', items : [ 'TextColor','BGColor' ] }, { name: 'tools', items : [ 'Maximize','ShowBlocks','-','About' ] } ]});}

CKEditor的基本使用就是这样了。

使用CKEditor编辑的信息可能会很大，当大于4000时，oracle的varchar2类型无法再满足，可以使用clob类型，使用方法详见：oracle中clob类型的使用

CKEditor的使用示例相关推荐

Ckeditor+Ckfinder+Ext4 整合
@author:杨虹昌原文地址:http://blog.csdn.net/yanghongchang_/article/details/12778695 时间:2013年10月15日 CSDN讨论组 ...
oracle中clob类型的使用
oracle数据库当需要存入大数据量(大于4000)时,varchar2不够用,可以使用clob,本文描述clob怎么和Hibernate一起使用. 以公告Notice的公告内容noticeConte ...
CKEditor快速介绍与入门示例
CKEditor 富文本编辑器 CKEditor 是一款知名的WYSIWYG富文本Web编辑器,WYSIWYG 的全称是what you see is what you get,也就是所见即所得. 富 ...
ckeditor上传图片示例
1.修改config.js CKEDITOR.editorConfig = function (config) {// Define changes to default configuration ...
CKeditor 配置使用
CKeditor 配置使用一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <script type="text/javascr ...
CKEditor+CKFinder配置学习
CKEditor+CKFinder配置学习基于dotNetFramework环境, 解决方案部署在VS2010 + dotNetFramework4.0 [下载源码] 富文本编辑器学习,常见富文本编 ...
phpeditor编写php_在php中使用CKEDITOR在线编辑器
一.官方Download 1.CKEditor:点击CKEditor.NET标题下的"Download zip"按钮下载的文件:ckeditor_aspnet_3.6.2.zip ...
富文本编辑器ckeditor的使用
Ckeditor下载地址:http://ckeditor.com/download 一.使用方法: 1.在页面<head>中引入ckeditor核心文件ckeditor.js <sc ...
ckeditor 4.2.1_演示 ckeditor 上传插入图片
本文内容 FineUI ckeditor fckeditor/ckeditor 演示 ckeditor 4.2.1 上传&插入图片最近看了一下 FineUI_v3.3.1 控件,对里边的 c ...

CKEditor的使用示例

CKEditor的使用示例相关推荐

最新文章

热门文章