`
kevin19900306
  • 浏览: 448188 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

CKEditor在JSP网页中的5种用法

阅读更多
CKEditor用法目前分为两类,一种是纯前端的替换Textarea标签实现,第二种则是使用自定义tag实现,这种方式需要导入JAR包和添加tag说明(JSP)。
使用textarea替换,其实有三种。第一种是替换CSS样式,修改class。第二种是自己现在网页里面写好textarea,然后调用JS完成替换,第三种则就是直接生成textarea标签。
记得引入JS。
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<!--这里根据实际情况来写路径,可以加上项目绝对路径,request.getContextPath()-->
<textarea class="ckeditor"  name="editor1"></textarea>
<!--这是使用class方式实现-->
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
<script type="text/javascript">CKEDITOR.replace( 'editor1' );</script>
<!--这是使用JS替换方式,如果这段代码要放到header里面的话,记得在body的onload里面调用-->
<script type="text/javascript">
var editor01 = new FCKeditor(editor01);
editor.BasePath = "/test/fckeditor/"
Editor01.create();
</script>
<!--这是使用JS生成方式,代码是老版本的代码,在新版里面已经看不到demo了所以建议不使用-->

注意:这两种实现方式要求ckeditor的目录必须在webapp下,也就是跟WEB--INF一个级别!否则无法生成!
第二类方式仅限JSP中使用,TAG方式不仅可以自己生成一个,也可以替换当前的textarea来实现。需要一个jar包,这个jar包在其官网上是可以下载到的,然后在页面里面使用如下代码:
<% 
				String value = "My first <strong>CKEditor</strong> Java tag";
				Map<String, String> attr = new HashMap<String, String>();
				attr.put("rows", "8");
				attr.put("cols", "50");
				CKEditorConfig settings = new CKEditorConfig();
				settings.addConfigValue("width", "500");
				settings.addConfigValue("toolbar", "Basic");
			%>
			<ckeditor:editor textareaAttributes="<%=attr %>"
				basePath="../ckeditor/" config="<%=settings %>"
				editor="editor1" value="<%= value %>"/>

使用替换textarea方式:
<%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
<ckeditor:replace  replace="editor1" basePath="../ckeditor/" />
分享到:
评论
1 楼 K-99 2014-05-31  
         

相关推荐

    ckEditor在jsp中的使用

    ### ckEditor在JSP中的使用详解 #### 一、引言 ckEditor是一款非常流行的富文本编辑器,它能够提供强大的文本编辑功能,包括图片上传、格式化文本等,广泛应用于各类网站和应用中。本文将详细介绍如何在JSP页面中...

    jsp中使用ckeditor

    1. `ckeditor-java-core-3.5.3-javadoc.jar`:这是CKEditor Java API的JavaDoc文档,包含了API的详细说明,用于开发者查阅API的使用方法。 2. `ckeditor-java-core-3.5.3.jar`:这是CKEditor Java库的核心文件,包含...

    CKEditor 应用 源码 JSP

    CKEditor是一款广泛应用于Web开发中的富文本编辑器,它提供了丰富的文字格式化功能,使得用户在网页上可以像在桌面应用程序中一样编辑内容。在JSP(JavaServer Pages)环境中集成CKEditor,可以让用户在服务器端进行...

    JSP网页编辑器CKEditor含图片上传功能.rar

    JSP网页编辑器CKEditor含图片上传功能,本编辑器中含有一个本地图片自动上传插件,插件使用JAVA技术开发,需要配合JavaScript使用,可以将网页中含有的本地图片(src为'file:///')自动上传到服务器并修改img标签的...

    JSP中应用CKEditor在线编辑器

    在Java Web开发中,特别是在使用JSP(JavaServer Pages)技术时,CKEditor能够提供一个用户友好的界面,使得非技术人员也能方便地编辑和格式化文本内容。下面将详细介绍如何在JSP项目中集成并使用CKEditor。 1. **...

    jspupload.rar_ckeditor java

    【标题】"jspupload.rar_ckeditor java"是一个与在Java Web环境中使用CKEditor进行文件上传相关的资源包。CKEditor是一款广泛使用的富文本编辑器,它允许用户在网页上创建和编辑内容,包括插入图片、文件等。在Java ...

    关于jsp中ckeditor+ckfinder

    接下来,只需在 JSP 页面中引用ckeditor,并进行简单的配置即可使用。 ##### 引入ckeditor 在 JSP 页面中引入ckeditor,可以通过 `&lt;script&gt;` 标签加载ckeditor.js 文件,通常路径为 `/ckeditor/ckeditor.js`。 ```...

    jsp CKEditor domo

    "jsp CKEditor domo"是一个展示如何在JSP环境中集成和使用CKEditor的实例,通过这个demo,开发者可以学习到如何提升Web应用中的文本编辑功能,同时了解JSP与JavaScript之间的数据交互以及服务器端处理富文本内容的...

    ckeditor-java-3.6.2

    3. **配置页面**:在需要使用CKEditor的JSP页面中,引入CKEditor的JavaScript文件,并通过JavaScript代码初始化编辑器,设置其ID和初始内容。 4. **服务器交互**:通过AJAX或者表单提交,将编辑器中的内容发送到...

    ckeditor使用

    ### CKEditor 使用详解 #### 一、CKEditor 简介 CKEditor(原名 FCKeditor)是一款功能强大且广泛使用的开源富文本编辑器。...对于开发人员来说,熟练掌握 CKEditor 的使用方法和配置技巧将极大地提高工作效率。

    CKEditor配置好的MyEclipse实例

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

    ckeditor的用法

    ### CKEditor与CKFinder在HTML网页编辑中的应用 #### 一、CKEditor简介 CKEditor是一款功能强大且灵活的富文本编辑器,广泛应用于各种Web应用程序中。它提供了丰富的文本编辑功能,如字体样式调整、段落对齐、图片...

    ckeditor+struts2上传图片

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

    springMVC的action配置+ckeditor

    总结来说,这个资源提供了一种集成SpringMVC和CKEditor的方案,允许用户在CKEditor中方便地粘贴和上传图片。通过后端的适当配置,可以确保图片数据安全地存储在服务器,并在CKEditor中正确显示。这种集成对于需要...

    Laravel5.6框架使用CKEditor5相关配置详解

    在Laravel5.6框架中集成CKEditor5,开发者可以为用户提供一个富文本编辑器,从而增强内容编辑体验。CKEditor5是一款现代、强大的文本编辑器,支持多种格式和功能,如图片上传、样式设置等。以下是对配置CKEditor5在...

    ckeditor3.2编译器

    在提供的`ckeditor用法.txt`文件中,应该包含了ckeditor的详细使用教程和示例代码,可以参照这个文档来快速上手和理解ckeditor的使用方法。 总结来说,ckeditor3.2是网页内容编辑的理想选择,它以其强大的功能、...

    ckeditor demo

    例如,如果你使用的是Servlet,你可以在`doPost`方法中获取编辑器的内容: ```java protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { ...

    ckeditor上传图片

    CKEditor是一款广泛使用的开源富文本编辑器,它允许用户在网页上创建和编辑复杂的文档,包括文本、图像、链接等元素。"ckeditor上传图片"这个主题主要涉及的是CKEditor与服务器端交互,实现图片的上传功能。下面我们...

Global site tag (gtag.js) - Google Analytics