`
chrissie
  • 浏览: 20112 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

CKEditor的安装与基本使用(JSP)

阅读更多

一、下载CKEditor

       1. 直接下载地址,当前最新版本为3.5:

       http://download.cksource.com/CKEditor/CKEditor/CKEditor%203.5/ckeditor_3.5.zip

       2. 或者可直接到官方网站下载:

       http://ckeditor.com/download

 

二、安装CKEditor

       解压ckeditor_3.5.zip,得到ckeditor文件夹,将ckeditor整个文件夹复制到项目工程的根目录下,即WebRoot下

 

三、验证CKEditor是否安装成功

       部署运行项目,访问: http://localhost/项目名称/ckeditor/_samples/index.html

       则可出现 “CKEditor Samples List” 的Demo页面,说明CKeditor已安装成功

 

四、应用CKEditor

       1. 导入JS文件

            <script type="text/javascript" src="<%=request.getContextPath()%>/ckeditor/ckeditor.js"></script>

 

       2. 创建和使用CKEditor

 

<textarea class="ckeditor" cols="80" id="content" name="content" rows="10">
      CKEditor Test......(此处的内容会在编辑器中显示)
</textarea>

<script type="text/javascript">
//<![CDATA[
	CKEDITOR.replace('content',{toolbar:'Full', skin : 'kama'});
//]]>
</script>
 

 

        说明:

         1) textarea属性值 name="content": 名字可随意定义,但必须与下面的CKEDITOR.replace('content');匹配

 

         2) CKEDITOR.replace('content');是最基本的写法,表示使用CKEditor的JavaScript API创建的编辑器实例,

替换上面的textarea

若要为CKEditor增加一些属性设置,则其属性必须写在{}花括号内,

如上{toolbar:'Full', skin : 'kama'}

具体的属性网上很多文章均可搜索到,这里不累述了。

 

        3) 上面的textarea后面的“CKEDITOR.replace('content');”脚本也可以写在<head></head>标签内

 

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

 

 

五、获取编辑器里的数据

      有时在提交表单时,需要判断下编辑器里的内容是否为空,这时可使用CKEditor的JavaScript API:

      CKEDITOR.instances.content.getData()      

 

function test() {
    var editor_data = CKEDITOR.instances.content.getData();
    if(editor_data==null || editor_data==""){
        alert("请填写内容!");
        return false;
    }
}

       注意:如果你在编辑器里打了一堆的空格,内容是不为空的,因为编辑器会把你打的空格都转换成&nbsp;

 

至此,CKEdiotr编辑器即可在页面上显示与使用。

 

补充说明:如果你的项目中使用struts2等框架,也可根据上面textarea的属性name="content"来获取编辑器里的内容,最好使用BLOB来存储。

分享到:
评论
1 楼 rockge 2011-09-29  
很不错 

相关推荐

    ckEditor在jsp中的使用

    通过上述步骤,我们可以在JSP页面中成功集成ckEditor,并实现基本的富文本编辑功能。ckEditor的强大之处在于其高度的可配置性和灵活性,开发者可以根据具体项目的需求进行细致的调整。此外,ckEditor还提供了丰富的...

    ckeditor jsp 上传图片例子 免费下载

    首先,我们要了解CKEditor的基本使用。CKEditor是一个基于JavaScript的开源富文本编辑器,可以嵌入到网页中,允许用户以WYSIWYG(所见即所得)的方式编辑内容。它提供了多种插件,其中包括图片上传插件,使得用户...

    ckeditor_3.0.1的使用

    - 在JSP页面中使用CKEditor,首先需要下载并解压CKEditor 3.0.1的压缩包,包含js、css、images等资源文件。 - 引入CKEditor的JavaScript库,通常将`ckeditor.js`文件链接到JSP页面的`&lt;head&gt;`部分,确保在编辑器...

    ckeditor简单实例

    首先,我们需要了解CKEditor的安装与引入。CKEditor通常通过下载官方的压缩包或通过npm等包管理器获取。在这个实例中,我们看到有一个名为"ckeditor"的文件,这可能包含了CKEditor的基本文件,包括JavaScript库和...

    CKEditor配置好的MyEclipse实例

    3. **引入CKEditor到页面**:在需要使用CKEditor的JSP或HTML页面中,通过`&lt;script&gt;`标签引入CKEditor的JavaScript文件。例如: ```html &lt;script src="ckeditor/ckeditor.js"&gt; ``` 4. **初始化CKEditor**:在页面...

    ckeditor的例子

    1. **安装与集成**:理解如何在项目中引入CKEditor,包括下载、解压、引用相关JS和CSS文件,以及在HTML页面中初始化编辑器。 2. **基本配置**:了解CKEditor的配置选项,如工具栏设置、语言选择、皮肤更换等,以...

    ckeditor_3.2.1

    CKEditor 3.2.1不仅提供了基本的文字输入功能,还囊括了丰富的格式化选项,使得用户在网页上编辑文本时,能够享受到与桌面应用相似的体验。 首先,CKEditor 3.2.1的核心特性在于其对HTML内容的强大支持。通过这个...

    ckeditor-java-3.6.4.zip

    - `index.jsp`:这是示例页面,通常会展示CKEditor的基本用法和功能,用户可以通过这个页面快速了解如何在实际项目中使用CKEditor。 - `_samples`:这个目录包含了各种使用示例,展示了CKEditor的不同配置和功能...

    ckeditor的用法

    通过上述内容,我们可以看到CKEditor与CKFinder的强大功能及其在实际应用中的配置与使用技巧。无论是简单的文本编辑还是复杂的文件管理,这两款工具都能够提供优秀的解决方案,极大地提升了Web开发的工作效率。

    ckeditor+struts2上传图片

    在IT行业中,富文本编辑器(如CKEditor)与MVC框架(如Struts2)的结合使用是常见的应用场景,特别是在构建Web内容管理系统时。CKEditor是一款强大的在线文本编辑器,提供丰富的文字编辑功能,而Struts2则是一个Java...

    ckeditor学习笔记

    对于初学者而言,掌握CKEditor的基本使用及一些高级功能是非常重要的。 #### 二、CKEditor基础介绍 CKEditor是一款基于JavaScript的富文本编辑器,它可以方便地集成到各种Web应用中。通过提供一系列易于使用的工具...

    Struts2整合CKeditor

    2. **CKeditor集成**:在网页的JSP或HTML文件中,你需要引入CKeditor的JavaScript库,并通过其API设置编辑器的基本属性,如工具栏、语言等。同时,配置CKeditor的URL以指向CKfinder,使编辑器能够调用文件管理器。 ...

    ckeditor_java_3.5.3和ckfinder_java_2.0.2配置程序案例

    2. **在JSP页面中引入CKEditor**:在需要使用编辑器的JSP页面中,通过`&lt;script&gt;`标签引入CKEditor的JavaScript文件,并初始化编辑器实例。 ```jsp &lt;script src="ckeditor/ckeditor.js"&gt; CKEDITOR.replace('editor...

    运用CKEditor_Finder的在线编辑器

    1. **CKEditor的基本使用**:理解CKEditor的安装、配置和基本API,了解如何自定义编辑器的样式和功能。 2. **JSP基础**:了解JSP的语法和生命周期,以及如何在JSP页面中嵌入JavaScript代码。 3. **AJAX交互**:掌握...

    在线文本编辑器ckeditor3.6.2 for JAVA

    在线文本编辑器是网页开发中不...总的来说,CKEditor 3.6.2 for Java为Java开发者提供了一种强大的富文本编辑解决方案,既满足了基本的文本编辑需求,也提供了高度的定制性和可扩展性,是构建内容管理系统的理想选择。

    ckeditor文本框控件

    CKEditor不仅支持基本的文字输入,还包含了诸如插入图片、超链接、格式化文本、添加表格等高级特性,极大地提升了用户体验。 1. **CKEditor介绍** CKEditor是一款开源的JavaScript库,适用于多种编程语言如.NET和...

    jsp页面实现文本编辑框所需插件

    以上就是使用JSP页面实现类似Word的文字编辑功能,通过CKEditor插件的基本步骤。在实际开发中,你可能需要根据项目需求进一步定制编辑器,如处理表单提交、处理图片上传、自定义样式等。了解和熟练掌握CKEditor的...

    ckfinder 和 ckeditor

    1. **安装和配置CKEditor**:首先,你需要下载CKEditor的JSP版本,并将其解压到你的项目目录下。然后,通过引入相应的JavaScript和CSS文件,将编辑器添加到JSP页面中。 2. **配置CKFinder**:CKFinder需要一些配置...

Global site tag (gtag.js) - Google Analytics