码迷,mamicode.com
首页 > 其他好文 > 详细

富文本编辑器

时间:2018-03-19 10:20:35      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:富文本编译器CKEditor

1.引入资源

<script type="text/javascript" src="${ctx}/ckeditor/ckeditor.js"></script>

2.显示UI

<textarea id="content"></textarea>
<script type="text/javascript">
CKEDITOR.replace(‘content‘);
</script>

3.下载设置
1.打开下载选项卡

ckeditor/plugins/image/dialogs/image.js


2.去掉文字提示

ckeditor/plugins/image/dialogs/image.js


3.创建后台接收Action

@Controllerbr/>@Scope("prototype")
public class CkeditorAction extends BaseAction {
private File upload;
private String uploadFileName;
private String uploadContentType;
//配置set方法------------------------------------------------------
/**

  • 处理ckeditor的文件上传请求
  • **/
    public String uploadFile(){
    //获得客户端会调的函数
    String callback=ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
    try{
    String ext=uploadFileName.substring(uploadFileName.lastIndexOf("."));
    String newName=UUID.randomUUID().toString().replace("-","")+ext;
    //获得服务器上目录的绝对路径
    String path=ServletActionContext.getServletContext().getRealPath("/upload");
    //创建File对象
    File file=new File(path,newName);
    //将上传的文件保存到服务器的目录下
    FileUtils.copyFile(upload,file);
    String uri="upload/"+newName;

       StringBuffer sb=new StringBuffer();
       sb.append("<script type=\"text/javascript\">");
       sb.append("window.parent.CKEDITOR.tools.callFunction("+callback+",‘"+uri+"‘,‘‘);");
       sb.append("</script>");
    
       //this.inputStream=new ByteArrayInputStream(sb.toString().getBytes());
       ServletActionContext.getResponse().getWriter().write(sb.toString());

    }catch(Exception ex){
    ex.printStackTrace();
    }
    return null;
    }
    }

    4.配置处理文件上传的URL

富文本编辑器

标签:富文本编译器CKEditor

原文地址:http://blog.51cto.com/13654477/2088288

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!