ITKeyword,专注技术干货聚合推荐

注册 | 登录

ckeditor编辑器上传图片

qinyanbin123 分享于 2013-10-29

推荐:UEditor CKEditor 网页编辑器

UEditor:百度编辑器  ,旨在打造符合国人使用习惯的网页编辑器,使用起来确实简单,文档全面,开放源码。 CKEditor 1.下载CKEditor的js库,包含js css文件的整

2020腾讯云共同战“疫”,助力行业复工(优惠前所未有!),
地址https://cloud.tencent.com/act/cps/redirect?redirect=1053

2020阿里云最低价产品入口,含代金券(新老用户有优惠),
地址https://www.aliyun.com/minisite/goods

 ckeditor编辑器的页面 cci是textarea的id或者name CKEDITOR.replace('cci',addUploadButton(this));

function addUploadButton(editor){

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

var dialogName = ev.data.name;

var dialogDefinition = ev.data.definition;

if ( dialogName == 'image' ){

var infoTab = dialogDefinition.getContents( 'info' );

infoTab.add({

type : 'button',

id : 'upload_image',

align : 'center',

label : '上传',

onClick : function( evt ){

var thisDialog = this.getDialog();

var txtUrlObj = thisDialog.getContentElement('info', 'txtUrl');

var txtUrlId = txtUrlObj.getInputElement().$.id;

addUploadImage(txtUrlId);

}

}, 'browse'); //place front of the browser button

}

});

}

function addUploadImage(theURLElementId){

var uploadUrl = "../upload.jsp"; //这是我自己的处理文件/图片上传的页面URL

var imgUrl = window.showModalDialog(uploadUrl);

//在upload结束后通过js代码window.returnValue=...可以将图片url返回给imgUrl变量。

//更多window.showModalDialog的使用方法参考

var urlObj = document.getElementById(theURLElementId);

urlObj.value = imgUrl;

urlObj.fireEvent("onchange"); //触发url文本框的onchange事件,以便预览图片

} upload.jsp <body> <form action="${pageContext.request.contextPath}/vmscms/up.action" method="POST" name="pos" enctype="multipart/form-data" target="smz" onsubmit="return Validator.Validate(this,3)">

<iframe name="smz" width="0" height="0" frameborder="0" style="display: none">

</iframe>

推荐:异步load()加载 ckeditor 编辑器

异步加载ckeditor 编辑器,注意事项: 第一.CKEDITOR 未定义:js未加载ckeditor.js

解决方案: 1.将 js文件放在父页面 <script src="http://www.cnblogs.com/..

 <font color="red">*</font>上传图片文件

<input type="file" name="file" require="false"

dataType="Filter"

msg="文件类型非法"/>

<input type="submit" value="上传"/>

</form>

<s:hidden name="pathvalue" id="_page_path"></s:hidden> </body>

<script type="text/javascript">

var _page_path = document.getElementById("pathvalue").value;

if(null!=_page_path

&& ""!=_page_path){

window.returnValue=_page_path;

window.close();

}

</script>

后台 action

public String fileUp() { // 文件上传 if (file != null) { fileFileName = fileFileName .substring(fileFileName.lastIndexOf(".")); // 判断图片的格式 if (!fileFileName.equalsIgnoreCase(".png") && !fileFileName.equalsIgnoreCase(".jpg") && !fileFileName.equalsIgnoreCase(".gif") && !fileFileName.equalsIgnoreCase(".bmp") && !fileFileName.equalsIgnoreCase(".jpeg")) { return ACT_ERROR; } // 按照日期每天生成一个文件夹 String path = "/upload/cms/" + new SimpleDateFormat("yyyyMMdd").format(new Date()); // 判断文件夹是否存在 File destFile = new File(ServletActionContext.getServletContext() .getRealPath("") + path); if (!destFile.exists()) { destFile.mkdir(); } path = path + "/" + UUID.randomUUID() + fileFileName; try { FileUtils.copyFile(file, new File(ServletActionContext .getServletContext().getRealPath("") + path)); } catch (IOException e) { e.printStackTrace(); } CmsContentInfo c = (CmsContentInfo) ActionContext.getContext() .getSession().get("cci"); //如果c不为空修改页面点击的上传

如果为空 添加页面点击的上传 if (c != null) { pathvalue = "../../" + path.substring(1); ActionContext.getContext().getSession().remove("cci"); c=null; } else { pathvalue = "../" + path.substring(1); } } return ACT_SUCCESS; }

推荐:javascript获取ckeditor编辑器的值

CKeditor编辑器是FCKeditor的升级版本 想对于FCK来说,确实比较好用,加载速度也比较快 以下是如果通过JS获取CKeditor编辑器的值,用于表单验证 if(CKEDITOR.ins

 ckeditor编辑器的页面 cci是textarea的id或者name CKEDITOR.replace('cci',addUploadButton(this));         function addUploadButton(editor){            CKEDITOR.on('dialogDefinition',

相关阅读排行


相关内容推荐

最新文章

×

×

请激活账号

为了能正常使用评论、编辑功能及以后陆续为用户提供的其他产品,请激活账号。

您的注册邮箱: 修改

重新发送激活邮件 进入我的邮箱

如果您没有收到激活邮件,请注意检查垃圾箱。