【TinyMCE】TinyMCE編輯器的入門，提交文字，粘貼圖片到後臺

時間 2019-11-10

標籤 TinyMCE tinymce 編輯器入門提交文字粘貼圖片後臺简体版

原文原文鏈接

最近參考博客園寫博客的編輯器（TinyMCE），本身也搗鼓了一下TinyMCE。html

一篇博客儲存在數據中，儲存的是HTML代碼<p>test</p><img src="img/1.jpg"/>這樣的形式，圖片上傳到另外的文件夾，而不是存入數據庫。前端

在TinyMCE中，有強大的paste插件。配置好後臺以後，粘貼圖片到編輯器，圖片就會自動上傳（參考博客園的粘貼圖片）。jquery

參考的連接：spring

https://www.cnblogs.com/moogle/p/8079610.html#commentform數據庫

https://blog.csdn.net/weixin_41660508/article/details/83185049後端

前端

　　我使用的TinyMCE4，已經有TinyMCE5了，可是註冊一系列的有點麻煩。springboot

　　示例代碼（屬性介紹）：服務器

在下面的代碼中，tinymce.init爲初始化編輯器。app

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做爲後臺會出現問題，上傳到服務器以後，會返回一個圖片的路徑，可是又訪問不了這張圖片。我把這部分分爲一個單獨的部分寫了，參考http://www.javashuo.com/article/p-dwrdaiat-eb.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";
    }