网站内容编辑器(本例中使用Editormd来演示如何配置使用使用富文本编辑器 )
优采云 发布时间: 2022-03-08 21:18网站内容编辑器(本例中使用Editormd来演示如何配置使用使用富文本编辑器
)
我们经常可以在各种博客网站 中看到用于编辑文章 的富文本编辑器。在富文本编辑器中，我们可以设置我们编辑内容的样式。富文本编辑器一般通过插件实现。我们只需要在页面中配置一些插件提供的API即可。
本示例使用 Editormd 演示如何配置富文本编辑器。
Editormd简介
Editormd是国内开源的在线Markdown编辑器，可嵌入的Markdown在线编辑器（组件），基于CodeMirror、jQuery和Marked构建。
主要特点
支持“标准”的 Markdown/CommonMark 和 Github 风格的语法，也可以变成代码编辑器。
官网地址：
创建 文章 表
在使用富文本编辑器之前，首先创建一个 文章 表格文章。这里只添加最基本的字段。如果以后想扩展，还可以添加标签、时间、浏览量、点赞和评论。和其他领域。创建表的SQL如下：
CREATE TABLE article(
id int(10) NOT NULL AUTO_INCREMENT COMMENT '文章唯一id',
author varchar(50) NOT NULL COMMENT '作者',
title varchar(100) NOT NULL COMMENT '标题',
content longtext NOT NULL COMMENT '文章内容'
PRIMARY KEY (id)
)ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8
建好表后，我们就可以开始编写代码来使用富文本编辑器了。
配置使用
1、创建SpringBoot项目并配置数据库连接。这里我们连接的是MyBatis（注意MySQL8需要在url中配置时区）。
spring:
datasource:
username: root
password: 123456
#?serverTimezone=UTC解决时区的报错
url: jdbc:mysql://localhost:3306/springboot?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8
driver-class-name: com.mysql.cj.jdbc.Driver
thymeleaf:
cache: false
mybatis:
mapper-locations: classpath:com/wunian/mapper/*.xml
type-aliases-package: com.wunian.pojo
2、导入 Editormd 静态资源。静态资源的目录结构如下图所示。
3、编写文章编辑页面editor.html，导入Editormd CSS和js文本，添加Editormd配置。
及时雨的Blog
标题：
作者：
var testEditor;
$(function() {
//这是一个最简单的Editormd配置，往后我们要修改Editormd的
//功能或者样式，就改这里的配置就可以了
testEditor = editormd("article-content", {
width : "90%",
height : 640,
syncScrolling : "single",
path : "../editormd/lib/"
});
4、以上配置只是最简单的富文本编辑器功能，我们可以添加更多配置来增加功能。
var testEditor;
//window.onload = function(){ }
$(function() {
testEditor = editormd("article-content", {
width : "95%",
height : 500,
syncScrolling : "single",
path : "../editormd/lib/",
// 自定义的增强配置！
saveHTMLToTextarea : true, // 保存 HTML 到 Textarea
emoji: true, // 开启表情的功能！ 图片的本地配置！
// theme: "light",//工具栏主题
// previewTheme: "dark",//预览主题
// editorTheme: "pastel-on-dark",//编辑主题
// markdown的配置！
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"]
},
// 这里的自定义功能就好比，Vue 组件
/*自定义功能按钮，下面我自定义了2个，一个是发布，一个是返回首页*/
toolbarIconTexts : {
releaseIcon : "发布",
index : "返回首页",
},
/*给自定义按钮指定回调函数*/
toolbarHandlers:{
releaseIcon : function(cm, icon, cursor, selection) {
//表单提交
mdEditorForm.method = "post";
mdEditorForm.action = "/article/addArticle";//提交至服务器的路径
mdEditorForm.submit();
},
index : function(){
window.location.href = '/';
},
}
});
});
5、因为emoji包的加载地址在国外，有时候可能加载不出来。我们可以在本地下载表情包，放到/static/editormd/plugins/emoji-dialog/emoji目录下，修改editormd.js中的表情加载路径就是我们的表情包存放的目录路径。
editormd.emoji = {
path : "../editormd/plugins/emoji-dialog/emoji/",
ext : ".png"
};
6、需要配置上传图片的功能。我们可以在当前项目目录下创建一个上传文件夹来上传文件（注意目录要手动创建，不要使用代码创建），然后配置虚拟路径（需要自定义WebMVC配置类）。
@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/");
}
}
7、在Controller中写一个文件上传请求方法。
// MarkDown博客图片上传问题
@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.mkdirs();
}
//上传文件地址
System.out.println("上传文件保存地址："+realPath);
//解决文件名字问题：我们使用uuid;
String filename = "ks-"+UUID.randomUUID().toString().replaceAll("-", "")+".jpg";
//通过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;
}
8、编写文章显示页面article.html，还需要配置Editormd才能正常显示一些MarkDown文本。
作者：
var testEditor;
$(function () {
// 绑定我们要渲染页面的 div
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
});
});
9、 最后别忘了写Controller请求方法，保存文章并显示文章。
//获取文章进行显示
@GetMapping("/{id}")
public String show(@PathVariable("id") int id,Model model){
Article article = articleMapper.getArticleById(id);
model.addAttribute("article",article);
return "article";
}
// 保存文章到数据库！
@PostMapping("/addArticle")
public String addArticle(Article article){
articleMapper.addArticle(article);
return "editor";
}
