ckeditor配置大全


2023年12月27日发(作者:friendly怎么读)

前言

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

软件准备

Ckeditor:

ckeditor_3.6.3

jquery:

jquery-1.2.7

下载地址去吧呵呵我懒得写了百度下就可以到

下载吧版本无所谓的这个是我用的版本

jquery文件上传插件下载吧

ckeditor配置

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

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

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

var editor = e('content');

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

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

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

我的配置文件如下:

Config = function( config )

{

};

('dialogDefinition',function (ev) {

var dialogName = ;

var dialogDefinition = tion;

//alert(dialogName);

if (dialogName == 'image') {

r_Full = [

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

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

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select',

'/',

['Bold','Italic','Underline','Strike','-','Subscript','Superscrip['NumberedList','BulletedList','-','Outdent','Indent','Blockquote['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],

['Link','Unlink','Anchor'],

['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','/',

['Styles','Format','Font','FontSize'],

['TextColor','BGColor']

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

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

ge = 'zh-cn';

// r = '#AADC6E';

// 设置宽高

= 860;

= 300;

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

// 工具栏(基础'Basic'、全能'Full'、自定义)plugins/toolbar/

r = 'Basic';

r = 'Full';

'SpellChecker', 'Scayt'],

'],

'Button', 'ImageButton', 'HiddenField'],

t'],

'],

'PageBreak'],

Contents('advanced');//消除advanced标签

Contents('Link');//消除Link标签

}

});

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

自定义上传图片配置

1. 添加“上传”按钮,需要修改文件,到

ty(sing)},这一段,在这一段之后,增加“上传”按钮:

{type:'button',id:'myUpload',style:'display:inline-block;margin-top:10px;',align:'center',label:'上传',onClick:function(){var

retFile=showModalDialog('upload/','','dialogHeight:20;dialogWidth:29;');if(retFile != null){log().setValueOf('info','txtUrl',retFile);}}},

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

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

文件,到

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

(_previewText||''),然后再看页面,编辑器就变成如上图的样子了。

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

上传图片功能

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

1. 创建form:

publicclassUploadFormextends ActionForm {

protected FormFile imageFile;

public FormFile getImageFile() {

}

publicvoid setImageFile(FormFile imageFile) {

}

}

2. 创建页面

function ajaxFileUpload() {

if (imgPath == null || imgPath == "") {

alert("请浏览图片");

returnfalse;

var imgPath = $('#imageFile').val();

enctype="multipart/form-data">

ile = imageFile;

returnimageFile;

}

;

if(!checkImg(imgPath)){

returnfalse;

};//检查文件格式

$.ajaxFileUpload( {

url : '/system/?method=saveImage', //需要链接到服务器secureuri : false,

fileElementId : 'imageFile', //文件选择框的id属性

dataType : 'text', //服务器返回的格式,可以是json

success : function(data, status) //相当于java中try语句块的用法

{

Value = data; //返回父页面

();

地址

}

);

},

error : function(data, status, e) //相当于java中catch语句块的用法

{

}

$('#result').html('添加失败');

}

function checkImg(path) {

}

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

if (ext1 != ".gif"&& ext1 != ".ief"&& ext1 != ".jpg"

}

returntrue;

&& ext1 != ".jpeg"&& ext1 != ".tiff"&& ext1 != ".tif"

&& ext1 != ".bmp"&& ext1 != ".svg"&& ext1 != ".svgx") {

var file = mentById("upload");

var i = dexOf(".");

var ext = ing(i);

var ext1 = rCase();

alert("不支持图片的类型:" + ext);

returnfalse;

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

3. 创建action

publicclass uploadAction extends DispatchAction {

/**

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

*

* @throws IOException

*/

publicvoid saveImage(ActionMapping mapping, ActionForm form,

String path = textPath();

String basePath = eme() + "://"

+ verName() + ":" +

verPort()

+ path + "/";

File dir = new File(root);

if (()==false){

();

UploadForm uploadForm = (UploadForm) form;

FormFile file = geFile();

HttpServletRequest request, HttpServletResponse response)

throws IOException{

String root = lPath("upload");

}

try {

InputStream is = utStream();

File destFile = new File(root,eName());

OutputStream os = new FileOutputStream(destFile);

byte[] buffer = newbyte[1024];

int length = 0;

while((length= (buffer)) > 0){

(buffer, 0, length);

}

();

();

{

if (eName() != null|| !eName().equals(""))

}}

}

basePath = basePath+"upload/"+eName();

} catch (Exception e) {

tackTrace();

}finally{

}

ter().print(basePath);

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

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

public ActionForward execute(ActionMapping mapping, ActionForm form,

HttpServletRequest request, HttpServletResponse response) {

UploadForm uploadForm = (UploadForm) form;

// 取得文件对象

FormFile file = geFile();

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

date = new ();

String fileName = e()

+ eName().substring(

eName().lastIndexOf("."));

// 取得绝对路径

n(fileName);

String pathName = vlet().getServletContext()

.getRealPath("/")

+ "/upload/" + fileName;

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

n(pathName);

try {

// 定义输出流

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

// 开始写文件

(eData());

// 关闭流

();

return rward("sucess");

} catch (FileNotFoundException e1) {

tackTrace();

} catch (Exception ex) {

tackTrace();

}

}

4. 配置strtus

name="uploadForm"type="tingActionProxy">

5. 配置spring

最终的样子:


本文发布于:2024-09-21 20:50:20,感谢您对本站的认可!

本文链接:https://www.17tex.com/fanyi/37302.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:需要   上传   文件   图片   按钮   编辑器   页面
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2024 Comsenz Inc.Powered by © 易纺专利技术学习网 豫ICP备2022007602号 豫公网安备41160202000603 站长QQ:729038198 关于我们 投诉建议