zoukankan      html  css  js  c++  java
  • 【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',
         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 

  • 相关阅读:
    解决PKIX:unable to find valid certification path to requested target 的问题
    Linux 上的常用文件传输方式介绍与比较
    用VNC远程图形化连接Linux桌面的配置方法
    红帽中出现”This system is not registered with RHN”的解决方案
    linux安装时出现your cpu does not support long mode的解决方法
    CentOS SSH配置
    es6扩展运算符及rest运算符总结
    es6解构赋值总结
    tortoisegit安装、clon、推送
    es6环境搭建
  • 原文地址:https://www.cnblogs.com/to-red/p/11428562.html
Copyright © 2011-2022 走看看