【TinyMCE】TinyMCE编辑器的入门，提交文字，粘贴图片到后台
最近参考博客园写博客的编辑器（TinyMCE），自己也捣鼓了一下TinyMCE。
一篇博客储存在数据中，储存的是HTML代码<p>test</p><img src="img/1.jpg"/>这样的形式，图片上传到另外的文件夹，而不是存入数据库。
在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’ 为将页面中的<textarea></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("<img", "<img id=\"pasted_image_" + 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"; }
