当前位置:文档之家› ckeditor配置大全

ckeditor配置大全

ckeditor配置大全
ckeditor配置大全

前言

因为项目中在传输大数据时,需要各种格式的数据,所以在页面选择了使用ckeditor编辑器,我是从官网下载的最新的版本,经过5天的奋战,终于搞定,实现了ckeditor的基本配置和自定义的图片上传功能,善于总结,才能进步嘛,所以写下此篇,希望能帮到需要的人……

软件准备

Ckeditor:

ckeditor_3.6.3 下载地址去官网吧呵呵我懒得写了百度下就可以找到

jquery:

jquery-1.2.7 官网下载吧版本无所谓的这个是我用的版本

ajaxfileupload.js jquery文件上传插件官网下载吧

ckeditor配置

1.把ckeditor文件夹放到自己工程的js目录下,然后在自己需要ckeditor的页面引入:

新建一个文本域放置编辑器:

通过js代码把ckeditor编辑器放置到上面的文本域中:

var editor = CKEDITOR.replace('content');

现在访问这个页面,可以看到下图:

文本域已经被编辑器替换。

2.通过config.js来配置编辑器的外观、语言显示、按钮显示等等。

我的配置文件如下:

CKEDITOR.editorConfig = function( config )

{

// Define changes to default configuration here. For example:

https://www.doczj.com/doc/0d17533719.html,nguage = 'zh-cn';

// config.uiColor = '#AADC6E';

// 设置宽高

config.width = 860;

config.height = 300;

config.skin = 'v2'; //共有3中皮肤可选择:kama(默认)、office2003、v2

// 工具栏(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js config.toolbar = 'Basic';

config.toolbar = 'Full';

config.toolbar_Full = [

['Source','-','NewPage','Preview','-','Templates'],

['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print',

'SpellChecker', 'Scayt'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat '],

['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],

'/',

['Bold','Italic','Underline','Strike','-','Subscript','Superscrip t'],

['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']

];//以上配置自己需要用到的按钮,按钮代码可以去网上找呵呵

};

CKEDITOR.on('dialogDefinition',function (ev) {

var dialogName = https://www.doczj.com/doc/0d17533719.html,;

var dialogDefinition = ev.data.definition;

//alert(dialogName);

if (dialogName == 'image') {

dialogDefinition.removeContents('advanced');//消除advanced标签

dialogDefinition.removeContents('Link');//消除Link标签

}

});

后面这个函数是去掉点击“图像”按钮时超链接和高级选项卡,只保留图像选项卡。

自定义上传图片配置

1.添加“上传”按钮,需要修改plugins\image\dialogs\image.js文件,找到

CKEDITOR.dialog.validate.notEmpty(https://www.doczj.com/doc/0d17533719.html,ng.image.urlMissing)},这一段,在这一段之后,增加“上传”按钮:

{type:'button',id:'myUpload',style:'display:inline-block;margin-top:10px;',align:'center',la

bel:'上传',onClick:function(){var retFile=showModalDialog('upload/upload.jsp','','dialogHeight:20;dialogWidth:29;');if(ret

File != null){this.getDialog().setValueOf('info','txtUrl',retFile);}}},

保存后,可看到下图效果,要是看不到,可重新打开浏览器。

2.可以看到上图的预览中的英文已经去掉,这个也需要修改

plugins\image\dialogs\image.js文件,找到

config.image_previewText这一段,把它后面的英文清空即可,如这个样子:

(b.config.image_previewText||''),然后再看页面,编辑器就变成如上图的样

子了。

现在我们要做的就是实现上传的功能了。

上传图片功能

首先说下由于项目是ssh的框架,所以我的环境是ssh的基础上实现的。

1.创建form:

publicclass UploadForm extends ActionForm {

protected FormFile imageFile;

public FormFile getImageFile() {

return imageFile;

}

publicvoid setImageFile(FormFile imageFile) {

this.imageFile = imageFile;

}

}

2.创建页面

enctype="multipart/form-data">

因为我用的是公共的引用,单独用的话,还需要引用jquery.js

里面包括了检查文件格式的js代码。

3.创建action

publicclass uploadAction extends DispatchAction {

/**

* CKedit插件上传图片所使用的方法

*

* @throws IOException

*/

publicvoid saveImage(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws IOException{

UploadForm uploadForm = (UploadForm) form;

FormFile file = uploadForm.getImageFile();

String root = request.getRealPath("upload");

String path = request.getContextPath();

String basePath = request.getScheme() + "://"

+ request.getServerName() + ":" +

request.getServerPort()

+ path + "/";

File dir = new File(root);

if (dir.exists()==false){

dir.mkdir();

}

try {

InputStream is = file.getInputStream();

File destFile = new File(root,file.getFileName());

OutputStream os = new FileOutputStream(destFile);

byte[] buffer = newbyte[1024];

int length = 0;

while((length= is.read(buffer)) > 0){

os.write(buffer, 0, length);

}

is.close();

os.close();

if(file.getFileName() != null|| !file.getFileName().equals("")) {

basePath = basePath+"upload/"+file.getFileName();

}

} catch (Exception e) {

e.printStackTrace();

}finally{

response.getWriter().print(basePath);

}

}}

注意:同名字的图片会被覆盖。

还有一种方法以日期重新生成文件名字,如下:

public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) {

UploadForm uploadForm = (UploadForm) form;

// 取得文件对象

FormFile file = uploadForm.getImageFile();

// 通过时间和file的文件后缀,拼写出文件名

java.util.Date date = new java.util.Date();

String fileName = date.getTime()

+ file.getFileName().substring(

file.getFileName().lastIndexOf("."));

// 取得绝对路径

System.out.println(fileName);

String pathName = this.getServlet().getServletContext()

.getRealPath("/")

+ "/upload/" + fileName;

// 将拼写好的文件名保存到对象中

System.out.println(pathName);

try {

// 定义输出流

FileOutputStream os = new FileOutputStream(new File(pathName));

// 开始写文件

os.write(file.getFileData());

// 关闭流

os.close();

return mapping.findForward("sucess");

} catch (FileNotFoundException e1) {

e1.printStackTrace();

} catch (Exception ex) {

ex.printStackTrace();

}

}

4.配置strtus

name="uploadForm"type="org.springframework.web.struts.DelegatingA ctionProxy">

5.配置spring

最终的样子:

ckeditor配置

一、使用方法: 1、在页面中引入ckeditor核心文件ckeditor.js 2、在使用编辑器的地方插入HTML控件 如果是https://www.doczj.com/doc/0d17533719.html,环境,也可用服务器端控件 注意在控件中加上class="ckeditor" 。 3、将相应的控件替换成编辑器代码 4、配置编辑器 ckeditor的配置都集中在ckeditor/config.js 文件中,下面是一些常用的配置参数: // 界面语言,默认为'en' https://www.doczj.com/doc/0d17533719.html,nguage = 'zh-cn'; // 设置宽高 config.width = 400; config.height = 400; // 编辑器样式,有三种:'kama'(默认)、'office2003'、'v2' config.skin = 'v2';

ckeditor配置大全

前言 因为项目中在传输大数据时,需要各种格式的数据,所以在页面选择了使用ckeditor编辑器,我是从官网下载的最新的版本,经过5天的奋战,终于搞定,实现了ckeditor的基本配置和自定义的图片上传功能,善于总结,才能进步嘛,所以写下此篇,希望能帮到需要的人…… 软件准备 Ckeditor: ckeditor_3.6.3 下载地址去官网吧呵呵我懒得写了百度下就可以找到 jquery: jquery-1.2.7 官网下载吧版本无所谓的这个是我用的版本 ajaxfileupload.js jquery文件上传插件官网下载吧 ckeditor配置 1.把ckeditor文件夹放到自己工程的js目录下,然后在自己需要ckeditor的页面引入: 新建一个文本域放置编辑器: 通过js代码把ckeditor编辑器放置到上面的文本域中: var editor = CKEDITOR.replace('content'); 现在访问这个页面,可以看到下图: 文本域已经被编辑器替换。 2.通过config.js来配置编辑器的外观、语言显示、按钮显示等等。 我的配置文件如下:

CKEDITOR.editorConfig = function( config ) { // Define changes to default configuration here. For example: https://www.doczj.com/doc/0d17533719.html,nguage = 'zh-cn'; // config.uiColor = '#AADC6E'; // 设置宽高 config.width = 860; config.height = 300; config.skin = 'v2'; //共有3中皮肤可选择:kama(默认)、office2003、v2 // 工具栏(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js config.toolbar = 'Basic'; config.toolbar = 'Full'; config.toolbar_Full = [ ['Source','-','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'], ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat '], ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'], '/', ['Bold','Italic','Underline','Strike','-','Subscript','Superscrip t'], ['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'] ];//以上配置自己需要用到的按钮,按钮代码可以去网上找呵呵 }; CKEDITOR.on('dialogDefinition',function (ev) { var dialogName = https://www.doczj.com/doc/0d17533719.html,; var dialogDefinition = ev.data.definition; //alert(dialogName); if (dialogName == 'image') {

CKEditor插件开发

CKEditor插件开发 星期二7/27/2010 发布在Tutorial | 评论 From: https://www.doczj.com/doc/0d17533719.html,/content/2/ckeditor-plugin-development/根据comment有修改 CKeditor API: https://www.doczj.com/doc/0d17533719.html,/ckeditor_api/index.html CKEditor 是目前市场上比较灵活的在线WYSIWYG编辑器之一. 它灵活的设计, 开放的API和详细的文档使得用户扩展功能非常容易. 本文尝试勾勒出CKEditor插件开发的基础,包含了增加按钮,对话框和执行命令. 源代码的结构 在开始之前,感性的认知一下CKEditor源码的组织形式是很有用的. CKEditor固有的一些文件被组织到ckeditor\_source目录里. 核心的功能,诸如DOM元素操作,事件处理,初始化脚本和一些环境设置被包含在ckeditor\_source\core文件夹内. 而其它的一些功能, 比如格式化,拷贝和粘贴, 图片和链接, 都被实现为插件形式放在ckeditor\_source\plugins文件夹内. 每个文件夹表示一个插件. 并且在每个文件夹内, 有一个plugin.js的文件包含了该插件需要用到的代码. 你可以看到源代码被组织成不同的文件. 为了减少HTTP请求, CKEditor把不同的文件压缩并打包到ckeditor.js和ckeditor_basic.js里, 这种方式是运行编辑器的默认方式. 在开发的过程中, 你会希望通过ckedtior_source.js来代替ckeditor.js的执行. 现在, 创建ckeditor\_source\plugins\footnote目录,并在目录里创建plugin.js文件. 配置插件 为了开始开发你的插件, 你需要首先注册你的插件,这样CKEditor才能载入它. 在ckeditor/config.js 里,增加: config.extraPlugins='f ootnote'; 此配置将会告诉编辑器在footnote目录下载入plugin.js. 基本的plugin.js结构如下: CKEDITOR.plugins.add('f ootnote', { init:f unc tion(editor) { //plugin co de goe s here } }); 按钮

CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用

CKEDITOR富文本编辑器+AJAX+JQUERY+ListView综合应用 一、下载安装Ckeditor,并将其整合到项目中 1、什么是CKeditor?为什么要使用它? 我们在做门户网站或者公文系统时,客户经常要求在录入时能够更改字体样式、大小、颜色并具备插入图片的功能。而一般的TextBox无法满足我们的需求,此时就需要使用一种叫做富文本编辑器的东西,这类编辑器有很多,ckeditor就是其中一种,下面介绍其使用方法 2、如何下载 √ 进入官方网站https://www.doczj.com/doc/0d17533719.html,/,点击Download进入下载页面 √ CKEDITOR支持多种编程语言及框架(如:java、https://www.doczj.com/doc/0d17533719.html,、sharepoint等),我们选择https://www.doczj.com/doc/0d17533719.html, √ 下载后解压,简单解释里面内容 3、下面讲如何将CKEditor整合到我们的应用中 √ 新建一个网站

√ 为了代码清晰,新建一个目录,起名JS,方便将ckeditor放到该目录下 √ 将解压后_Samples文件夹中的ckeditor目录拷贝到JS下

√ 新建网页,起名test_ckeditor √ 增加对ckeditor的引用 √ 调用,主要是通过对TextBox的格式化实现富文本的显示效果 √ 为了简便,我们引入JQUERY类库(一种使javascript更容易理解与编写的代码集合),从https://www.doczj.com/doc/0d17533719.html,/下载

√ 将下载后的文件放到JS文件夹下 √ 引用jquery(通过将jquery类库拖放到title标签下) √ 页面上添加TextBox文本框(ID:TextBox1) √ 用ckeditor插件格式化TextBox1。在中添加如下代码 (注:以上代码表示当页面的所有元素加载完毕后用CKEDITOR.replace命令对TextBo x1这个文本框进行改造,让其看起来更炫) √ 按F5键预览,即可看到TextBox1被ckeditor格式化后的效果

最新ckeditor_ckfinder整合超完整版

Ckeditor ckfinder2.0.1超强整合完整版实践版 PHP 目录 php开发--使用CKEditor 和CKFinder 实现上传功能 (1) 1. 下载安装CKEditor: (1) 2. 下载安装CKFinder: (2) 3. 在网页中使用CKEditor 和CKFinder: (2) 4. 配置CKFinder进行上传图片,Flash等。 (3) 5.Ckfinder实现普通文件上传 (5) ckfinder中实现文件上传后按当前时间改名 (6) CKEditor 优化配置 (6) 精简Ckeditor (6) 提速:禁用拼写检查 (6) CKFinder 单独使用 (9) ckfinder去掉注册的提示信息 (10) php开发--使用CKEditor 和CKFinder 实现上传功能 1. 下载安装CKEditor: https://www.doczj.com/doc/0d17533719.html,/ 解压下载到的CKEditor放到网站的路径中即可 简单配置ckeditor,打开config.js,添加如下内容

2. 下载安装CKFinder: https://www.doczj.com/doc/0d17533719.html,/download 解压下载到的CKEditor放到与CKEditor同一目录中即可 3. 在网页中使用CKEditor 和CKFinder: CKEditor 实际是替换一个textarea 标签,所以把textarea放到一个form中,当提交到php 服务器端,使用$_GET['xxx'] 或者$_POST['xxx'] 取得编辑好的数据。注意,因为CKEditor 要替换textarea,所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在textarea 的后面。 最简单的方法,直接使用下面的例子修改一下即可。可以在网页中看到CKEditor 了,兴奋吧。

ckeditor与ckfinder整合forJAVA(解决乱码问题)

ckeditor + ckfinder整合for JA V A ---支持文件上传、解决乱码问题 2012-07-18 备注:本人使用的开发工具为eclipse 3.7.0,服务器为:apache-tomcat-7.0.20,jdk版本为:jdk1.6.0_29。本人已使用了字符过滤器,所有的字符都设置为UTF-8。仅供参考。 一.简谈: 前期(2012-06-20)本人根据网上一些资料,以及个人的实现,发布了“ckeditor + ckfinder整合for JA V A(支持文件上传)”文档,收到了很多网友的私信,并进行了交流。在此感谢那些交流过的网友。 网上大多数的资料都是相对比较老的版本,所以本人花了一些时间写下了ckeditor 和ckfinder整合。但由于本人只是简单的应用,所以没有整合的很充分,部分功能没有全部去实现,如文件夹重命名、文件夹新建、上传文件时文件带有汉字等乱码问题没有解决,先作补充如下(请先阅读前期材料)。 二.“错误”的出现 当前期准备完成后,我们开始操作图片、文档、flash的上传了,但是这时你会发现,当上传文件名为汉字,后者新建文件夹,或者重命名文件夹的时候,如果使用中文会出现乱码,导致文件、文件夹无法访问。操作如下: 打开上传页面,选择Files--创建子文件夹,如下图所示:

输入“我们”,如下图所示: 选择“确定”,出现如下情况:

同理,当文件夹重命名带汉字,上传图片时文件名带汉字也会出现类似的情况。 三.问题的解决 先解决方法如下: 找到程序运行的服务器(tomcat),下的server.xml文件 用记事本打开找到如下段落,如下图所示:

CKEditor + CKFinder 配置

CKEditor + CKFinder 配置 2010年04月21日星期三 23:14 CKEditor: 1.解压CKEditor到webRoot目录,在应用页面加载其ckeditor.js ; 2.页面textarea: CKFinder: 3.解压CKFinder到webRoot目录(最好与CKEditor同级),在应用页面加载其ckfinder.js ; 4.页面script:(最好textarea之后) if (typeof CKEDITOR == ‘undefined’) { document.write(’加载CKEditor失败’); } else { var editor = CKEDITOR.replace(’editor1′); CKFinder.SetupCKEditor(editor, ‘../ckeditor/ckfinder/’); //ckfinder 总目录的相对路径. } 整合: (把俩js加载到同一文件其实就已经基本整合好了,还需要修改的配置如下)5.打开\ckfinder\config.php,修改$baseUrl = ‘(上传附件的存放路径)’; //以webRoot为起始的绝对路径,其目录下会自动生成images、flash等子目录;默认是在webRoot的根目录下,注意修改。 至此配置完毕,如果需要自定义界面,可进行以下的高级修改: 6.在ckeditor\config.js中的CKEDITOR.editorConfig里加入以下需要自定义的配置代码: //字体. config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial; Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;'; //工具按钮. config.toolbar= [ ['Source','-','Save','NewPage','Preview','-','Templates'], ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print'

富文本编辑器(Ckeditor+Ckfinder)实现富文本编辑和图片文件的上传的配置方法

Ckeditor+Ckfinder在https://www.doczj.com/doc/0d17533719.html,实现富文本编辑和图片文件的上传的配置方法 一、下载Ckeditor和Ckfinder。 (一)百度搜索Ckeditor和Ckfinder,点击排名第一的网站。 (二)在其官方网站的download和free trial栏目下载免费的文件包。注意要选择https://www.doczj.com/doc/0d17533719.html,

二、解压缩文件并选择加入https://www.doczj.com/doc/0d17533719.html,网站所需的文件夹。 1.复制ckeditor的_Samples文件夹下的bin和ckeditor两个文件

2.复制cfinder整个文件夹,并将bin/release文件夹下的dll文件复制到富文本编辑器的bin文件里。 注意这里就有两个dll文件了。 整理的结果如下: 最后将文件夹拷贝到网站根目录下:

二、https://www.doczj.com/doc/0d17533719.html,配置ckeditor和ckfinder 1.添加对两个bin文件夹下dll文件的引用 2.在工具箱加入ckeditor控件,选择选择项。在选择工具箱.netFramework组件中浏览选择bin文件夹中的https://www.doczj.com/doc/0d17533719.html,.dll文件,工具箱将会多出一个CKEditorControl控件。

控件。

在属性窗口输入都要ckfinder文件浏览和上传功能的管理 页面,包括浏览服务器和上传两个功能。 注意目录一定要正确 FilebrowserBrowseUrl="../fwh_new_bjq/ckfinder/ckfinder.html?Type=Files" FilebrowserFlashBrowseUrl="../fwh_new_bjq/ckfinder/ckfinder.html?Type=Flash" FilebrowserImageBrowseUrl="../fwh_new_bjq/ckfinder/ckfinder.html?Type=Images" FilebrowserFlashUploadUrl="../fwh_new_bjq/ckfinder/core/connector/aspx/connector.aspx?comman d=QuickUpload&type=Flash" FilebrowserImageUploadUrl="../fwh_new_bjq/ckfinder/core/connector/aspx/connector.aspx?comman d=QuickUpload&type=Images" FilebrowserUploadUrl="../fwh_new_bjq/ckfinder/core/connector/aspx/connector.aspx?command=Qui ckUpload&type=Files" 选择/ckfinder/config.ascx文件,修改授权规则和上传目录。

最强悍的FckEditor下载安装配置使用全攻略中文教程

最强悍的FckEditor下载安装配置使用全攻略中文教程 FckEditor配置手册中文教程详细说明 性能 首先,FCKEDITOR的性能是非常好的,用户只需很少的时间就可以载入FCKEDITOR 所需文件.对于其他在线编辑器来说,这几乎是个很难解决的难题,因为在开启编辑器时需要装载太多的文件.比如CUTEEDITOR,虽然功能比FCKEDITOR还要强大,可是,它本身也够庞大了,至于FREETEXTBOX等,其易用性与FCKEDITOR相比,尚有差距,可以说,FCKEDITOR 是一个别具匠心的在线编辑器,它里面融入了作者高深的面向对象的JA V ASCRIPT功力,集易用性与强大的功能与一体. .与编辑器相关的所有图像,脚本以及调用页 .语言文件 .编辑器的皮肤文件 .工具样的贴图等 这些将导致在服务器和客户端间产生相当的流量.如果有许多文件被调用,那么即便每个文件很小.也会让用户等得不耐烦. 装载顺序 从2.0版开始,编辑器按以下步骤装载资源: .基本页(就是编辑器所在页)以及装入编辑器的JS脚本 .用来建立编辑器的脚本 .编辑器的语言和皮肤. .建立编辑器. .载入预置的编辑文档内容. .从现在开始,用户可以阅读和编辑文档了,不过,拖拽支持以及工具栏都是不可用的 .载入编辑器引擎脚本 .建立工具栏,并且可用 .从现在开始,编辑器的所有功能都已经完整 .载入工具栏图标 脚本压缩 在打包任何新版本时,编辑器的JS脚本将会进行预处理.预处理步骤如下: .移除所有代码注释 .移除所有无用的空白字符. .将脚本合并成几个文件 使用上面的方法,我们可以将脚本文件的大小压缩到原来的50%. 压缩后,原始的代码仍然存在于一个名为_Source的文件夹中 如何打包? 编辑器已经自带了打包程序,它位于FCKEDITOR的根文件夹中_PACKAGER文件夹中,名为Fckeditor.Packager.exe,将其复制到FCKEDITOR根文件夹中并运行,即可自动将JS脚本打包并压缩 需要注意的是该程序是一个.NET程序,必须安装.NET FRAMEWORK才能使用

FCKeditor (jsp在线编辑器)配置总结

FCKeditor (jsp在线编辑器)配置总结 折腾了两天,从eWebEditor到CKeditor再到FCKeditor真是费足了劲了! 本人比较喜欢开源的,在网上狂搜一通最后被CKeditor强大的功能和华丽的界面吸引的五体投地~~,高高兴兴的下载了CKeditor,花费了半天的时间终于把CKeditor配置好了,结果一点图片发现连个上传图片的按钮都没有(~~~~(>_<)~~~~ ),原来还需要一个CKfinder插件。于是又兴冲冲的跑到官网上找CKfinder,找到最后却发现就是没有java版的!!!而且这个插件好像是要收费的,哎~真是郁闷死了。 不能用CKeditor那就用FCKeditor吧,呵呵,下面牢骚归正传: 一、首先到官网下载最新版本的 FCKeditor 2.6.5下载地址: https://www.doczj.com/doc/0d17533719.html,/project/downloading.php?group_id=75348&filename=FCKeditor_2.6.5.zip FCKeditor.Java 2.6 要下的有fckeditor-java-demo-2.6.war (示例,我觉得下载这一个就够了) fckeditor-java-2.6-src.zip (源文件,如果你想看就下吧) fckeditor-java-2.6-bin.zip (我下了,但没有上) 二、(1)、把FCKeditor 2.6.5解压到WebRoot下 (2)、解压fckeditor-java-2.6-bin.zip,把文件夹中的fckeditor-java-core-2.6.jar以及lib中的所有jar 包拷贝到你的web程序的lib中,fckeditor-java-demo-2.6.war中的slf4j-simple-1.5.8.jar也要拷进去(注意:slf4j-api和slf4j-simple的版本一定要一致)。如果你觉得麻烦,那么就从fckeditor-java-demo-2.5.war 中直接将lib文件夹下的所有jar包复制到项目的lib中,我就是这么做的。 (3)、把fckeditor-java-demo-2.6.war 中的web.xml中的servlet的配置复制到你的web程序中web.xml 中。 ConnectorServlet net.fckeditor.connector.ConnectorServlet 1 ConnectorServlet /fckeditor/editor/filemanager/connectors/* (4)、把fckeditor-java-demo-2.6.war 中的fckeditor.properties复制到你项目的src中 (5)、通过它提供的标签库添加应用:

CKEditor和CKfinder的使用方法

CKEditor和CKfinder的使用方法 一.需要的资源 将上述的包都解压分别的到 一.解压ckfinder中的 二.从解压后的文件中找到WEB-INF/lib中如下的包: 添加到项目的lib包中。 三.将ckeditor-java-core中的添加到开发项目的lib文件夹下。 四.ckfinder\_source\CKFinder for Java\CKFinder\src\main\java下的拷贝到项目的src下。 五.将\ckfinder下的(都是js没有java)放到webroot下。 六.将直接考到webroot下。 七.\ckfinder\WEB-INF下的文件拷贝到开发项目的WEB-INF下。八.修改config.xml

注意:要加项目名的地方有三处,另外两处如下: 九.在web.Xml中添加 ConnectorServlet com.ckfinder.connector.ConnectorServlet XMLConfig /WEB-INF/config.xml debug false 1 ConnectorServlet /ckfinder/core/connector/java/connector.java FileUploadFilter com.ckfinder.connector.FileUploadFilter sessionCookieName JSESSIONID sessionParameterName jsessionid

jeesite 说明文档-3.内置组件的应用

第3章内置组件的应用 作者:ThinkGem 更新日期:2014-01-05 1.常用组件 1.1.布局组件 布局文件配置: / jeesite/src/main/webapp/WEB-INF/decorators.xml 默认布局文件: / jeesite/src/main/webapp/WEB-INF/views/layouts/default.jsp 非公共,自己建立的布局文件: / jeesite/src/main/webapp/WEB-INF/views/模块路径/layouts/布局文件.jsp 使用布局文件: JSP的head里添加:

1.2.用户工具UserUtils.java fns.tld 应用场景:在java文件或jsp页面上,获取当前用户相关信息 1.获取当前用户: 1)UserUtils.getUser(); 2)entity.currentUser() 3)${fns:getUser()} 2.获取当前用户部门: 1)UserUtils.getOfficeList() 2)${fns:getOfficeList()} 3.获取当前用户区域: 1)UserUtils.getAreaList() 2)${fns:getAreaList()} 4.获取当前用户菜单: 1)UserUtils.getMenuList() 2)${fns:getMenuList()} 5.获取当前用户缓存: 1)UserUtils.getCache(key); 2)${fns:getCache(cacheName, defaultValue)} 6.设置当前用户缓存: 1)UserUtils.putCache(key); 1.3.全局缓存CacheUtils.java 应用场景:系统字典 1.设置应用程序缓存:CacheUtils.put(key); 2.获取应用程序缓存:CacheUtils.get(key); 1.4.字典工具DictUtils.java 应用场景:系统全局固定的字典数据,java或jsp中获取字典相关数据。

FCKeditor使用方法详解

FCKeditor使用方法技术详解 作者:深蓝色 QQ:76863715 本文PHPChina论坛首发 本文特为《PHP5和MySQL5 Web开发技术详解》一书编写 1、概述 FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor(如百度,阿里巴巴)。本文将通过与PHP相结合,从基本安装到高级的配置循序渐进介绍给广大PHPer。 FCKeditor官方网站:https://www.doczj.com/doc/0d17533719.html,/ FCKeditor Wiki:https://www.doczj.com/doc/0d17533719.html,/ 2、下载FCKeditor 登录FCKeditor官方站(https://www.doczj.com/doc/0d17533719.html,),点击网站右上角“Download”链接。笔者编写本文时,FCKeditor当前最新的稳定版本是2.4.3,因此我们下载此版本的zip压缩格式文档。如图1所示: 图1:下载FCKeditor 2.4.3(最新稳定版)

注意:当点击“FCKeditor_2.4.3.zip”链接后,将跳转到https://www.doczj.com/doc/0d17533719.html,网站上自动下载。如果您当前使用Linux或Unix系统,可以点击“FCKeditor_2.4.3.tar.gz”链接下载.tar.gz格式的压缩包。 3、安装FCKeditor 解压“FCKeditor_2.4.3.zip”文档到您的网站目录下,我们先假定您存放FCKeditor和调用脚本存于同一个目录下。目录结构如下图所示: 图2:网站目录结构图 fckeditor目录包含FCKeditor2.4.3程序文件。check.php用于处理表单数据。add_article.php 和add_article_js.html分别是PHP调用FCKeditor和JavaScript调用FCKeditor实例脚本文件。 3.1、用PHP调用FCKeditor 调用FCKeditor必须先载入FCKeditor类文件。具体代码如下。 接下来,我们需要创建FCKeditor实例、指定FCKeditor存放路径和创建(显示)编辑器等。具体代码如下所示(代码一般放在表单内)。 BasePath = './fckeditor/'; // 设置FCKeditor目录地址 $FCKeditor->Width='100%'; //设置显示宽度 $FCKeditor->Height='300px'; //设置显示高度的高度 $oFCKeditor->Create() ; // 创建编辑器 ?> 下面是笔者创建好的实例代码,您可将代码保存为add_article.php。

Drupal7 安装 CKEditor 和 IMCE 模块 及配置方法

习惯了使用所见即所得(Wysiwyg)编辑器, Drupal7安装CKEditor编辑器的方法及配置: 1.首先要下载模块和编辑器 CKEditor Moudle: https://www.doczj.com/doc/0d17533719.html,/project/ckeditor IMCE Module: https://www.doczj.com/doc/0d17533719.html,/project/imce CKEditor 编辑器: https://www.doczj.com/doc/0d17533719.html,/download 2.安装 CKEditor Moudle和IMCE Moudle 将解压的 CKEditor Moudle 和 IMCE Moudle 模块分别放到 sites/all/moudles/ckeditor/ sites/all/moudles/imce/ 然后将CKEditor 编辑器压缩包里面的放到 /sites/all/moudles/ckeditor/ckeditor/中, 如下图 放好后的路径如: /sites/all/moudles/ckeditor/ckeditor/ckeditor.config.js /sites/all/moudles/ckeditor/ckeditor/ckeditor_php5.php /sites/all/moudles/ckeditor/ckeditor/ckeditor_php4.php /sites/all/moudles/ckeditor/ckeditor/ckeditor/plugins/* /sites/all/moudles/ckeditor/ckeditor/ckeditor/_samples/* /sites/all/moudles/ckeditor/ckeditor/ckeditor/_source/*

CKEditor在https://www.doczj.com/doc/0d17533719.html,下使用的方法

CKEditor在https://www.doczj.com/doc/0d17533719.html,下使用的方法 CKEditor在https://www.doczj.com/doc/0d17533719.html,下使用的方法 2010-10-29 10:53:00分类:系统运维 转载自: https://www.doczj.com/doc/0d17533719.html,/gagahjt/blog/item/28f474835485fcd5bc 3e1e8f.htmlCKEditor在https://www.doczj.com/doc/0d17533719.html,下使用的方法2010-06-21 11:381、下载ckeditor_3.0.1.zip 并解压到ckeditor(在根目录下)。官方网站:CKEditor(Fully functional, open source editor, with source code included)下载地址:CKEditor2、在aspx 页面或者master 模板页<head> 标签中载入ckeditor.js:<!-- 载入CKEditor JS 文件--> <script src="../ckeditor/ckeditor.js" type="text/javascript"></script> 在<body>标签中使用ckeditor:<!-- 使用ckeditor 必须定义class="ckeditor" --> <asp:TextBox id="txtContent" class="ckeditor" TextMode="MultiLine" Text='<%# Bind("info") %>' runat="server"></asp:TextBox> 与其他 .net 控件使用方法相同,设置Text='<%# Bind("info") %>' 可以方便与数据源进行交互。3、config.js

Thinkphp整合ckedirot、ckfinder完成在线编辑功能

网上介绍thinkphp整合ckeditor和ckfinder的文档确实很多,不过那些介绍确实是比较零散的,大部分都是全部操作的一部分(我就被那些文档毒害了,花了很多时间仍然没有成功整合起来),于是我花了一个下午的时间通过原生的方式先摸通它们是怎么整合到一起的,然后在推导一下,成功的整合到了thinkphp中。 言归正传,下面是操作方式,图文并茂的哦,亲~~~~!!! 我使用的是以下这几个版本的工具包,都是刚从官网下载的,应该比较新版(创建时间显示得很清楚) 我那demo的路径是比较深的,童鞋们可以根据自己情况来实际修改 把thinkphp的源码包解压进去,然后搭建一个简单的tp程序 把ckeditor和ckfinder解压进thinkphp中的vendor中

我们先整合editor: 打开ckeditor文件夹中的ckeditor_php5.php [如果你用php4,那就打开ckeditor_php4.php] 找到大概38行public $basePath; 把ckeditor存在的地址(从Apache htdoc开始的真实路径[网站根目录,如果你改了webroot,则从你改了的webroot那里开始])赋值给basepath (有一个找路径的小技巧,直接用浏览器访问到ckeditor的目录,端口号后面的路径就是你的basepath路径啦!!!) 找到同一路径(ckeditor)下的config.js,设置好编辑器的大小、工具栏、字体等配置信息,具体设置可以参考我共享出来的那个demo,里面有。(一坨的东西) 然后在thinphp中调用(贴个图出来算了,代码demo中有)

CKEditor (Toolbar Definition)工具栏自定义配置

CKEditor (Toolbar Definition)工具栏自定义配置 CKEditor中的工具栏默认显示所有功能按钮。出于安全的原因、或者是简化的原因,需要对这个工具栏进行自定义设置。CKEditor工具栏自定义配置非常简单。 编辑ckeditor目录下的的config.js文件,默认的是下面的工具栏代码, 注意工具按钮是分组的,一个name内的大括号就是一个工具按钮分组,items后边是具体的按钮,“/”表示工具栏换行,“-”表示工具图标之间的中隔线“|” (特别说明:config.js中没有下面的代码,默认就是显示全部按钮,但如果对工具栏进行自定义,最好的办法还是把下面的代码全部复制到config.js,然后再删除一个个不需要的按钮) config.toolbar = 'Full'; config.toolbar_Full = [ { 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' ] } ]; config.toolbar_Basic = [ ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About'] ];

相关主题
文本预览
相关文档 最新文档