最近参考博客园写博客的编辑器（TinyMCE），自己也捣鼓了一下TinyMCE。
一篇博客储存在数据中，储存的是HTML代码
test
这样的形式，图片上传到另外的文件夹，而不是存入数据库。
在TinyMCE中，有强大的paste插件。配置好后台之后，粘贴图片到编辑器，图片就会自动上传（参考博客园的粘贴图片）。
参考的链接：
https://www.cnblogs.com/moogle/p/8079610.html#commentform
https://blog.csdn.net/weixin_41660508/article/details/83185049
前端
我使用的TinyMCE4，已经有TinyMCE5了，但是注册一系列的有点麻烦。
示例代码（属性介绍）：
在下面的代码中，tinymce.init为初始化编辑器。
selector:‘textarea’ 为将页面中的变为编辑区域
width和height 为编辑器的宽度和高度
plugins 为编辑器使用的插件，image为图片插件-支持添加外部图片的链接，link为支持添加超链接，code为支持添加代码块，paste为支持粘贴图片等，lists为添加列表，table为添加表格
custom_undo_redo_levels 能撤销的次数，不限制可能会消耗过多的内存
paste_data_image 启用粘贴图片功能
convert_urls：false 禁用自动转化URL，启用的话，保存到数据库的时候，会自动将文件路径处理
paste_preprocess() 函数为粘贴图片时，执行的处理方法（将该图片替换为一个有ID的元素，元素使用全局计数器，并使用异步方法上传到指定的路径，本例中为/uploadimg。上传之后会返回一个访问图片的路径，替换原先的src属性）
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>编辑博客页面title>
head>
<body>
<script src="http://cdn.tinymce.com/4/tinymce.min.js">script>
<script src="js/jquery.min.js">script>
<script>
globalcounter = 1;
tinymce.init({
selector: 'textarea',
width: 1000,
height: 450,
plugins: 'image link code paste lists table',
custom_undo_redo_levels: 10,
paste_data_images: true,
paste_preprocess: function(plugin, args) {
args.content = args.content.replace("", "![]()
" + parseInt(globalcounter) + "\"");
console.log(args.content);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if (this.readyState == 4 && this.status == 200){
upload(this.response);
}
};
xhr.open('GET', args.content.split('"')[3]);
xhr.responseType = 'blob';
xhr.send();
function upload(BlobFile){
var x = new XMLHttpRequest();
x.onreadystatechange = function(){
if( this.readyState == 4 && this.status == 200 ){
/* 返回的访问链接 */
data = this.responseText;
console.log('response data: ' + data);
id = parseInt(globalcounter++);
/* 此处为获取ID为mce_1_ifr的iframe，再获取其下ID为pastes_image_x 的图片，然后更改图片的链接。不同版本下iframe的ID可能会不同，注意观察 */
document.getElementById("blog-content_ifr").contentWindow.document.getElementById("pasted_image_" + id).setAttribute("src", data);
}
};
/* 使用post方法，上传的API为http://localhost:8080/uploadimg */
x.open('POST', '/uploadimg');
x.send(BlobFile);
}
}
});
script>
<form method="post" action="/uploadblog">
<textarea id="blog-content" name="blog-content" placeholder="在此处输入...">textarea>
<button id="blog-save-button">保存button>
form>
body>
html>
后端
在后端中，接收图片，保存到服务器的地址中。如果使用springboot作为后台会出现问题，上传到服务器之后，会返回一个图片的路径，但是又访问不了这张图片。我把这部分分为一个单独的部分写了，参考https://www.cnblogs.com/to-red/p/11425770.html
粘贴完了图片之后，提交博客到后台。在form中添加一个button，给textarea一个name，点击button就会自动提交。
后台的接收：
@RequestMapping(value = "/uploadblog", method = RequestMethod.POST) public String uploadblog(@RequestParam("blog-content") String blogContent) { logger.info("博客的内容为："+ blogContent); // 调用Service // 存入数据库 // 回显 // uploadService.uploadblog(blog); return "index"; }
源代码参考：
百度云链接：https://pan.baidu.com/s/1hoVDzaKpdD8VPzJEhMN-jg
提取码：x2bk