前言
因为项目中在传输大数据时,需要各种格式的数据,所以在页面选择了使用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 条评论) |