zoukankan      html  css  js  c++  java
  • 在线编辑器(WangEditor)

      自己之前写了一篇关于POI 相关的博客, 想了想在公司中一般常用的不就是上传下载,poi,分页,定时等。好像还有个在线编辑器, 于是自己就花了两个多小时把编辑器相关的代码撸了遍,当然了是先百度找了找资料,看了看实现的逻辑,然后自己撸的。 编辑器自己使用的是WangEditor,网上也有很多关于Editor,kindEitor 的文章, 不过貌似好像没用。业务方面:在编辑器中编辑, 然后保存为word,或者将word中的内容加载进在线编辑器中再次编辑。效果图:

        http://www.wangeditor.com/   这是WangEditor的相关网址,其中api,文档,实例都有。 WangEditor使用,配置还是相对来说比较简单的,引入相关js,创建editor对象,初始化对象。

        

        

      editor.txt.html() 会将在编辑器中编辑的内容获取,然后你直接将其传入后台便可以获取到编辑器中编辑的内容。

      当你使用编辑器编辑并保存后,会在指定的保存位置生成一个word,txt文件夹和一天个htm文件。txt文件夹中是txt文件。txt文件和htm文件都是自动生成的。其中txt文件里是HTML中的标签语言,当你要将word中的内容加载进编辑器再次编辑时,获取的内容是相对应的txt文件中的内容。htm文件只有一个,是刚使用用WangEditor创建word成功后生成的,其就是个HTML文件,其中的标签,属性对应的都是编辑器中展示的模样。当你保存生成word时,是先读取htm中的内容,将${content}替换成你编辑的内容,样式什么的htm文件中模板原先就有。然后利用流将HTML中的内容写入到word中并生成word。

      

      

    package com.cn.platform.utils;
    
    import java.io.*;
    
    import javax.servlet.ServletOutputStream;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    public class EditorUtils {
    
        // 获取项目文件路径
    public static String getUploadPath(HttpServletRequest request,String name){
          StringBuilder sb = new StringBuilder();
          String path = request.getContextPath();
          String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
          String uploadPath = sb.append(basePath).append("/ui/CAndTFiles/").append(name).append(".doc").toString();
          return uploadPath;
    }
    
    //获取服务器,本地文件路径
    public static String getWindowsPath(HttpServletRequest request,String name){
        StringBuilder sb = new StringBuilder();
        String windowPath = sb.append("I:/yishangxincheng/ysdFiles/").append(name).append(".doc").toString();
        return windowPath;
    }
    
    //获取服务器,本地文件路径
    public static String getWindowsTxtPath(HttpServletRequest request,String name){
        StringBuilder sb = new StringBuilder();
        String windowPath = sb.append("I:/yishangxincheng/ysdFiles/txt/").append(name).append(".txt").toString();
        return windowPath;
    }
    
    /*public static void saveWord(String editTemplate,String windowPath,HttpServletRequest request,HttpServletResponse response) throws IOException{
        EditorUtils.setCode(request, response);
        if (editTemplate != null) {
            List<String> array = new ArrayList<>();
            array.add(editTemplate);
            XWPFDocument doc = new XWPFDocument();  
            XWPFParagraph para = doc.createParagraph();  
            XWPFRun run = para.createRun();  
            OutputStream os = new FileOutputStream(windowPath);  
            for (String s : array) {
                  //把doc输出到输出流 
                  run.setText(s);
                  doc.write(os);  
            }
            os.close();
            doc.close();
        }
    }*/
    
    
    //设置编码
    public static void setCode(HttpServletRequest request,HttpServletResponse response) throws IOException {
        request.setCharacterEncoding("utf-8");
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=utf-8");
    }
    
    //导出
    public static void export(HttpServletRequest request,HttpServletResponse response,String url) throws IOException {
        EditorUtils.setCode(request, response);
        //获取文件下载路径
        String filename = url.substring(url.length()-4, url.length());
        if (filename.equals("docx")) {
            filename = url.substring(url.length()-6, url.length());
        }else{
            filename = url.substring(url.length()-5, url.length());
        }
        File file =  new File(url);
        if(file.exists()){
            //设置相应类型让浏览器知道用什么打开  用application/octet-stream也可以,看是什么浏览器
            response.setContentType("application/x-msdownload");
            //设置头信息
            StringBuilder sb = new StringBuilder();
            response.setHeader("Content-Disposition", sb.append("attachment;filename="").append(filename).append(""").toString());
            InputStream inputStream = new FileInputStream(file);
            ServletOutputStream ouputStream = response.getOutputStream();
            byte b[] = new byte[1024];
            int n ;
            while((n = inputStream.read(b)) != -1){
                ouputStream.write(b,0,n);
            }
            //关闭流
            ouputStream.close();
            inputStream.close();
        }
    }
    
    
    // 读取.mht网页中的信息
    private  static String readFile(String filePath) throws Exception{
        StringBuilder sb = new StringBuilder();
        BufferedReader br = null;
        try {
            br = new BufferedReader(new InputStreamReader(new FileInputStream(filePath),"utf-8"));
            while (br.ready()) {
                sb.append((char) br.read());
            }
        }catch(Exception e){
            e.printStackTrace();
        }finally {
            if (br!=null) {
                br.close();
            }
        }
        return sb.toString();
    }
    
     //将HTML转word
       private static boolean writeWordFile(String content ,String path,String fileName) throws Exception{
              boolean flag = false;
              FileOutputStream fos = null;
              StringBuilder sb = new StringBuilder();
              try {
                  if(!"".equals(path)){
                      byte[]b = content.getBytes("utf-8");
                      fos = new FileOutputStream(sb.append(path).append(fileName).append(".doc").toString());
                      fos.write(b);
                      fos.close();
                      flag = true;
                  }
              }catch (IOException e)
              {
                  e.printStackTrace();
              }finally {
                  if (fos !=null) {
                      fos.close();
                  }
              }
              return flag;
       }
    
       public static void htmlToWord(String editorContent,String htmlPath,HttpServletRequest request,String wordPath,String wordName) throws Exception{
           //读取网页中的内容
           String htmlFile = EditorUtils.readFile(htmlPath);  
           // 替换后的内容
           String endContent = htmlFile.replace("${content}", editorContent); 
           //转word
           EditorUtils.writeWordFile(endContent, wordPath, wordName); 
       }
      
       // 将editorContent存入txt中用于载入时直接使用
       public static void saveEditorContent(String editorContent,String targetPath,String fileName) throws IOException{
           FileOutputStream fos = null;
           StringBuilder sb = new StringBuilder();
           try {
               if(!"".equals(targetPath)){
                   byte[]b = editorContent.getBytes("utf-8");
                   fos = new FileOutputStream(targetPath);
                   fos.write(b);
                   fos.close();
               }
           }catch (IOException e)
           {
               e.printStackTrace();
           }finally {
               if (fos !=null) {
                   fos.close();
               }
           }
           
       }
       
     //载入
       public static String load(String name,HttpServletRequest request,HttpServletResponse response) throws IOException{
           EditorUtils.setCode(request, response);
           String path = EditorUtils.getWindowsTxtPath(request, name);
           StringBuilder sb= new StringBuilder();
           BufferedReader br = null;
           try {
               br = new BufferedReader(new InputStreamReader(new FileInputStream(path),"utf-8"));
               while (br.ready()) {
                   sb.append((char) br.read());
               }
           }catch(Exception e){
               e.printStackTrace();
           }finally {
               if (br!=null) {
                   br.close();
               }
           }
           
           return sb.toString();
       }
       
    
    }

      其中主要的代码就是工具类,代码都是能直接使用的。当然了,代码我还有10%没弄上来,不过我相信有了这些代码,看到此篇博客的人应该没问题。

  • 相关阅读:
    关于JS中判断两个数组相等
    用JS实现二叉树
    elementUI select组件 默认选择第一项
    angular [src] 绑定url或src 报XSS错误
    easy-mock本地搭建工程实操
    array splice split || string split slice 傻傻分不清楚=>终于弄清楚了
    循环=>轮回=>js循环比拼
    vue-cli 搭建工程配置 => 你想要这里都有
    git分支问题 查看、创建、关联、删除本地/远程分支
    vue知识点 && 错误点 => 持续更新
  • 原文地址:https://www.cnblogs.com/jingjiren/p/10042606.html
Copyright © 2011-2022 走看看