springboot集成富文本编辑器

最新推荐文章于 2025-04-21 13:29:40 发布

去海边钓猪

最新推荐文章于 2025-04-21 13:29:40 发布

阅读量1.8k

点赞数 4

分类专栏： springboot 文章标签： editor springboot

本文链接：https://blog.csdn.net/super1223/article/details/118549406

版权

本文介绍了如何在SpringBoot项目中集成开源富文本编辑器Editor.md，包括下载编辑器、配置虚拟路径支持、处理图像上传与显示，以及解决数据回显和保存的问题。讲解了两种不同的图片存储方案，并提供了相关视图和接口的注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

springboot集成富文本编辑器

Editor.md : The open source embeddable online markdown editor (component), based on CodeMirror & jQuery & Marked.

Editor.md：一款开源的在线富文本编辑器，需要在jQuery或者CodeMirror或者Marked的支持下使用

Full-featured: Real-time Preview, Image (cross-domain) upload, Preformatted text/Code blocks/Tables insert, Code fold, Search replace, Read only, Themes, Multi-languages, L18n, HTML entities, Code syntax highlighting…

功能：实时预览、图像（跨域）上传、预格式化文本/代码块/表插入、代码折叠、搜索替换、仅阅读、主题、多语言、L18n、HTML 实体、代码语法突出显示…

下载editor.md

Editor下载https://gitee.com/pandao/editor.md

下载后解压导入springboot项目资源路径即可。

文件目录结构如下

可以没必要的示例文件和不需要的功能组件删除

设计数据库

DROP TABLE IF EXISTS `article`;

CREATE TABLE `article` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'int文章的唯一ID',
  `author` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '作者',
  `title` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL COMMENT '标题',
  `content` longtext NOT NULL COMMENT '文章的内容',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1018 DEFAULT CHARSET=utf8;

导入依赖

<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>com.alibaba</groupId>
        <artifactId>fastjson</artifactId>
        <version>1.2.62</version>
    </dependency>

    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <scope>runtime</scope>
    </dependency>
    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
        <optional>true</optional>
    </dependency>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-test</artifactId>
        <scope>test</scope>
        <exclusions>
            <exclusion>
                <groupId>org.junit.vintage</groupId>
                <artifactId>junit-vintage-engine</artifactId>
            </exclusion>
        </exclusions>
    </dependency>
</dependencies>

配置文件

spring:
  datasource:
    username: root
    password: 123456
    url: jdbc

最低0.47元/天解锁文章