[JavaScript知识库]PC端使用wangeditor富文本（JS引用方式）

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()

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