H5，vue，react通用，富文本框组件，图片上传以及渲染页面

最新推荐文章于 2024-07-31 14:44:46 发布

置顶资深CV大师

最新推荐文章于 2024-07-31 14:44:46 发布

阅读量637

点赞数

分类专栏： H5html 文章标签： vue js javascript

本文链接：https://blog.csdn.net/weixin_44903107/article/details/106122299

版权

H5html 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

H5，vue，react富文本框组件，图片上传以及渲染页面，下面代码是大概逻辑是把富文本框里面的所有文字以及图片处理成字符串形式提交到业务接口，然后在对应页面可以做渲染。
如果要做视频处理成字符跟下面图片处理方式是一致的。
Quill官方中文文档

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="https://cdn.staticfile.org/quill/1.3.6/quill.snow.css" rel="stylesheet">
	</head>
	<body>
		<div id="editor">

		</div>
		<button type="button" onclick="getContents()">保存</button>
		<script src="https://cdn.staticfile.org/quill/1.3.6/quill.js"></script>
		<script src="./jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script>
			//这是工具栏上的按钮
			var toolbarOptions = [
				['bold', 'italic', 'underline', 'strike'], // toggled buttons
				['blockquote', 'code-block'],

				[{
					'list': 'ordered'
				}, {
					'list': 'bullet'
				}],
				[{
					'indent': '-1'
				}, {
					'indent': '+1'
				}], // outdent/indent
				[{
					'direction': 'rtl'
				}], // text direction

				// [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
				[{
					'header': [1, 2, 3, 4, 5, 6, false]
				}],

				[{
					'color': []
				}, {
					'background': []
				}],
				[{
					'font': []
				}],
				[{
					'align': []
				}],
				['image']
			];
			//初始化
			var quill = new Quill('#editor', {
				theme: 'snow',
				modules: {
					toolbar: {
						container: toolbarOptions,
						handlers: {
							//当点击工具栏上的图片按钮选择图片后，将图片传到服务器，拿到服务器的图片地址替换到富文本当前的data数据中。
							image: function(value) {
								var fileInput = this.container.querySelector('input.ql-image[type=file]');
								if (fileInput == null) {
									fileInput = document.createElement('input');
									fileInput.setAttribute('type', 'file');
									fileInput.setAttribute('accept', 'image/*');
									fileInput.classList.add('ql-image');
									fileInput.addEventListener('change', function() {
										if (fileInput.files != null && fileInput.files[0] != null) {
											var formData = new FormData();
											formData.append('file', fileInput.files[0]);
											//这里ajax可以根据对应框架request方法axios，或者fetch原理一样的。
											$.ajax({
												//url地址是上传图片的接口，上传成功返回图片地址。
												url: '这是专门上传图片的接口地址/Upload/Upload',
												type: 'POST',
												data: formData,
												processData: false,
												contentType: false,
												success: function(data) {
													// console.log(data)
													var range = quill.getSelection();
													//"http://dev.i-xoron.com/EIP.Files.Upload" + data.Data[0].ServerFileUrl这个是图片显示的前缀地址+接口返回地址
													quill.insertEmbed(range.index, 'image', "这是服务器图片前缀地址" + data.Data[0].ServerFileUrl);
												}
											});
										}
									});
									this.container.appendChild(fileInput);
								}
								fileInput.click();
							}
						}
					}
				}
			});
			
			//点击保存信息按钮，把富文本框的所有参数用JSON.stringify()以字符形式传到对应的接口。
			function getContents() {
				var delta = quill.getContents();
				
				//这里是模拟提交到对应接口
				localStorage.setItem('data',JSON.stringify(delta))
			}
			
			//在用户端渲染的话，需要先初始化一个空的富文本框，把工具栏隐藏掉，对应的样式优化一下。
			//然后通过接口接收我们上传的富文本的json字符串，再用quill.setContents(JSON.parse(delta));渲染页面
			
			const delta = localStorage.getItem('data')//这里是模拟从对应接口获取信息
			console.log(JSON.parse(delta))
			quill.setContents(JSON.parse(delta));
		</script>
	</body>
</html>