devbox
盐析白兔
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp自定义富文本编辑器+内容渲染回显功能(多端可用)_uniapp 富文本

作者：盐析白兔 | 2024-08-13 11:39:35

赞

踩

uniapp 富文本

这个编辑器app端、H5端、小程序端都可以用，这里以小程序为例。

先上效果图，文本编辑、样式调整、图片上传等各项功能皆可满足。

一、整体介绍

 使用富文本编辑并且可以渲染内容这个功能，主要涉及到两个页面。

①触发编辑的页面(按钮+接收富文本内容)②编辑器页面(效果图页面)

二、完整代码 
 页面①：

写一个按钮点击事件跳转到编辑器页面（这部分代码很简单就不展示了）

接收富文本内容的代码如下，

  1. // 接收富文本
  2. uni.$on('getContents', data => {
  3. 	console.log("接收到的内容：", data); // 输出接收到的内容
  4. });

可以在页面初始化的时候接收富文本内容，我是放在生命周期created()阶段进行接收的。接收到的data可以自定义变量进行赋值，想在哪里展示都可以。

页面②：

 比较重要的是，在失去焦点的时候，触发的方法。也是在这里获取富文本内容

  1. // 获取富文本编辑器的内容
  2. uni.$emit('getContents', res)

为了方便回显，可以将富文本内容缓存一下。然后再次进入编辑器页面的时候，获取一下缓存就可以回显了，但是要及时清除上一次的缓存（需要的时候要在页面①清除） 

  1. // 存储富文本内容 方便下次显示
  2. wx.setStorageSync('getContents', res);
  3.  
  4. //获取缓存的内容
  5. var lastContent = wx.getStorageSync('getContents');
  6.  
  7. //移除富文本缓存内容
  8. wx.removeStorageSync('getContents')
   重点！！！下面是编辑器的完整代码： 
  1. <template>
  2. 	<view class="container">
  3. 		<view class="page-body">
  4. 			<view class='wrapper'>
  5. 				<view class='toolbar' @tap="format">
  6. 					<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
  7. 					</view>
  8.  
  9. 					<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
  10. 					</view>
  11.  
  12. 					<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
  13. 						data-name="underline"></view>
  14.  
  15. 					<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
  16. 						data-name="strike"></view>
  17.  
  18. 					<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
  19. 						data-name="align" data-value="left"></view>
  20.  
  21. 					<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
  22. 						data-name="align" data-value="center"></view>
  23.  
  24. 					<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
  25. 						data-name="align" data-value="right"></view>
  26.  
  27. 					<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
  28. 						data-name="align" data-value="justify"></view>
  29.  
  30. 					<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
  31. 						data-name="lineHeight" data-value="2"></view>
  32.  
  33. 					<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
  34. 						data-name="letterSpacing" data-value="2em"></view>
  35.  
  36. 					<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"
  37. 						data-name="marginTop" data-value="20px"></view>
  38.  
  39. 					<view :class="formats.previewarginBottom ? 'ql-active' : ''"
  40. 						class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom" data-value="20px"></view>
  41.  
  42. 					<!-- <view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
  43. 						data-name="fontFamily" data-value="Pacifico"></view> -->
  44.  
  45. 					<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
  46. 						data-name="fontSize" data-value="24px"></view>
  47.  
  48. 					<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"
  49. 						data-name="color" data-value="#0000ff"></view>
  50.  
  51. 					<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
  52. 						class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
  53.  
  54. 					<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
  55.  
  56. 					<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
  57. 						data-name="list" data-value="ordered"></view>
  58.  
  59. 					<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
  60. 						data-name="list" data-value="bullet"></view>
  61.  
  62. 					<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
  63. 					<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
  64.  
  65. 					<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
  66. 						data-name="header" :data-value="1"></view>
  67.  
  68. 					<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
  69. 						data-name="script" data-value="sub"></view>
  70.  
  71. 					<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
  72. 						data-name="script" data-value="super"></view>
  73.  
  74. 					<!-- <view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
  75. 						data-name="direction" data-value="rtl"></view> -->
  76. 					<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
  77. 					<!-- <view class="iconfont icon-clearedformat" @tap="removeFormat"></view> -->
  78. 					<view class="iconfont icon-charutupian" @tap="insertImage"></view>
  79. 					<view class="iconfont icon-date" @tap="insertDate"></view>
  80. 					<view class="iconfont icon-shanchu" @tap="clear"></view>
  81. 					<view class="iconfont icon-undo" @tap="undo"></view>
  82. 					<view class="iconfont icon-redo" @tap="redo"></view>
  83. 				</view>
  84.  
  85. 				<editor id="editor" class="ql-container" placeholder="开始输入..." showImgSize showImgToolbar showImgResize
  86. 					@statuschange="onStatusChange" :read-only="false" @ready="onEditorReady" @input="getContents">
  87. 				</editor>
  88. 			</view>
  89. 		</view>
  90.  
  91. 	</view>
  92. </template>
  93.  
  94. <script>
  95. 	export default {
  96. 		data() {
  97. 			return {
  98. 				formats: {},
  99. 				timer: null,
  100. 				editorDetail: "",
  101. 			}
  102. 		},
  103. 		mounted() {
  104. 			this.onEditorReady();
  105. 			console.log('-------------this',this)
  106. 			// 将数据渲染到富文本内
  107. 			this.timer = setInterval(() => {
  108. 				if (this.editorDetail) {
  109. 					clearInterval(this.timer)
  110. 					//延时0.5秒 方便接收缓存的上次内容
  111. 					setTimeout(res => {
  112. 						this.editorCtx.setContents({
  113. 							html: this.editorDetail,
  114. 							success(res) {
  115. 								console.log('--------',res);
  116. 							}
  117. 						})
  118. 					},500)
  119. 				}
  120. 			}, 100)
  121. 		},
  122. 		
  123. 		created() {
  124. 			//获取缓存的内容
  125. 			var lastContent = wx.getStorageSync('getContents');
  126. 			if (lastContent && lastContent.html) {
  127. 				this.editorDetail = lastContent.html
  128. 			}
  129. 		},
  130. 		
  131. 		methods: {
  132. 			// 失去焦点时触发，获取富文本的内容
  133. 			getContents() {
  134. 				let _this = this
  135. 				this.editorCtx.getContents({
  136. 					success(res) {
  137. 						// let content = res; 
  138. 						// 获取富文本编辑器的内容
  139. 						uni.$emit('getContents', res)
  140. 						// 存储富文本内容 方便下次显示
  141. 						wx.setStorageSync('getContents', res);
  142. 					}
  143. 				})
  144. 			},
  145. 			//编辑框初始化时触发
  146. 			onEditorReady() {
  147. 				uni.createSelectorQuery().select('#editor').context((res) => {
  148. 					this.editorCtx = res.context;
  149. 				}).exec()
  150. 			},
  151. 			//撤销
  152. 			undo() {
  153. 				this.editorCtx.undo()
  154. 			},
  155. 			//恢复
  156. 			redo() {
  157. 				this.editorCtx.redo()
  158. 			},
  159. 			format(e) {
  160. 				let {
  161. 					name,
  162. 					value
  163. 				} = e.target.dataset
  164. 				if (!name) return
  165. 				this.editorCtx.format(name, value)
  166.  
  167. 			},
  168. 			//通过 Context 方法改变编辑器内样式时触发，返回选区已设置的样式
  169. 			onStatusChange(e) {
  170. 				this.formats = e.detail
  171. 				console.log(e);
  172. 			},
  173. 			//插入分隔符
  174. 			insertDivider() {
  175. 				this.editorCtx.insertDivider({
  176. 					success: function() {
  177. 						console.log('insert divider success')
  178. 					}
  179. 				})
  180. 			},
  181. 			//清空全部内容
  182. 			clear() {
  183. 				this.editorCtx.clear({
  184. 					success: function(res) {
  185. 						console.log("clear success")
  186. 					}
  187. 				})
  188. 			},
  189. 			//清除样式
  190. 			removeFormat() {
  191. 				this.editorCtx.removeFormat()
  192. 			},
  193. 			//插入当前日期
  194. 			insertDate() {
  195. 				const date = new Date()
  196. 				const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
  197. 				this.editorCtx.insertText({
  198. 					text: formatDate
  199. 				})
  200. 			},
  201. 			//插入图片
  202. 			insertImage() {
  203. 				uni.chooseImage({
  204. 					count: 1,
  205. 					success: (res) => {
  206. 						let file = res.tempFiles[0]
  207. 						var img = {
  208. 							fgn: file.path.substring(file.path.lastIndexOf('/')+1)
  209. 						}
  210. 						
  211. 						uni.uploadFile({
  212. 						    url: "url",  //你的图片上传接口
  213. 							filePath: file.path, // 随便填，不为空即可  
  214. 							name: 'img', // 随便填，不为空即可  
  215. 							// header: header, // 可以加access_token等  
  216. 							formData: img, // 接口参数，json格式，底层自动转为FormData的格式数据  
  217. 							success: (res)=>{
  218. 								this.editorCtx.insertImage({
  219. 									src: JSON.parse(res.data).data.src,
  220. 									alt: '图像',
  221. 									success: function() {
  222. 										console.log('insert image success')
  223. 									}
  224. 								})
  225. 							}
  226. 						})
  227. 					}
  228. 				})
  229. 			}
  230. 		},
  231. 	}
  232. </script>
  233.  
  234. <style>
  235. 	@import '@/style/editor-icon.css';
  236.  
  237. 	.wrapper {
  238. 		padding: 5px;
  239. 	}
  240.  
  241. 	.iconfont {
  242. 		display: inline-block;
  243. 		padding: 15px;
  244. 		width: 24px;
  245. 		height: 24px;
  246. 		cursor: pointer;
  247. 		font-size: 20px;
  248. 	}
  249.  
  250. 	.toolbar {
  251. 		box-sizing: border-box;
  252. 		border-bottom: 0;
  253. 		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  254. 		background-color: #ffffff;
  255. 		position: -webkit-sticky;
  256. 		position: sticky;
  257. 		top: var(--window-top);
  258. 		z-index: 99;
  259. 		height: 95px;
  260. 	}
  261.  
  262. 	.ql-container {
  263. 		box-sizing: border-box;
  264. 		padding: 12px 15px;
  265. 		width: 100%;
  266. 		min-height: 30vh;
  267. 		height: auto;
  268. 		background: #fff;
  269. 		margin-top: 10px;
  270. 		font-size: 16px;
  271. 		line-height: 1.5;
  272. 	}
  273.  
  274. 	.ql-active {
  275. 		color: #06c;
  276. 	}
  277. </style>

本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读