使用富文本编辑器wangEditor完成图片文件的上传

最新推荐文章于 2024-07-29 15:54:42 发布
最新推荐文章于 2024-07-29 15:54:42 发布
阅读量5.4k 收藏 15
点赞数 5
分类专栏： 开发 文章标签： wangEditor 富文本编辑器 图片上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43863007/article/details/88720132
版权
本文介绍了如何在项目中使用富文本编辑器wangEditor进行图片上传。从引入相关文件、创建编辑器、提交内容到controller层处理图片存储，详细阐述了每个步骤，包括配置上传路径、保存图片以及springmvc的bean配置。
摘要由CSDN通过智能技术生成
项目中一些特定的功能可能需要在页面中用到富文本编辑器来实现文件的输入上传等等，在这里用wangEditor来实现使用富文本编辑器进行文件图面的输入和上传保存，这里wangEditor也可以参考wangEditor使用文档
1.引入相关的wangEditor.js和jquery文件：
<head>
<script type="text/javascript" src="/static/js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="/static/js/wangEditor.js"></script>
</head>
2.在jsp页面创建富文本编辑器：
  1. 使用一个div标签来代表编辑器输入框，在script中给这个div输入框添加编辑器模型
  2. 提交编辑的内容需要使用textarea标签，它是将输入内容转换成html代码然后提交，form包裹起来
  3. script中先创建一个wangEditor对象，在最后用 editor.create()进行编辑器内容添加
  4. div是无法提交数据的，如果要提交输入的内容还需要把div中的数据同步到textarea标签中，使用onchange事件实现同步更新到 textarea
<body>
	<form action="EditorResult.jsp" method="post">
		<!-- 添加一个div用来显示富文本编辑器 -->
		<div id="editor">
最低0.47元/天 解锁文章
大房子爱生活
关注
专栏目录
图片上传后台实现，可用于wangEditor富文本编辑器
qq_20249821的博客
06-03 512
图片上传后台实现
百度富文本编辑器的上传图片的路径问题
weixin_30640291的博客
03-11 302
之前在写个人博客网站的时候，用到了百度的富文本编辑器，在往文章内容插入图片的时候，上传一直出错，总结了一下，与大家分享 在使用富文本编辑器的时候上传文件路径不对： 在配置文件config.json中，把imagePathFormat路径改为相对于服务器根目录的路径，如：/www/my_blog/resources/assets/ueditor/upload_img/{yyyy}{mm}{dd}...
Vue中使用wangEditor富文本编辑器|图片上传（含后端代码）
最新发布
weixin_45072119的博客
07-29 898
Vue中使用wangEditor富文本编辑器|图片上传（含后端代码）
react WangEditor 编辑器阿里云OSS上传图片
qq_43853213的博客
08-16 948
刚开始写的时候，去网上翻阅了很多文章，发现根本没有我想要的，有时候还有需要自己去阅读官方的文章来解决问题。学习上有一点很重要，我们需要的是怎么去官方阅读文档找到解决方案，而不是单纯的去网上搜索别人的代码。从上面的这个文档里面我们找到了一个重要的API函数，我们可以拿到两个参数，这个data对象可以自定义为file对象 ，就是我们之前。找到文档的这个描述，第一次找的时候，没有看到靠。第一步阅读wangEditor的文档。我们接下来看阿里云OSS文档。...
wangEditor3 React 上传图片
毛茸茸的枫哥
06-05 544
官网地址： https://www.kancloud.cn/wangfupeng/wangeditor3/332599 首先，在 React 项目中安装 wangEditor3 插件 npm install wangeditor 封装的子组件 import React, { PureComponent } from 'react' import E from 'wangeditor' import prefix from '../../config' class Editor extends .
react+wangeditor+图片上传服务器
倚树探星的博客
07-07 1365
一、安装 wangeditor 1、python 环境 下载安装 python 2.x 版本 去官网 www.python.org 下载 2.7.18 版本，点击安装，整个安装过程十分简单，只有一个地方需要注意：设置自动添加环境变量 安装好之后，打开cmd，输入python，看到版本号即为成功 2、安装 wangeditor npm install wangeditor --save ...
react 集成 wangEditor组件 可上传图文
织网的博客
07-08 977
简洁易用，功能强大 快速接入，配置简单，几行代码即可生成。集成了所有常见功能，无需二次开发。在 Vue React 也可以快速接入。 支持 JS Vue React 不依赖任何第三方框架，可用于 jQuery Vue React 等。wangEditor 提供了官方的 Vue React 组件。 踩过 4000+ 坑 wangEditor 开源多年，有大量用户使用和反馈，我们已解决了太多的用户问题（详见 github issues）。...............
轻量富文本编辑器wangEditor集成源码
02-22
《轻量富文本编辑器wangEditor集成源码详解》 wangEditor是一款优秀的开源富文本编辑器，因其轻量级、易用性和强大的功能而在开发者中备受青睐。它提供了丰富的API和自定义配置，使得在各种应用场景下都能灵活集成...
HTML前端wangEditor富文本编辑器demo（jQuery）
02-14
wangEditor就是这样一个强大的富文本编辑器，它专为JavaScript和jQuery设计，同时也能很好地融入Vue等现代前端框架。本示例是一个基于jQuery的wangEditor应用，具有丰富的功能，包括图片可拖拽调整大小，以及方便地...
移动端html富文本编辑器,PC/移动端的富文本编辑器wangEditor的使用
weixin_42502448的博客
06-18 2587
在刚开发的项目之中，在移动端/PC端，需要一个富文本编辑器，要求：简单-轻量-实用。比较了几种编辑器后，选择了wangEditor。移动端的截图(手机效果好些)：image.pngPC端的截图：image.png；在wangEditor的官网(http://www.wangeditor.com/)中，提供了一些常用的工具，可以按需来配置，还可以自己二次封装：image.png。先说配置：在PC端直...
wangEditor上传图片 demo
10-28
wangEditor上传图片，java图片上传后台代码；下载解压后导入eclipse,然后把项目发布到tomcat中即可，
轻量级富文本编辑器wangEditor结合vue使用方法示例
10-17
本文主要介绍如何在Vue.js项目中集成轻量级富文本编辑器wangEditor，提供一种实用的实现方式。 首先，安装wangEditor可以通过npm包管理器进行，输入以下命令： ```bash npm install wangeditor ``` 安装完成后，...
wangeditor富文本自定义图片上传
weixin_42439024的博客
07-28 4289
简单记录一下wangeditor上传图片的集中简单的方式。 1.使用 base64 保存图片 this.editor.customConfig.uploadImgShowBase64 = true 这种方式是将图片以base64的格式放到img标签中，官方图例 2.上传到服务器 ①设置上传文件的服务器路径 this.editor.customConfig.uploadImgServer = window.SITE_CONFIG.baseUrl + ‘common/upload/uploadFile’ ②使
wangEditor最新5.0 react 自定义上传图片
m0_59714321的博客
08-23 2592
wangEditor5.0自定义上传图片， react 用法
react引用wangEditor 5.0 自定义上传上传图片以及图片文字的复制粘贴
chenacxz的博客
04-03 1288
写在最后wangEditor在使用和接口文档来说，还是不错的。单从复制粘贴来说，比react-quill要好用。1、复制粘贴找不到当前鼠标下标，一般只能把光标写死，粘贴到最后或者最前。2、复制粘贴时，如果滚动条在最下面，粘贴完成后会直接跑到顶部。
wangeditor ( v4 版本 ) 上传图片功能的使用
我真的不想继续爆零了啊的博客
05-08 2226
官方文档 ( 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 .
php 使用 wangeditor4 图片上传到服务器
zjw715241005的博客
08-12 663
<div id="content" class="input-group col-sm-8" style="margin-left: 16%">{$list.content</div> <textarea style="display: none" id="contents" name="content" placeholder="请输入公告内容">{$list.content}</textarea> 然后就是图片上传代码首先要在js中配置点东西。...
wangEditor 5.0自定义上传图片
m0_48308579的博客
05-19 6247
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-12
富文本编辑器 wangeditor上传图片的实现方式有两种： 1. 前端直接上传：用户在富文本编辑器中选择图片后，前端将图片转换成 base64 编码，然后通过 AJAX 请求将 base64 编码的图片数据发送到后端，后端再将其转换成图片文件保存到服务器上。 2. 后端上传：用户在富文本编辑器中选择图片后，前端将图片文件通过表单提交到后端，后端再将其保存到服务器上，并返回图片的 URL 地址给前端，前端再将其插入到富文本编辑器中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值