wangeditor上传单张图片

最新推荐文章于 2024-06-28 22:02:01 发布
最新推荐文章于 2024-06-28 22:02:01 发布
阅读量5k 收藏 5
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzhou_98/article/details/83386112
版权

 

        第一次使用wangeditor算是遇到了很多坑，因为网上很多的都是用到java框架的，而框架我又没有学，经过两天的奋斗，算是初步解决上传一张图片的问题以及Tomcat重启后图片被删除的问题。

       首先要先下载wangeditor， 官网地址：wangEditor官网 

              然后二话不说 ，贴上前端代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Insert title here</title>

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript" src="wangeditor/wangEditor.js"></script>

</head>

<body>

    

     <div id="div1">

       

    </div>

    <textarea id="text1" style="width:100%; height:200px;"></textarea>

    <input type="button" id="tijiao" value="提交"/>

   

    <script type="text/javascript">

        var E = window.wangEditor

        var editor = new E('#div1');

        editor.customConfig.menus = [

//          'head',  // 标题

            'bold' /** 粗体*/, 'fontSize' /** 字号 */, 'fontName' /** 字体 */,'italic' /** 斜体 */, 

//          'underline',  // 下划线

            'strikeThrough',  // 删除线

            'foreColor',  // 文字颜色

            'backColor',  // 背景颜色

            'link',  // 插入链接

            'list',  // 列表

            'justify',  // 对齐方式

            'quote',  // 引用

           // 'emoticon',  // 表情   打开后支持表情功能

            'image',  // 插入图片

            'table',  // 表格

            'video',  // 插入视频

//          'code',  // 插入代码

            'undo',  // 撤销

            'redo'  // 重复

                         ]

    editor.customConfig.uploadImgServer = '/wangeditor/upload'  // 这是java的一个servlet

    // 将图片大小限制为 10M

    editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024

    editor.customConfig.uploadFileName = 'file';

    editor.customConfig.showLinkImg= false;

    // 限制一次最多上传 10张图片

    editor.customConfig.uploadImgMaxLength = 10;

    editor.customConfig.uploadImgHooks = {

    customInsert: function (insertImg, result, editor) {

           // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）

          // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果

          // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：

          var url =result.data;

          insertImg(url);

           // result 必须是一个 JSON 格式字符串！！！否则报错

          }

    }

        var $text1 = $('#text1')

        editor.customConfig.onchange = function (html) {

            // 监控变化，同步更新到 textarea

            $text1.val(html)

        }

        editor.create()

        // 初始化 textarea 的值

        $text1.val(editor.txt.html())

      

        $("#tijiao").click(function(){

         var content= $('#text1').val();

         console.log(content);

         alert(content);

        })

     

       </script>

</body>

</html>

 

 

 

 

package wangeditor.servlet;

 

import java.io.File;

import java.io.IOException;

import java.io.InputStream;

import java.io.PrintWriter;

import java.net.InetAddress;

import java.util.List;

import java.util.UUID;

 

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import org.apache.commons.fileupload.FileItem;

import org.apache.commons.fileupload.FileUploadException;

import org.apache.commons.fileupload.disk.DiskFileItemFactory;

import org.apache.commons.fileupload.servlet.ServletFileUpload;

import org.apache.commons.io.FileUtils;

 

import com.alibaba.fastjson.JSONArray;

import com.alibaba.fastjson.JSONObject;

 

import wangeditor.domain.wangeditor;

 

@WebServlet("/upload")

public class upload extends HttpServlet {

    private static final long serialVersionUID = 1L;

 

    @Override

    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

 

        String path = this.getClass().getClassLoader().getResource("/").getPath();

 

        int index = path.indexOf("wangeditor");

        path = path.substring(0, index + "wangeditor".length()) + "/resources/upload/";

        path = "E:/apache-tomcat-9.0.6/webapps/img";    //重点：在Tomcat目录下创建img文件，防止图片放在Tomcat目录下启动后，被删除掉

        DiskFileItemFactory factory = new DiskFileItemFactory();

        ServletFileUpload sfu = new ServletFileUpload(factory);

        sfu.setHeaderEncoding("UTF-8"); // 处理中文问题

        sfu.setSizeMax(1024 * 1024); // 限制文件大小

        String fileName = "";

        try {

            List<FileItem> fileItems = sfu.parseRequest(req);

            System.out.println(fileItems);

            for (FileItem item : fileItems) {

                System.out.println(item.getName());

                fileName = UUID.randomUUID().toString() + item.getName();

                item.write(new File(path + "/" + fileName));

 

            }

        } catch (Exception e) {

            e.printStackTrace();

        }

        // 获取图片url地址

        JSONObject json = new JSONObject();

        JSONArray arr = new JSONArray();

        InetAddress address = InetAddress.getLocalHost();// 获取的是本地的IP地址

        String hostAddress = address.getHostAddress();

        String imgUrl ="../img/"+fileName;

        arr.add(imgUrl);

        json.put("errno", 0);

        json.put("data", arr);

        resp.setContentType("text/html;charset=utf-8");

        PrintWriter out = resp.getWriter();

        out.print(json.toString());

        out.flush();

        out.close();

 

    }

}

 

上传后的效果：

 

zhouzhou_98
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
wangEditor上传图片 demo
10-28
wangEditor上传图片，java图片上传后台代码；下载解压后导入eclipse,然后把项目发布到tomcat中即可，
vue使用wangEditor（包含单文件，多文件上传）
bright的博客
12-12 1970
下载安装 npm i wangeditor --save 配置 1.在components创建一个wangEditor文件夹 2.在创建index.vue 内容： <template lang="html"> <div class="editor"> <div ref="editor" class="textNeirong"> </div> </div> </template> &lt
vue中使用wangeditor富文本编辑器（含图片上传和回显）
ssssummer的博客
11-20 9341
最近在写vue的项目中，遇到一个需求，点击编辑，显示弹框，在弹框中的富文本编辑器中编辑自定义文本样式，可以上传图片并回显。编辑完成确定后显示在页面上。 首先先写一个editor.vue的页面。（建议单独写一个页面，以后有其他需要用到的地方直接引用就可以了） <template> <div> <div ref="editor"></div> </div> </template> <script> impo
若依修改，如何安装wangEditor，图片上传接口编写。建议暴露专门写一个图片存储的接口
最新发布
weixin_54048131的博客
06-28 731
private static final String STORE_DIR = "D:\\project\\零一电科\\技术资料\\lingyidianke\\zeroBackEnd\\ZerosBackEnd\\src\\main\\resources\\pict\\";
学习六：laravel 和wangEditor3富文本编辑器的使用（单图片或多图片上传）
php阿宝的博客
08-06 425
准备 1、开启php.ini中的php_fileinfo扩展 2、修改配置文件config/filesystems.php，其他默认就好。 修改为： 'default' => env('FILESYSTEM_DRIVER', 'public'), 3、上传的照片放在storage/app/public下，但是上传的图片无法访问除 public 以外的目录，所以要设置上传文件的软链接...
wangEditor 5.0自定义上传图片
m0_48308579的博客
05-19 5961
wangEditor自定义上传图片 // 用户自定义上传图片 customUpload(file, insertFn) { var axios = require("axios"); var FormData = require("form-data"); var data = new FormData(); data.append("image", file);//file为上传文件返回的所有file var config = { method:
wangeditor批量上传图片
10-26
批量上传图片功能允许用户一次性选择多张图片并上传，提高了工作效率。在WangEditor中，这通常通过JavaScript的File API实现，允许用户选择多个文件，然后通过Ajax异步上传到服务器。每个图片文件会被转化为二进制...
php用wangeditor3实现图片上传功能
01-02
就在最近，公司让我写一个后台，其中用到了富文本编辑器。自从这个富文本的出现 我就慢慢的进入了一个坑，起初不知道用什么编辑器好，看了好多好多...然后就是图片上传代码 首先要在js中配置点东西。 [removed] va
wangEditor.js优化版，实现wangEditor本地图片上传、wangEditor本地视频上传函数的构建，部分显示样式bug的调整
11-18
wangEditor.js优化版，实现wangEditor本地图片上传、wangEditor本地视频上传函数的构建，部分显示样式bug的调整
vue+WangEditor编辑器配置上传图片
weixin_50971499的博客
02-23 1612
Vue + WangEditor编辑器配置上传图片
wangeditor ( v4 版本 ) 上传图片功能的使用
我真的不想继续爆零了啊的博客
05-08 2114
官方文档 ( v4 版本 )： https://www.wangeditor.com/v4/pages/07-%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87/ 此处仅说明单图片上传，且与 VUE 搭配使用。若有与官方文档不一致的写法，请以官方文档为主。 wangeditor 文档中的 server 接口返回格式 如下： { // errno 即错误代码，0 表示没有错误。 // 如果有错误，errno != 0，可通过下文中的监听函数 fail .
vue3 wangEditor富文本自定义上传本地图片
m0_73481765的博客
07-28 1968
事件中，我们监听了文件选择器的变化，获取到选中的本地图片文件，并调用了WangEditor的上传图片方法。最后，我们重置了文件选择器的值，以便下一次选择。事件来监听文件选择器的变化，获取到选中的本地图片文件。然后，将这个文件传递给WangEditor，让WangEditor进行上传。在这个示例中，我们在Vue3中创建了一个WangEditor实例，并进行了相关配置。Vue3和WangEditor都提供了上传本地图片的功能，可以结合使用实现自定义上传本地图片。中，我们获取到了本地图片文件，并将其传递给了。
wangeditor 富文本 使用及 上传本地图片的方法
weixin_61662162的博客
10-30 1572
文章标题：Vue组件实现富文本编辑器文章摘要：本文介绍了如何使用Vue和Wangeditor插件实现富文本编辑器组件，并详细解释了组件中的各个部分和功能。Vue组件实现富文本编辑器 在Web开发中，富文本编辑器是一个非常常见的功能，它能够让用户以所见即所得的方式编辑和排版文本内容。本文将介绍如何使用Vue和Wangeditor插件实现一个富文本编辑器组件。bash npm install @wangeditor/editor-for-vue 2. 创建富文本编辑器组件 在Vue项目中，创建一个名为RichT
vue中使用 wangEditor （一）(只做配置图片上传部分的说明)
weixin_43910427的博客
08-18 1179
wangEditor 的文档 1. 安装依赖 npm i wangeditor --save 2. 引入依赖 import E from "wangeditor"; 3. 初始化设置 // graphicDetails 是用来放置这个富文本的容器id initEditor(row){ editor = new E("#graphicDetails"); // 或者 const editor = new E( document.getElemen
wangEditor(4x) 上传图片功能及自定义上传图片功能
llllllol的博客
09-21 2236
wangEditor(4x) 上传图片功能及自定义上传图片功能
前端wangEditor3上传图片JAVA实现给图片添加水印示例代码
lan_qinger的博客
03-30 586
前端jsp：&lt;form id="newsForm" action="save.form" method="post"&gt; &lt;label&gt;标题：&lt;/label&gt;&lt;input type="text" name="title" style="height:25px;width:150px;&q
Java处理wangeditor上传图片并升级一下
jamenu的博客
09-17 736
wangeditor上传图片 1.在页面上设置富文本编辑器 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="static/js/jquery-3.5.1.js"></s
wangeditor 上传图片到服务器、七牛云
细节怪的博客
02-20 2266
富文本编辑器 wangeditor 中自定义插入图片到七牛云、以base64方式将图片插入编辑器、上传到后端服务器等。
wangEditor3上传图片
热门推荐
malimingwq的博客
03-01 1万+
我用的是myeclipse 2017,spring boot+thymeleaf项目,wangEditor3与wangeditor2的配置方式不同，切记看文档，最下方是官方文档。 一.下载，创建编辑器以及配置 1.1 下载wangEditor3的GitHub网址： https://github.com/wangfupeng1988/wangEditor/releases 1.2 选取下载的...
wangEditor上传图片
10-17
wangEditor是一款富文本编辑器，支持上传图片。具体操作步骤如下： 1. 在页面中引入wangEditor的js和css文件。 2. 创建一个div元素作为编辑器的容器。 3. 初始化编辑器，将容器作为参数传入。 4. 在编辑器中添加上传图片的功能。 具体实现代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>wangEditor上传图片</title> <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/wangeditor@4.6.16/dist/wangEditor.min.css"> </head> <body> <div id="editor"></div> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@4.6.16/dist/wangEditor.min.js"></script> <script type="text/javascript"> const editor = new wangEditor('#editor') editor.config.uploadImgServer = '/upload' // 上传图片的接口地址 editor.config.uploadFileName = 'file' // 上传图片的文件名 editor.config.uploadImgHeaders = { // 上传图片时需要携带的请求头 'Authorization': 'Bearer ' + token } editor.create() </script> </body> </html> ``` 其中，`/upload`是上传图片的接口地址，`file`是上传图片的文件名，`token`是需要携带的请求头中的token值。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值