wangEditor3 - v3.1.1版本环境搭建-本地图片、本地视频上传功能实现

最新推荐文章于 2022-12-06 12:03:52 发布

置顶

小帽集团

最新推荐文章于 2022-12-06 12:03:52 发布

阅读量841

点赞数

分类专栏：技术分享文章标签： wangEditor3 wangEditor wangEditor3本地视频上传 wangEditor3本地图片上传

本文链接：https://blog.csdn.net/qq_37592561/article/details/103124275

版权

本文详细介绍了如何在wangEditor3中实现本地图片和视频上传功能。通过引用前端代码并结合特定的后台配置，如在wangEditorMore.js的4631行设置视频后台路径，可以成功实现上传功能。参考了多位博主的解决方案，包括图片上传的java配置和视频上传的原型方法修改。提供了优化后的wangEditorMore.js下载链接。

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

前文介绍 - 纲要

写这篇文章主要是因为最近项目所需，涉及到使用富文本编辑器生成HTML文本，同时实现PC的解析HTML文本的编辑功能及微信小程序端的HTML的富文本解析，然后看到荼蘼2018 的博客说wangEditor很不错，介于百度的UEditor已经停止维护多年，且比较臃肿、麻烦，就直接上手了wangEditor。

荼蘼2018：几种知名开源富文本编辑器记录和对比（仅供参考）
https://www.cnblogs.com/yoga21/p/9215000.html

使用工具：（本文就着重讲wangEditor的本地图片、视频上传功能）
PC端：wangEditor - v3.1.1版本
微信小程序端：WxParse

用了才发现，富文本编辑器还是比较麻烦的，并不是所有内容都可能直接生成转译，还要涉及与后台数据交互，而恰巧wangEditor官网对这一块的描述比较少，所以就分享一下个人达成的一些解决方案（综合网络各个大神的分享点拨才实现~）

先走一波原作者的辛苦成果
wangEditor —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。

官网：www.wangEditor.com
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor

正文 - 编辑器的创建（本地图片、视频上传功能）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demo</title>
</head>
<body>
    <div id="editor">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>

    <!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <!-- 注意， 图片、视频等所有方法的原型都在里面配置，这里仅做调用配置-->
    <!-- 注意， 我这里在原wangEditor.js基础上，根据项目重写了些方法-->
    <script type="text/javascript" src="../js/wangEditorMore.js"></script>
    
    <!--配置编辑器 配置本地图片上传 配置本地视频上传-->
    <script type="text/javascript">
        // 生成编辑器
	    var E = window.wangEditor
	    var editor = new E('#editor')

	    // 忽略粘贴内容中的图片 ： 建议加上&#x

最低0.47元/天解锁文章

小帽集团

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
wangEditor3 - v3.1.1版本环境搭建-本地图片、本地视频上传功能实现

前文介绍 - 纲要写这篇文章主要是因为最近项目所需，涉及到使用富文本编辑器生成HTML文本，同时实现PC的解析HTML文本的编辑功能及微信小程序端的HTML的富文本解析，然后看到荼蘼2018 的博客说wangEditor很不错，介于百度的UEditor已经停止维护多年，且比较臃肿、麻烦，就直接上手了wangEditor。荼蘼2018：几种知名开源富文本编辑器记录和对比（仅供参考）https...
复制链接

扫一扫