CodeMirror 基础配置指南

• 需求背景
• 在线编辑
• 项目引入
• • 列表页面
  • 加载页面内容
  • 在线编辑页面
  • 在线编辑内容保存

需求背景

这里为什么会用到在线编辑功能呢？有这样的一个文件管理系统，实时上传js、css、html、shtml、txt等格式文件及文件夹，但是有时候发现上传的文件内容上有不对的地方，如果按传统的下载文件到本地，打开文件编辑保存，再次上传文件到对应路径这样一套操作下来的话会比较麻烦，耽误时间，而如果可以在线编辑有内容问题的文件的话，就可以省去很多步骤，直接在线修改并保存文件就可以了，是不是很方便，于是就产生了在线编辑的需求。

在线编辑

对于文件在线编辑，如果自行通过普通的html元素来加载并编辑的话，操作难度和代码识别度都很差劲，与其说是编辑代码，不如说是编译一堆字母，完全没有任何代码格式可言，这时就考虑到引用在线编辑插件来实现这一功能，通过网上搜索找到了应用的比较广泛比较稳定的CodeMirror在线编辑插件，CodeMirror插件官网地址：https://codemirror.net/

这里我准备了我已经下载好的codemirror的插件包：https://download.csdn.net/download/csdn565973850/87410467，如果你没有积分又不愿意去官网下载的话可以私聊我，我这里给你提供codemirror插件包。

项目引入

这里首先说在线编辑页面，然后再说后台在线编辑处理的逻辑代码，所有代码仅供提供思路，勿要全盘拿过去复用，毕竟不同的代码架构跳转方式会有不同。

列表页面

在线编辑按钮对应的跳转代码

    //在线编辑    function codeonline(fileName){        var title = $("#title").val();        var platform = $("#platform").val();        var url = prefix + "/codeOnline?path="+title+"&name="+fileName+"&platform="+platform;        $.modal.openTab('在线编辑',url);    }

加载页面内容

codeOnline方法下载腾讯云文件并读取文件内容返回到在线编辑页面

        @RequestMapping("/codeOnline")    @RequiresPermissions("project:publishCosFiles:codeOnline")    public String codeOnline(HttpServletRequest request,ModelMap mmap){        //获取存储路径        String path = request.getParameter("path");        mmap.put("path",path);        //获取文件名称        String name = request.getParameter("name");        mmap.put("name",name);        //获取平台        String platform = request.getParameter("platform");        mmap.put("platform",platform);        String text1path = null;        try {            //临时文件存放目录            String profile = ConfigConstant.cosTempPath;            //版本库没有  原始文件地址            String versionkey = path + name;            if (Constants.Platform.COS.getValue().equals(Integer.valueOf(platform))) {                CosClientUtil cosClientUtil = new CosClientUtil();                try {                    //下载到服务器临时目录的文件路径及名称                    text1path = profile + name;                    //开始下载                    cosClientUtil.download(versionkey, text1path);                } catch (InterruptedException e) {                    e.printStackTrace();                }            }else {                text1path = path+ "/"+name;            }            //逐行读取文件内容            BufferedReader reader;            StringBuffer sb = new StringBuffer();            mmap.put("filearea","");            try {                reader = new BufferedReader(new InputStreamReader(                        new FileInputStream(text1path), "utf-8"));                while (reader.ready()) {                    sb.append(reader.readLine()+"\r\n");                }                reader.close();                mmap.put("filearea",sb.toString());            } catch (IOException e) {                e.printStackTrace();            }        }catch (Exception e) {            e.printStackTrace();        }finally {            if (Constants.Platform.COS.getValue().equals(Integer.valueOf(platform))) {                //删除下载的临时文件                if (StringUtils.isNotEmpty(text1path)) {                    boolean delete = new File(text1path).delete();                }            }        }        return prefix + "/codeOnline";    }

在线编辑页面

在线编辑页面样式及js代码如下

                
来源地址：https://blog.csdn.net/csdn565973850/article/details/128938027