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'

	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)

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

			async function toSuccess() {
				// 保存逻辑
			}

			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
				}).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>