【TinyMCE】TinyMCE编辑器的入门，提交文字，粘贴图片到后台

最近参考博客园写博客的编辑器（TinyMCE），自己也捣鼓了一下TinyMCE。

一篇博客储存在数据中，储存的是HTML代码<p>test</p><img src="img/1.jpg"/>这样的形式，图片上传到另外的文件夹，而不是存入数据库。

在TinyMCE中，有强大的paste插件。配置好后台之后，粘贴图片到编辑器，图片就会自动上传（参考博客园的粘贴图片）。

前端

　　我使用的TinyMCE4，已经有TinyMCE5了，但是注册一系列的有点麻烦。

　　示例代码（属性介绍）：

在下面的代码中，tinymce.init为初始化编辑器。

selector:‘textarea’ 为将页面中的<textarea></textarea>变为编辑区域

width和height 为编辑器的宽度和高度

plugins 为编辑器使用的插件，image为图片插件-支持添加外部图片的链接，link为支持添加超链接，code为支持添加代码块，paste为支持粘贴图片等，lists为添加列表，table为添加表格

custom_undo_redo_levels 能撤销的次数，不限制可能会消耗过多的内存

paste_data_image 启用粘贴图片功能

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

原文地址：https://www.cnblogs.com/to-red/p/11428562.html