t/pages2/editCms/smallTitle.vue

<template>
	<view class="container">
		<view>
			<uni-nav-bar 
			title="添加小标题" 
			leftText="取消" 
			left-icon="left" 
			right-text="完成" 
			backgroundColor="#ffffff" 
			color="#000000" 
			@clickRight="toSuccess()" 
			@clickLeft="back()">
			</uni-nav-bar>
		</view>
		<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">
						<zb-popover
							placement="top"
							:options="actions"
							ref="Popover1"
							actions-direction="horizontal">
								<view class="iconfont icon-fontsize"
								></view>
							<template #content>
								<view 
								:class="formats.fontSize === '36rpx' ? 'ql-active' : ''" 
								class="iconfont icon-fontsize"
								data-name="fontSize" 
								data-value="36rpx">
								</view>
							</template>
						</zb-popover>
						
						<zb-popover
							placement="bottom-end"
							:options="actions"
							ref="Popover2"
							actions-direction="horizontal">
							<view class="iconfont icon-juzhongduiqi"></view>
							<template #content>
								<view 
								:class="formats.align === 'left' ? 'ql-active' : ''" 
								class="iconfont icon-zuoduiqi"
								data-name="align" 
								data-value="left">
								</view>
								
								<view 
								:class="formats.align === 'center' ? 'ql-active' : ''" 
								class="iconfont icon-juzhongduiqi"
								data-name="align" 
								data-value="center">
								</view>
								
								<view 
								:class="formats.align === 'right' ? 'ql-active' : ''" 
								class="iconfont icon-youduiqi"
								data-name="align" 
								data-value="right">
								</view>
								
								<view 
								:class="formats.align === 'justify' ? 'ql-active' : ''" 
								class="iconfont icon-zuoyouduiqi"
								data-name="align" 
								data-value="justify">
								</view>
							</template>
						</zb-popover>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
		import { ref, reactive } from 'vue'
		import { onLoad } from '@dcloudio/uni-app'


	export default {
		setup() {
			const readOnly = ref(false)
			const Popover1 = ref(null)
			const Popover2 = ref(null)
			
			const formats = reactive({
				color: "#000000",
				fontSize: "36rpx",
			})

			const actions = [
				{ text: '选项一' },
				{ text: '选项二' },
				{ text: '选项三' },
			]

			const editorCtx = ref(null)
			const editingIndex = ref(-1)

			onLoad(() => {
				const index = Number(uni.getStorageSync('selectIndex'))
				editingIndex.value = Number.isInteger(index) ? index : -1
			})

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

			async function toSuccess() {
				const cms = uni.getStorageSync('cms')
				if (!cms || !Array.isArray(cms.cmsLst) || !editorCtx.value) return
				editorCtx.value.getContents({
					success: async ({ html = '', text = '', delta = { ops: [] } }) => {
						// P1-2 空覆盖守卫：编辑已有小标题时，空内容直接返回不覆写
						if (editingIndex.value >= 0 && cms.cmsLst[editingIndex.value]?.type === 'title') {
							const oldItem = cms.cmsLst[editingIndex.value]
							const hadContent = Boolean(oldItem.text || oldItem.html)
							const gotContent = Boolean(text || html || (delta && delta.ops && delta.ops.length))
							if (hadContent && !gotContent) {
								console.warn('小标题内容为空，跳过覆盖以防丢稿')
								await back()
								return
							}
						}
						if (!text.trim() && !html.trim()) {
							uni.showToast({ title: '小标题不能为空', icon: 'none' })
							return
						}
						const item = {
							type: 'title',
							text,
							html,
							delta
						}
						if (editingIndex.value >= 0 && cms.cmsLst[editingIndex.value]?.type === 'title') {
							cms.cmsLst[editingIndex.value] = { ...cms.cmsLst[editingIndex.value], ...item }
						} else {
							const insertAt = Math.max(0, Number(uni.getStorageSync('selectIndex')) || 0)
							cms.cmsLst.splice(insertAt, 0, item)
						}
						uni.setStorageSync('cms', cms)
						await back()
					},
					fail: () => uni.showToast({ title: '读取编辑内容失败', icon: 'none' })
				})
			}

			async function back() {
				try {
					uni.navigateBack({ delta: 1 })
				} catch (e) {
					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
					const cms = uni.getStorageSync('cms')
					const item = editingIndex.value >= 0 ? cms?.cmsLst?.[editingIndex.value] : null
					if (item?.type === 'title') {
						editorCtx.value.setContents({ html: item.html || '', delta: item.delta || { ops: [] } })
					}
				}).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,
				Popover1,
				Popover2,
				formats,
				actions,
				isColor,
				toSuccess,
				back,
				readOnlyChange,
				onEditorReady,
				undo,
				redo,
				format,
				onStatusChange,
				clear,
				removeFormat,
				insertDate,
				insertImage,
				insertDivider
			}
		}
	}
</script>

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