springboot引入editormd文本编辑器

「爱情、让人受尽委屈。」 2023-01-07 03:53 190阅读 0赞

### 文章目录 ###

*  总览
 *  样式
 *  引入依赖
 *  数据库与配置
 *  静态资源过滤
 *  工具类
 *  controller
 *  editormd
 *  前端页面

# 总览 #

![在这里插入图片描述][20210115143745187.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1MzUwNw_size_16_color_FFFFFF_t_70]

# 样式 #

![在这里插入图片描述][20210115150135934.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1MzUwNw_size_16_color_FFFFFF_t_70]

# 引入依赖 #

<dependencies>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
            <dependency>
                <groupId>org.mybatis.spring.boot</groupId>
                <artifactId>mybatis-spring-boot-starter</artifactId>
                <version>2.1.4</version>
            </dependency>
            <dependency>
                <groupId>org.projectlombok</groupId>
                <artifactId>lombok</artifactId>
            </dependency>
            <dependency>
                <groupId>mysql</groupId>
                <artifactId>mysql-connector-java</artifactId>
                <scope>runtime</scope>
            </dependency>
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.62</version>
            </dependency>
        </dependencies>

其中lombok不是必须的

# 数据库与配置 #

![在这里插入图片描述][20210115143857106.png]  
就id 标题名 作者 主体内容

mybaits 和映射之类的就不说了 就一个插入语句

没有弄service 处于方便直接用dao来调用了

**application.yml**

server:
      port: 8081
    
    spring:
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true
        username: root
        password: 123456
    
    mybatis:
      mapper-locations: classpath:/mapper/*.xml

# 静态资源过滤 #

如果不过滤 映射的地址将会出错 这里选择了用java代码的方式来实现

@Configuration
    public class MyMvcConfig implements WebMvcConfigurer { 
    
        @Override
        public void addResourceHandlers(ResourceHandlerRegistry registry) { 
            //过滤静态资源 会到这个目录里 为markdown图片上传做准备
            registry.addResourceHandler("/upload/**")
                    .addResourceLocations("file:" + FileUtil.PATH);
        }
    
    }

**注意 这里用到了工具类 下面会有他的实现**

关于静态过滤的小知识 给大家贴出来

![在这里插入图片描述][20210115144308107.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1MzUwNw_size_16_color_FFFFFF_t_70]

# 工具类 #

public class FileUtil { 
        //文件存放的路径 若没有 会自动创建
        public static final String PATH=System.getProperty("user.dir")+"/src/main/resources/static/upload/";
        /** * 上传文件 如果上传错误 会返回空的地址 注意 返回的地址是用来回显的 所以不要返回布尔类型 */
        public static String upload(MultipartFile multipartFile) { 
            if(multipartFile.isEmpty()) { 
                return "";
            }
            String filename = multipartFile.getOriginalFilename();
            File file = new File(PATH);
            if (!file.exists()) { 
                //使用mkdirs 若某个目录不存在 也会一起创建
                file.mkdirs();
            }
            //为了不使得图片名字重复 使用uuid拼接
            int i = filename.lastIndexOf(".");
            String suffix = filename.substring(i-1);
            String newFileName = UUID.randomUUID().toString() + suffix;
            try { 
                multipartFile.transferTo(new File(PATH+newFileName));
            } catch (IOException e) { 
                e.printStackTrace();
                return "";
            }
            return newFileName;
        }
    }

# controller #

![在这里插入图片描述][20210115144524742.png]  
这里用到的articleDAO 只实现了一个插入的方法(用的插件实现 一键生成)

@Controller
    public class ArticleController { 
    
        @Autowired
        private ArticleDAO articleDAO;
    
        @GetMapping("edit")
        public String edit() { 
            return "edit";
        }
    
        @PostMapping("edit/upload")
        @ResponseBody
        public JSONObject fileUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request) throws IOException { 
            String uploadname = FileUtil.upload(file);
            //给editormd进行回调
            JSONObject res = new JSONObject();
            res.put("url", "/upload/" + uploadname);
            res.put("success", 1);
            res.put("message", "upload success!");
            return res;
        }
    
        @PostMapping("save")
        @ResponseBody
        public String save(Article article) { 
            System.out.println(article);
            int i = articleDAO.insertSelective(article);
            if (i == 1) { 
                System.out.println(1111);
                return "发布成功";
            } else { 
                System.out.println(2222);
                return "失败了....";
            }
    
        }
    }

# editormd #

这里直接给出整理好的文件夹 因为一个个的引入太麻烦了 直接用就好了

链接：[https://pan.baidu.com/s/1CGAz3IDz0Qv5vUUxOWRtig][https_pan.baidu.com_s_1CGAz3IDz0Qv5vUUxOWRtig]  
提取码：uy0k

目录结构是这样的  
![在这里插入图片描述][20210115145014121.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1MzUwNw_size_16_color_FFFFFF_t_70]  
注意 我对文件进行了修改操作 若是用原版的 则可能出现  
`Uncaught SyntaxError: Unexpected token in JSON at position 0` 之类的错误

这是因为第三方插件导致的 **非常坑**

具体解决看这里 我给的文件已经修改过了

[editormd 踩坑----图片上传成功无法回显][editormd _----]

# 前端页面 #

需要引入editormd.css jq和editormd.js

<!doctype html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>问答</title>
        <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
    </head>
    <body>
    
    <div>
        <form th:action="@{/save}" method="post">
            作者 <input type="text" name="author"><br>
            标题<input type="text" name="title">
            <div id="blog-content">
                <textarea required name="content" id="content" style="display:none;" rows="3" class="form-control"> </textarea>
            </div>
            <br>
            <input type="submit" value="发布文章">
        </form>
    </div>
    
    <script th:src="@{/editormd/js/jquery-3.5.1.min.js}"></script>
    <script th:src="@{/editormd/editormd.js}"></script>
    <script type="text/javascript"> var testEditor; $(function () { //根据id来选择对应的textarea testEditor = editormd("blog-content", { width: "100%", height: 500, syncScrolling: "single", path: "/editormd/lib/", //对应的lib目录不要弄错 saveHTMLToTextarea: true, // 保存 HTML 到 Textarea // [TOCM] [TOC] 自动生成目录 tocm: true, tocContainer: "", tocDropdown: false, tocStartLevel: 1, // Parse beginning of H2, Default value 1 emoji: true, tex: true, // 开启科学公式TeX语言支持，默认关闭 flowChart: true, // 开启流程图支持，默认关闭 sequenceDiagram: true, // 开启时序/序列图支持，默认关闭, //图片上传 imageUpload: true, imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"], imageUploadURL: "/edit/upload", onload: function () { console.log('onload', this); }, /*指定需要显示的功能按钮*/ toolbarIcons: function () { return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code-block", "table", "datetime", "emoji", "html-entities", "|", "search", "watch", "preview", "fullscreen"] }, onfullscreen: function () { console.log("onfullscreen"); document.getElementsByClassName("navbar")[0].style.display = "none"; }, onfullscreenExit: function () { console.log("onfullscreenExit"); document.getElementsByClassName("navbar")[0].style.display = ""; } }); }); </script>
    
    </body>
    </html>

本文章参考 比较详细 只不过用它的我图片没有回显 故开一贴

[SpringBoot 整合 Editormd（完整版）][SpringBoot _ Editormd]

[20210115143745187.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1MzUwNw_size_16_color_FFFFFF_t_70]: /images/20221119/dd3571a084f04a91924d8b7d7e82a837.png
[20210115150135934.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1MzUwNw_size_16_color_FFFFFF_t_70]: /images/20221119/46cb8fabb4224827a3210c06a394e9cc.png
[20210115143857106.png]: /images/20221119/96111b4536874203877d276985af73da.png
[20210115144308107.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1MzUwNw_size_16_color_FFFFFF_t_70]: /images/20221119/a813a3a2e2bd493bb3282d6958561038.png
[20210115144524742.png]: https://img-blog.csdnimg.cn/20210115144524742.png
[https_pan.baidu.com_s_1CGAz3IDz0Qv5vUUxOWRtig]: https://pan.baidu.com/s/1CGAz3IDz0Qv5vUUxOWRtig
[20210115145014121.png_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1MzUwNw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210115145014121.png?type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDM1MzUwNw==,size_16,color_FFFFFF,t_70
[editormd _----]: https://blog.csdn.net/weixin_43769525/article/details/110849005
[SpringBoot _ Editormd]: https://juejin.cn/post/6899038096805855246