谁能告诉我怎样在ASP CKEditor 中实现上传图片功能

谁能告诉我怎样在ASP CKEditor 中实现上传图片功能,第1张

1、项目先新建Lbrary文件跟js文件夹(js小写)并在js文件夹下,在简历ckeditor和ckfinder文件夹,压缩包找到其中/bin/Debug下的CKEditor.NET.dll考到新建的文件夹下,如后在引用中右键添加对刚才的CKEditor.NET.dll的引用,如图:

2、将压缩包中的_Sample的ckeditor文件夹下的9个文件考到js文件夹下的ckeditor里连同,如图:

3、在aspx网页中注册CKEditor插件:

第一种一种方式是在单个网页的顶部添加下面的语句如果要在单个网页中使用该插件则在该网页到最上面添加

<%@Register Assembly="CKEditor.NET" Namespace="CKEditor.NET" TagPrefix="CKEditor"%> 

第二种方式是在整个工程的Web.config文件的

<system.web><pages><controls>中添加<add tagPrefix="CKEditor" assembly="CKEditor.NET" namespace="CKEditor.NET"/>

4、把ckfinder文件下的4个问价考到ckfinder文件夹里,如图:

5、修改ckeditor下的config.js文件,在其添加如下代码,如图:

var ckfinderPath = "/js"    config.filebrowserBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html'    config.filebrowserImageBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Images'    config.filebrowserFlashBrowseUrl = ckfinderPath + '/ckfinder/ckfinder.html?type=Flashs'    config.filebrowserUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Files'    config.filebrowserImageUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Images'    config.filebrowserFlashUploadUrl = ckfinderPath + '/ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&Type=Flash'

6、修改ckfinder下的config.ascx 文件,把return false 给为return true即可,如图:

为ckeditor添加图像的方法

1. 到官网下载ckeditor

2. 复制到java web项目目录下

3. 配置config文件,打开图片上传功能

CKEDITOR.editorConfig = function (config) {

// 换行方式

config.enterMode = CKEDITOR.ENTER_BR

// 当输入:shift+Enter是插入的标签

config.shiftEnterMode = CKEDITOR.ENTER_BR//

//图片处理

config.pasteFromWordRemoveStyles = true

config.filebrowserImageUploadUrl = "ckUploadImage.action?type=image"

// 去掉ckeditor“保存”按钮

config.removePlugins = 'save'

}

4. java后台处理代码

// 上传图片

@Action(value = "/ckUploadImage", results = { @Result(name = "success", location = "/upload.jsp") })

public String uploadImages() throws Exception {

HttpServletRequest request = ServletActionContext.getRequest()

FileOutputStream fos

String webRoot = request.getSession().getServletContext().getRealPath(

"")

// 获取图片后缀名

String partRightType = uploadFileName.substring(uploadFileName

.lastIndexOf("."))

String CKEditorFuncNum = request.getParameter("CKEditorFuncNum")

// 判断图片的格式

if (!ImageFile.checkImageType(partRightType)) {

String path = ""

String alt_msg = "Sorry! Image format selection is incorrect, please choose GIF, jpeg, PNG format JPG, picture!"

pringWriterToPage("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("

+ CKEditorFuncNum

+ ", '"

+ path

+ "' , '"

+ alt_msg

+ "')</script>")

} else {

try {

uploadFileName = DateUtils.getDateNoStyle() + "-"

+ UUID.randomUUID() + partRightType

String savePath = webRoot + Constants.UPLOAD_IMAGES_PATH

File uploadFilePath = new File(savePath)

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

uploadFilePath.mkdirs()

System.out.println("路径不存在,但是已经成功创建了" + savePath)

} else {

System.out.println("路径存在了" + savePath)

}

fos = new FileOutputStream(new File(savePath + uploadFileName))

FileInputStream fis = new FileInputStream(getUpload())

byte[] buffer = new byte[1024]

int len = 0

while ((len = fis.read(buffer)) >0) {

fos.write(buffer, 0, len)

}

fos.close()

fis.close()

} catch (FileNotFoundException foe) {

System.out.println("上传文件为0字节")

}

// String path = "http://" + request.getServerName() + ":"

// + request.getServerPort() + request.getContextPath()

// + Constants.UPLOAD_IMAGES_PATH + uploadFileName

String path = request.getContextPath()

+ Constants.UPLOAD_IMAGES_PATH + uploadFileName

String alt_msg = ""

pringWriterToPage("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("

+ CKEditorFuncNum

+ ", '"

+ path

+ "' , '"

+ alt_msg

+ "')</script>")

}

return null

}

* 其实重点的代码就是这点

pringWriterToPage("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("

+ CKEditorFuncNum

+ ", '"

+ path

+ "' , '"

+ alt_msg

+ "')</script>")


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11754609.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存