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

注册 | 登录

ckeditor编辑器上传图片

qinyanbin123 分享于

2020腾讯云10周年活动,优惠非常大!(领取2860元代金券),
地址https://cloud.tencent.com/act/cps/redirect?redirect=1040

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

推荐:编辑器ckeditor

编辑器: aspx页面: <script type="text/javascript" charset="utf-8" src="./../Content/ckeditor/ckeditor.js"></script> <style type="text/css">         .

 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>

推荐:在线编辑器ckeditor

最近使用在线编辑器ckeditor ,版本是最新3.2 蛮好用的,以前用过TinyMCE,不过,感觉ckeditor配置起来蛮方便的,下了一下它以前的版本,fckeditor ,感觉还是现

 <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; }

推荐:编辑器(ckeditor篇)

最近一直超级忙,忙着研究编辑器,研究了一段时间,出来跟大家分享一下我的心得 ckeditor她太好了,因为他开源,并且做的很强大(源码不压缩7万多行),之所以研

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

相关阅读排行


相关内容推荐

最新文章

×

×

请激活账号

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

您的注册邮箱: 修改

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

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