Spring Boot集成多款富文本编辑器与图片上传实战-开发者社区-阿里云

一、概述

其实这个就是富文本编辑器，市面上有许多非常成熟的富文本编辑器，比如：

Editor.md——功能非常丰富的编辑器，左端编辑，右端预览，非常方便，完全免费

官网：https://pandao.github.io/editor.md/

wangEditor——基于javascript和css开发的 Web富文本编辑器，轻量、简洁、界面美观、易用、开源免费。(个人最喜欢的一款)

官网：http://www.wangeditor.com/

TinyMCE——TinyMCE是一个轻量级的基于浏览器的所见即所得编辑器，由JavaScript写成。它对IE6+和Firefox1.5+都有着非常良好的支持。功能齐全，界面美观，就是文档是英文的，对开发人员英文水平有一定要求。

官网：https://www.tiny.cloud/docs/demo/full-featured/
博客园

百度ueditor——UEditor是由百度web前端研发部开发所见即所得富文本web编辑器，具有轻量，功能齐全，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码，缺点是已经没有更新了

官网：https://ueditor.baidu.com/website/onlinedemo.html

kindeditor——界面经典。

官网：http://kindeditor.net/demo.php

Textbox——Textbox是一款极简但功能强大的在线文本编辑器，支持桌面设备和移动设备。主要功能包含内置的图像处理和存储、文件拖放、拼写检查和自动更正。此外，该工具还实现了屏幕阅读器等辅助技术，并符合WAI-ARIA可访问性标准。

官网：https://textbox.io/

CKEditor——国外的，界面美观。

官网：https://ckeditor.com/ckeditor-5/demo/

quill——功能强大，还可以编辑公式等

官网：https://quilljs.com/

simditor——界面美观，功能较全。

官网：https://simditor.tower.im/

summernote——UI好看，精美

官网：https://summernote.org/

jodit——功能齐全

官网：https://xdsoft.net/jodit/

froala Editor——界面非常好看，功能非常强大，非常好用（非免费）

官网：https://www.froala.com/wysiwyg-editor

总之，目前可用的富文本编辑器有很多......这只是其中的一部分

二、举例使用

第一种NicEdit

官网描述：

What is NicEdit?

NicEdit is a Lightweight, Cross Platform, Inline Content Editor to allow easy editing of web site content on the fly in the browser.

NicEdit Javascript integrates into any site in seconds to make any element/div editable or convert standard textareas to rich text editing

什么是NicEdit？

NicEdit是一个轻量级，跨平台的内联内容编辑器，可以轻松地在浏览器中即时编辑网站内容。

NicEdit Javascript可以在几秒钟内集成到任何站点中，以使任何元素/ div可编辑或将标准文本区域转换为富文本编辑。

官网地址

http://www.nicedit.com/index.php

如何使用

只需引入官网的一个js文件和一个图片即可

<script type="text/javascript" src="../nicEdit.js"></script>
<script type="text/javascript">
  bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
</script>
 
<h4>First Textarea</h4>
<textarea name="area1" cols="40"></textarea>

效果展示

其中用到的gif图片的位置可以修改js文件配置。

案例代码获取方式，关注微信公众号 java一号回复 “富文本” 即可

第二种kindeditor

官网描述

KindEditor 是什么？

KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。

官网地址

http://kindeditor.net/demo.php

如何使用

1.1. 使用方法

第一步：在jsp中引入KindEditor的css和js代码。

第二步：在表单中添加一个textarea控件。是一个富文本编辑器的载体。类似数据源。

</form>

第三步：初始化富文本编辑器。使用官方提供的方法初始化。

var kingEditorParams ={

filePostName : "file",//指定上传文件参数名称

uploadJson:'upload2.html',//指定上传文件请求的url。

dir:"image"//上传类型，分别为image、flash、media、file

}

var editor;

$(function () {

editor=KindEditor.create($("#editor"),kingEditorParams);

})

</script>

js提交请求的时候，同步富文本框到textarea

editor.sync();//同步富文本编辑器到textarea

上传图片时controller方法：

@ResponseBody

String json = "{\"error\":0,\"url\":\"" + url + "\"}";

第三种：Editor.md

作为一个资深码农，Mardown必然是程序猿喜欢的格式，看下面，

我们可以在官网下载它：https://pandao.github.io/editor.md/ ，得到它的压缩包！

解压以后，在examples目录下面，可以看到他的很多案例使用！学习，其实就是看人家怎么写的，然后进行模仿就好了！

基本使用

我们可以将整个解压的文件倒入我们的项目，将一些无用的测试和案例删掉即可！

1、导入 editor.md 资源，删除多余文件

2、编辑文章页面 editor.html、需要引入 jQuery；

<!DOCTYPE html>
<html class="x-admin-sm" lang="zh" xmlns:th="http://www.thymeleaf.org">
 
<head>
   <meta charset="UTF-8">
   <title>Blog</title>
   <meta name="renderer" content="webkit">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
   <!--Editor.md-->
   <link rel="stylesheet" th:href="@{/editormd/css/editormd.css}"/>
   <link rel="shortcut icon" href="https://pandao.github.io/editor.md/favicon.ico" type="image/x-icon" />
</head>
 
<body>
 
<div class="layui-fluid">
   <div class="layui-row layui-col-space15">
       <div class="layui-col-md12">
           <!--博客表单-->
           <form name="mdEditorForm">
               <div>
                  标题：<input type="text" name="title">
               </div>
               <div>
                  作者：<input type="text" name="author">
               </div>
               <div id="article-content">
                   <textarea name="content" id="content" style="display:none;"> </textarea>
               </div>
           </form>
 
       </div>
   </div>
</div>
</body>
 
<!--editormd-->
<script th:src="@{/editormd/lib/jquery.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>
 
<script type="text/javascript">
   var testEditor;
 
   //window.onload = function(){ }
   $(function() {
       testEditor = editormd("article-content", {
           width : "95%",
           height : 400,
           syncScrolling : "single",
           path : "../editormd/lib/",
           saveHTMLToTextarea : true,    // 保存 HTML 到 Textarea
           emoji: true,
           theme: "dark",//工具栏主题
           previewTheme: "dark",//预览主题
           editorTheme: "pastel-on-dark",//编辑主题
           tex : true,                   // 开启科学公式TeX语言支持，默认关闭
           flowChart : true,             // 开启流程图支持，默认关闭
           sequenceDiagram : true,       // 开启时序/序列图支持，默认关闭,
           //图片上传
           imageUpload : true,
           imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
           imageUploadURL : "/article/file/upload",
           onload : function() {
               console.log('onload', this);
          },
           /*指定需要显示的功能按钮*/
           toolbarIcons : function() {
               return ["undo","redo","|",
                   "bold","del","italic","quote","ucwords","uppercase","lowercase","|",
                   "h1","h2","h3","h4","h5","h6","|",
                   "list-ul","list-ol","hr","|",
                   "link","reference-link","image","code","preformatted-text",
                   "code-block","table","datetime","emoji","html-entities","pagebreak","|",
                   "goto-line","watch","preview","fullscreen","clear","search","|",
                   "help","info","releaseIcon", "index"]
          },
 
           /*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
           toolbarIconTexts : {
               releaseIcon : "<span bgcolor=\"gray\">发布</span>",
               index : "<span bgcolor=\"red\">返回首页</span>",
          },
 
           /*给自定义按钮指定回调函数*/
           toolbarHandlers:{
               releaseIcon : function(cm, icon, cursor, selection) {
                   //表单提交
                   mdEditorForm.method = "post";
                   mdEditorForm.action = "/article/addArticle";//提交至服务器的路径
                   mdEditorForm.submit();
              },
               index : function(){
                   window.location.href = '/';
              },
          }
      });
  });
</script>
 
</html>

@Controller
@RequestMapping("/article")
public class ArticleController {
 
   @GetMapping("/toEditor")
   public String toEditor(){
       return "editor";
  }
   
   @PostMapping("/addArticle")
   public String addArticle(Article article){
       articleMapper.addArticle(article);
       return "editor";
  }
   
}

图片上传问题

1、前端js中添加配置

//图片上传
imageUpload : true,
imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL : "/article/file/upload", // //这个是上传图片时的访问地址

2、后端请求，接收保存这个图片, 需要导入 FastJson 的依赖！

//博客图片上传问题
@RequestMapping("/file/upload")
@ResponseBody
public JSONObject fileUpload(@RequestParam(value = "editormd-image-file", required = true) MultipartFile file, HttpServletRequest request) throws IOException {
    //上传路径保存设置
 
    //获得SpringBoot当前项目的路径：System.getProperty("user.dir")
    String path = System.getProperty("user.dir")+"/upload/";
 
    //按照月份进行分类：
    Calendar instance = Calendar.getInstance();
    String month = (instance.get(Calendar.MONTH) + 1)+"月";
    path = path+month;
 
    File realPath = new File(path);
    if (!realPath.exists()){
        realPath.mkdir();
    }
 
    //上传文件地址
    System.out.println("上传文件保存地址："+realPath);
 
    //解决文件名字问题：我们使用uuid;
    String filename = "ks-"+UUID.randomUUID().toString().replaceAll("-", "");
    //通过CommonsMultipartFile的方法直接写文件（注意这个时候）
    file.transferTo(new File(realPath +"/"+ filename));
 
    //给editormd进行回调
    JSONObject res = new JSONObject();
    res.put("url","/upload/"+month+"/"+ filename);
    res.put("success", 1);
    res.put("message", "upload success!");
 
    return res;
}

3、解决文件回显显示的问题，设置虚拟目录映射！在我们自己拓展的MvcConfig中进行配置即可！

@Configuration
public class MyMvcConfig implements WebMvcConfigurer {
 
    // 文件保存在真实目录/upload/下，
    // 访问的时候使用虚路径/upload，比如文件名为1.png，就直接/upload/1.png就ok了。
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/upload/**")
            .addResourceLocations("file:"+System.getProperty("user.dir")+"/upload/");
    }
 
}

表情包

自己手动下载，emoji 表情包，放到图片路径下：

修改editormd.js文件

// Emoji graphics files url path
editormd.emoji     = {
    path  : "../editormd/plugins/emoji-dialog/emoji/",
    ext   : ".png"
};

文章展示

1、Controller 中增加方法

@GetMapping("/{id}")
public String show(@PathVariable("id") int id,Model model){
    Article article = articleMapper.getArticleById(id);
    model.addAttribute("article",article);
    return "article";
}

2、页面 article.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title th:text="${article.title}"></title>
</head>
<body>
 
<div>
    <!--文章头部信息：标题，作者，最后更新日期，导航-->
    <h2 style="margin: auto 0" th:text="${article.title}"></h2>
    作者：<span style="float: left" th:text="${article.author}"></span>
    <!--文章主体内容-->
    <div id="doc-content">
        <textarea style="display:none;" placeholder="markdown" th:text="${article.content}"></textarea>
    </div>
 
</div>
 
<link rel="stylesheet" th:href="@{/editormd/css/editormd.preview.css}" />
<script th:src="@{/editormd/lib/jquery.min.js}"></script>
<script th:src="@{/editormd/lib/marked.min.js}"></script>
<script th:src="@{/editormd/lib/prettify.min.js}"></script>
<script th:src="@{/editormd/lib/raphael.min.js}"></script>
<script th:src="@{/editormd/lib/underscore.min.js}"></script>
<script th:src="@{/editormd/lib/sequence-diagram.min.js}"></script>
<script th:src="@{/editormd/lib/flowchart.min.js}"></script>
<script th:src="@{/editormd/lib/jquery.flowchart.min.js}"></script>
<script th:src="@{/editormd/editormd.js}"></script>
 
<script type="text/javascript">
    var testEditor;
    $(function () {
        testEditor = editormd.markdownToHTML("doc-content", {//注意：这里是上面DIV的id
            htmlDecode: "style,script,iframe",
            emoji: true,
            taskList: true,
            tocm: true,
            tex: true, // 默认不解析
            flowChart: true, // 默认不解析
            sequenceDiagram: true, // 默认不解析
            codeFold: true
        });});
</script>
</body>
</html>

重启项目，访问进行测试！大功告成！

富文本编辑器使用详细介绍

一、概述

二、举例使用

第一种NicEdit

官网描述：

官网地址

如何使用

第二种kindeditor

官网描述

官网地址

第三种：Editor.md

基本使用

图片上传问题

表情包

文章展示

热门文章

最新文章

相关电子书

探索云世界

热门

云计算

大数据

云原生

人工智能

数据库

开发与运维

活动广场

任务中心

训练营

直播

乘风者计划

下载

镜像站

技术资料

富文本编辑器使用详细介绍

一、概述

二、举例使用

第一种NicEdit

官网描述：

官网地址

如何使用

第二种kindeditor

官网描述

官网地址

第三种：Editor.md

基本使用

图片上传问题

表情包

文章展示

热门文章

最新文章

相关电子书