`
Reverie夜
  • 浏览: 21407 次
  • 性别: Icon_minigender_1
  • 来自: 惠州
社区版块
存档分类
最新评论

JSP+CKEditor

    博客分类:
  • JAVA
阅读更多

首先需要下载CKEditor 和 CKEditor for java,下载地址:http://ckeditor.com/download(CKEditor for java在下面_(:з」∠)_

我下的是full(完整版),解压全部复制到WebRoot下(←位置也行,只要能引用得到)如图:



解压CKEditor for java,吧jar包放到lib中(如果发现CKFinder的东东_(:з」∠)_请无视),如图:


 然后就能使用了︿( ̄︶ ̄)︿,使用还是很简单的↓

首先要在页面中引入CKEditor的JS文件

<script type="text/javascript" src="ckeditor4.4/ckeditor.js"></script>
 由于我的页面与ckeditor的文件夹是平级的,所以直接写了~实际需根据情况改变路径~

 

然后就是使用了,其实就是替换<textarea>标签而已,有两种方法↓

eins:直接写在body中,CKEDITOR.replace()中的是name而不是id

<form action="" method="post">
       <textarea rows="100" cols="50" name="editor"></textarea>
       <script type="text/javascript">CKEDITOR.replace('editor');</script>
       <input type="button" value="保存" id="save" />
</form>
 zwei:写在js中,必须写在window.onload里,用变量edi可以方便之后的操作
    var edi = null;
    window.onload = function(){
        edi = CKEDITOR.replace('editor');
    }
 
editor.setData('_(:з」∠)_');//设置值
editor.getData();//获取值
 加载页面就能看到效果了

 至于为什么我的是绿色的~是因为这个文件→config.js 中设置了颜色
CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
	config.uiColor = '#AADC6E';
};
 
关于配置的方法自定义新建一个配置文件,然后在实例化是引入或者实例化时直接配置:
edi = CKEDITOR.replace( 'editor', {
           customConfig:'ckeditor4.4/myConfig.js'
});
 
editor = CKEDITOR.replace( 'editor', 
       uiColor: '#AADC6E',
       language:'zh-cn'
});
 还有些常用的配置如下(以下当然为转载~):
  • language,defaultLanguage,contentLanguage, uiColor
  • autoGrow_maxHeight, autoGrow_minHeight, resize_maxHeight, resize_minHeight, resize_maxWidth, resize_minWidth
  • toolbarCanCollapse, toolbarGroups
  • forcePasteAsPlainText, pasteFromWordKeepsStructure, pasteFromWordRemoveFontStyles, pasteFromWordRemoveStyles
  • font_names, fontSize_sizes
 

 

 

  • 大小: 10.8 KB
  • 大小: 11.8 KB
  • 大小: 35.7 KB
分享到:
评论

相关推荐

    ckfinder+ckeditor+jsp+批量上传图片 java版

    ckfinder和ckeditor的整合,ckfinder没有批量上传图片,我加了一个小图标,实现批量上传。网上很少java版的两个整合,自己写了个。不过有个小问题,忙着也没时间去看下,IE下上传图片报找不到路径,大家看看改下哪就...

    ckeditor+ckeditor-java+ckfinder

    【集成CKEditor+ckeditor-java+ckfinder】 在Java Web项目中集成CKEditor和CKFinder,主要步骤如下: 1. 下载并引入CKEditor和CKFinder的Java版本到项目中。 2. 配置CKEditor的Java插件,使编辑器能够调用CKFinder...

    jsp项目中使用了ckfinder+ckeditor

    3. **集成CKEditor**:在JSP页面中引入CKEditor的JavaScript库,然后通过配置CKEditor的`filebrowserBrowseUrl`和`filebrowserUploadUrl`属性,指向CKFinder的浏览和上传接口。 4. **图片居中**:CKEditor支持自定义...

    springMVC的action配置+ckeditor

    至于`geEventRegist.jsp`,这可能是一个JSP页面,用于注册CKEditor的事件监听,比如监听用户粘贴或上传图片的事件,然后触发向后端发送请求。在JSP中,可能包含CKEditor的初始化代码,比如: ```jsp ;charset=UTF-8...

    jforum+ckeditor整合案例

    通常,这会是在某个`jsp`或`ftl`文件中,比如`post.jsp`或`edit_post.ftl`。 - 替换原有的编辑器代码,引入CKEditor。这通常涉及到在HTML中添加CKEditor的初始化脚本,并设置相应的配置参数,例如宽度、高度、语言...

    jsp中使用ckeditor

    2. `ckeditor-java-core-3.5.3.jar`:这是CKEditor Java库的核心文件,包含了CKEditor与Java交互的代码,我们需要将其添加到项目的类路径中,以便在JSP页面上使用CKEditor。 3. `ckeditor-java-core-3.5.3-sources....

    关于jsp中ckeditor+ckfinder

    ### 关于JSP中ckeditor+ckfinder的知识点详解 #### 一、ckeditor与ckfinder简介 ckeditor是一款非常流行的开源富文本编辑器,广泛应用于各种Web应用程序中,它提供了丰富的文本编辑功能,如字体格式化、颜色选择、...

    CKEditor+CKFinder+jsp的整理

    CKEditor+CKFinder+jsp的整理

    jsp中ckeditor+ckfinder整合.doc

    ### jsp中ckeditor+ckfinder整合详解 #### 一、背景与需求 在进行Web开发时,经常需要处理用户输入的富文本编辑器中的内容,包括但不限于文本编辑、图片上传、文档上传等功能。传统的FCKeditor虽能满足部分需求,...

    jsp中ckeditor+ckfinder整合

    ### jsp中ckeditor+ckfinder整合详解 #### 一、前言 在现代网页开发中,富文本编辑器因其强大的编辑功能而被广泛应用于各种场景之中。其中,ckeditor是一款非常流行的开源富文本编辑器,而ckfinder则是一款优秀的...

    JSP ckeditor+ckfinder上传图片

    jsp实现ckeditor+ckfinder完成上传图片, 上传后出现图片路径/NewsImages/...请删除前面第一个/否则无法插入图片

    CKEditor 应用 源码 JSP

    在JSP(JavaServer Pages)环境中集成CKEditor,可以让用户在服务器端进行更加直观和便捷的内容创作。本资料包含了CKEditor在JSP中的应用实例,以及相关的配置和使用说明。 首先,我们来看如何在JSP中引入CKEditor...

    jsp嵌入ckeditor编辑器的例子

    该事例主要演示了如何向jsp中嵌入ckeditor编辑器。注意首先要引入ckeditor资源库。上网就可以下载。下载下来之后将其放到webRoot目录下就可以了。

    CKeditor v3.2.1 JSP增强版 - 【带Servlet上传功能+完整源码+实例】.rar

    CKeditor v3.2.1 JSP增强版是一款专为Java Web开发者设计的富文本编辑器,它在标准的CKeditor 3.2.1版本基础上进行了特定的JSP优化和扩展,添加了Servlet上传功能,使用户在网页上编辑文本时能够方便地上传图片和...

    JSP使用ckeditor和ckfinder实现富文本及文件上传

    在这个场景中,"JSP使用ckeditor和ckfinder实现富文本及文件上传"是一个常见的需求,尤其是在构建内容管理系统或者论坛等需要用户编辑和上传内容的Web应用中。 ckeditor是一款流行的开源JavaScript富文本编辑器,它...

    ckeditor+struts2上传图片

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

    JSP+FCK编辑器使用说明及中文问题

    【JSP+FCK编辑器使用说明及中文问题】 JSP+FCK编辑器是Java Web开发中常用的一款富文本编辑工具,它允许用户在网页上创建和编辑内容,类似于Word的功能,支持图片上传、链接插入等操作。FCKeditor在早期非常流行,...

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

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

    CKEditor+CKFinder的jsp实例

    1. **引入CKEditor**:在JSP页面中通过`&lt;script&gt;`标签引入CKEditor的JavaScript库。通常,你需要提供CKEditor的URL,例如: ```html &lt;script src="path/to/ckeditor/ckeditor.js"&gt; ``` 2. **初始化CKEditor**:...

Global site tag (gtag.js) - Google Analytics