t/pages2/editCms/editText.vue

<template>
	<view class="container">
		<uni-nav-bar 
		title="编辑文字" 
		leftText="取消" 
		left-icon="left" 
		right-text="完成" 
		backgroundColor="#ffffff" 
		color="#000000" 
		@clickRight="toSuccess()" 
		@clickLeft="back()">
		</uni-nav-bar>

		<view class="page-body">
			<view class='wrapper'>
				<view class="editor-wrapper">
					<editor 
					id="editor" 
					class="ql-container" 
					placeholder="开始输入..." 
					show-img-size show-img-toolbar
					show-img-resize 
					@statuschange="onStatusChange" 
					:read-only="readOnly" 
					@ready="onEditorReady">
					</editor>
				</view>
				<view class='toolbar' @tap="format">
					<view class="item-wrap">
						<view class="iconfont icon-undo" @tap="undo"></view>
						<view class="iconfont icon-redo" @tap="redo"></view>
						
						<zb-popover
							placement="top"
							@handleClick="handleFontAttributeClick"
							ref="fontAttribute"
							actionsDirection="horizontal">
							<view class="iconfont icon-zitijiacu">
							</view>
							<template #content>
								<view
								:class="formats.bold ? 'ql-active' : ''" 
								class="iconfont icon-zitijiacu" 
								data-name="bold">
								</view>
								<view 
								:class="formats.italic ? 'ql-active' : ''" 
								class="iconfont icon-zitixieti" 
								data-name="italic">
								</view>
								<view 
								:class="formats.underline ? 'ql-active' : ''" 
								class="iconfont icon-zitixiahuaxian"
								data-name="underline">
								</view>
							</template>
						</zb-popover>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { ref, reactive } from 'vue'

	export default {
		setup() {
			const readOnly = ref(false)
			const fontAttribute = ref(null)
			
			const formats = reactive({
				color: "#000000",
				fontSize: "16px",
			})

			const editorCtx = ref(null)

			function closeAllPopover(type) {
				if (type === "attribute") {
					fontAttribute.value?.close()
				}
			}

			function handleFontAttributeClick(flag) {
				closeAllPopover("attribute")
			}

			function isColor(color) {
				return color === formats.color
			}

			async function toSuccess() {
				let index = uni.getStorageSync("selectIndex")
				let cms = uni.getStorageSync("cms")
				if (cms && cms.cmsLst && cms.cmsLst[index]) {
					editorCtx.value.getContents({
						success: async (res) => {
							let { html, text, delta } = res
							const oldItem = cms.cmsLst[index]
							// P1-2 空覆盖守卫（同源 content-adapter.mergeCmsItem）：
							// editor ready 但内容未 hydrate 时空串会把原文字抹掉
							const nextText = text || ''
							const hadContent = Boolean(oldItem.text || oldItem.html)
							const gotContent = Boolean(nextText || html || (delta && delta.ops && delta.ops.length))
							if (hadContent && !gotContent) {
								console.warn('编辑器内容为空，跳过覆盖以防丢稿')
								await back()
								return
							}
							cms.cmsLst[index] = {
								...oldItem,
								text: text || '',
								html: html || '',
								delta: delta && typeof delta === 'object' ? delta : { ops: [] },
							}
							uni.setStorageSync("cms", cms)
							await back()
						},
						fail: (err) => {
							console.log(err)
						}
					})
				}
			}

			async function back() {
				uni.navigateBack({
					delta: 1,
					fail: (err) => {
						uni.navigateTo({ url: "/pages2/editCms/editCms" })
					}
				})
			}

			function readOnlyChange() {
				readOnly.value = !readOnly.value
			}

			function onEditorReady() {
				// #ifdef APP-PLUS || MP-WEIXIN || H5
				uni.createSelectorQuery().select('#editor').context((res) => {
					editorCtx.value = res.context
					let cms = uni.getStorageSync("cms")
					let index = uni.getStorageSync("selectIndex")
					editorCtx.value.format("fontSize", formats.fontSize)
					editorCtx.value.format("color", formats.color)
						if (Number.isInteger(Number(index)) && cms && cms.cmsLst && cms.cmsLst[index]) {
							let { html, delta } = cms.cmsLst[index]
						editorCtx.value.setContents({
							html: html,
							delta: delta,
							success: () => {
								console.log("设置编辑器成功")
							},
							fail: (err) => {
								console.log(err)
							}
						})
					}
				}).exec()
				// #endif
			}

			function undo() {
				editorCtx.value.undo()
			}

			function redo() {
				editorCtx.value.redo()
			}

			function format(e) {
				let { name, value } = e.target.dataset
				if (!name) return
				editorCtx.value.format(name, value)
			}

			function onStatusChange(e) {
				const formatData = e.detail
				Object.assign(formats, formatData)
			}

			function clear() {
				uni.showModal({
					title: '清空编辑器',
					content: '确定清空编辑器全部内容？',
					success: res => {
						if (res.confirm) {
							editorCtx.value.clear({
								success: function() {
									console.log("clear success")
								}
							})
						}
					}
				})
			}

			function removeFormat() {
				editorCtx.value.removeFormat()
			}

			function insertDate() {
				const date = new Date()
				const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
				editorCtx.value.insertText({ text: formatDate })
			}

			function insertImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						editorCtx.value.insertImage({
							src: res.tempFilePaths[0],
							alt: '图像',
							success: function() {
								console.log('insert image success')
							}
						})
					}
				})
			}

			function insertDivider() {
				editorCtx.value.insertDivider({
					success: function() {
						console.log('insert divider success')
					}
				})
			}

			return {
				readOnly,
				fontAttribute,
				formats,
				closeAllPopover,
				handleFontAttributeClick,
				isColor,
				toSuccess,
				back,
				readOnlyChange,
				onEditorReady,
				undo,
				redo,
				format,
				onStatusChange,
				clear,
				removeFormat,
				insertDate,
				insertImage,
				insertDivider
			}
		}
	}
</script>

<style>
	@import url("./css/edit.css");
</style>