最近參考博客園寫博客的編輯器（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"; }
源代碼參考：
百度雲鏈接：https://pan.baidu.com/s/1hoVDzaKpdD8VPzJEhMN-jg
提取碼：x2bk