PC端使用wangeditor富文本（JS引用方式）

最新推荐文章于 2024-06-07 19:23:27 发布

李蘑菇的小威

最新推荐文章于 2024-06-07 19:23:27 发布

阅读量2.6k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/zhazhawei9527/article/details/121462460

JS 专栏收录该内容

4 篇文章

订阅专栏

本文档详细介绍了如何在网页中集成WangEditor富文本编辑器，并配置图片和视频上传功能。通过设置上传参数、自定义上传函数，实现了将图片和视频上传到本地服务器，并在编辑器中插入。同时，还展示了获取和设置富文本内容，以及禁用编辑器的方法，适合前端开发者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JS使用wangeditor记录

官网富文本样式

wangeditor官网
 wangeditor官方文档

首先引入所用JS，也可下载到本地使用

（综合多方因素…我是下载到本地使用的）

1、创建div标签

<div id="richText"></div>

2、引入js

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>

3、基本操作（配置图片、视频上传到本地服务器）

<script type="text/javascript">
	// 获取本地存储的token
	var token = localStorage.getItem('token');
	const E = window.wangEditor
	editor = new E("#richText")
	// 忽略复制粘贴的图片
	editor.config.pasteIgnoreImg = true
	// 隐藏插入网络图片功能
	editor.config.showLinkImg = false
	// 自定义上传参数
	editor.config.uploadImgParams = {
		token: token,
	}
	// 自定义header
	editor.config.uploadImgHeaders = {
		Authorization: token,
	}
	
	// 配置图片上传地址（自定义上传图片同级，二者有一即可）
	// editor.config.uploadImgServer = apiUrlFn("/jlmanager/upload/uploadFile")
	
	// 自己实现上传图片
	editor.config.customUploadImg = function (resultFiles, insertImgFn) {
		// resultFiles 是 input 中选中的文件列表
		// insertImgFn 是获取图片 url 后，插入到编辑器的方法
		var files = resultFiles[0]
		var formData = new FormData();
		formData.append("file", files); //加入文件对象
		formData.append('multipartFile', files);
		$.ajax({
			url: '上传图片接口',
			type: 'POST',
			data: formData,
			cache: false,
			contentType: false,
			processData: false,
			dataType: "json",
			success: function(res) {
				if (res.code == 200) {
					// 上传图片，返回结果，将图片插入到编辑器中
					insertImgFn('上传图片后返回的url路径')
					console.log('上传成功！');
				} else {
					console.log('上传失败！');
				}
			}
		})
	}
	
	// 隐藏插入网络视频的功能
	editor.config.showLinkVideo = false
	// 自定义上传参数
	editor.config.uploadVideoParams = {
		token: token,
	}
	// 自定义 header
	editor.config.uploadVideoHeaders = {
		Authorization: token,
	}
	// 自定义上传视频
	editor.config.customUploadVideo = function (resultFiles, insertVideoFn) {
		// resultFiles 是 input 中选中的文件列表
		// insertVideoFn 是获取视频 url 后，插入到编辑器的方法
		var files = resultFiles[0]
		var formData = new FormData();
		formData.append("file", files); //加入文件对象
		formData.append('multipartFile', files);
		$.ajax({
			url: '上传视频接口',
			type: 'POST',
			data: formData,
			cache: false,
			contentType: false,
			processData: false,
			dataType: "json",
			success: function(res) {
				console.log(res)
				if (res.code == 200) {
					// 上传视频，返回结果，将视频地址插入到编辑器中
					insertVideoFn('上传视频后返回的url路径)
					console.log('上传成功！');
				} else {
					console.log('上传失败！');
				}
			}
		})
	}
	
	// 最后执行create()
	editor.create()
</script>

4、获取富文本内容

editor.txt.html()

5、设置富文本内容

editor.txt.html('<h3 style="text-align:center;"><a><b>设置内容试试</b></a></h3>')

禁用富文本

editor.disable()

菜鸟本菜描述

毕竟是菜鸟本菜，第一次使用这个富文本，及时记录，方便学习