tinymce编辑器上传本地图片 springboot接收数据

一叶一菩提魁

于 2021-04-13 17:17:01 发布

阅读量1.0k

点赞数

分类专栏：笔记文章标签： java spring

本文链接：https://blog.csdn.net/A980719/article/details/115672953

版权

本文介绍了如何使用tinymce编辑器上传本地图片，并通过springboot后台接收数据。作者在寻找相关教程未果后，自行实现了该功能，并提供了前后端关键代码示例。在实际操作中，可能会遇到服务器资源路径暴露的问题，解决方案是配置虚拟路径映射以确保安全。

摘要由CSDN通过智能技术生成

tinymce一个比较好用的文本编译器
是搭建博客的好工具具体可以查看中文文档http://tinymce.ax-z.cn/
我就不多说了

下面说一下需求
我要用 tinymce 上传本地图片 springboot接收数据

在网上找了好久没有发现一springboot为后台的所以自己写了一个

二话不说上代码
前台页面我只加了上传图片有需要的可以自己加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/tinymce/tinymce.min.js"></script>
    <script src="/js/examples/jquery.min.js"></script>
    <script>
        tinymce.init({
   
            selector: '#mytextarea',
            plugins: 'image',
            toolbar: 'image',
            language: 'zh_CN',
            height: this.height,
            body_class: 'panel-body ',
            object_resizing: false,
            images_upload_handler: function (blobInfo, success, failure) {
   //关键代码
                var form = new FormData();
                console.log(blobInfo)
                form.append('editormd-image-file', blobInfo.blob(),  blobInfo.filename());
                $.ajax({
   
                    url: "/article/image/upload" ,
                    type: "post",
                    data: form,
                    dataType: 'json',
                    processData: false,
                    contentType: false,
                    success: function (data) {
   
                        console.log(data);
                        var imgUrl =data.url;//根据返回值得不同这里要自己定义
                        console.log(imgUrl

最低0.47元/天解锁文章

一叶一菩提魁

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
tinymce编辑器上传本地图片 springboot接收数据

tinymce一个比较好用的文本编译器是搭建博客的好工具具体可以查看中文文档http://tinymce.ax-z.cn/我就不多说了下面说一下需求我要用 tinymce 上传本地图片 springboot接收数据在网上找了好久没有发现一springboot为后台的所以自己写了一个二话不说上代码前台页面我只加了上传图片有需要的可以自己加<!DOCTYPE html><html lang="en"><head> <meta chars
复制链接

扫一扫