t/pages2/editCms/titleStyle.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-end"
							:options="actions"
							ref="Popover1"
							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>
						
						<zb-popover
							actionsDirection="vertical"
							@handleClick="handleFontSizeClick"
							placement="top"
							:options="actions"
							@select="selectFontSizeItme"
							ref="fontSize">
							<view class="iconfont icon-fontsize"
							></view>
						</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 fontSize = ref(null)
			
			const formats = reactive({
				color: "#000000",
				fontSize: "28px",
			})

			const actions = [
				{ text: "标准", value: "28px" },
				{ text: '大', value: "32px" },
				{ text: '超大', value: "36px" },
			]

			const editorCtx = ref(null)

			function selectFontSizeItme(item) {
				formats.fontSize = item.value
				editorCtx.value.format("fontSize", item.value)
			}

			function handleFontSizeClick(flag) {
				Popover1.value?.close()
			}

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

			async function toSuccess() {
				let cms = uni.getStorageSync("cms")
				if (cms) {
					editorCtx.value.getContents({
						success: async (res) => {
							let { html, text, delta } = res
							cms.title = text
							cms.title_delta = delta
							cms.title_html = html
							await 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 { html, title, delta } = {
						html: cms.title_html,
						title: cms.title,
						delta: cms.title_delta
					}
					editorCtx.value.setContents({
						html: html,
						delta: delta,
						success: () => {
							editorCtx.value.format("fontSize", formats.fontSize)
							editorCtx.value.format("color", formats.color)
							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,
				Popover1,
				fontSize,
				formats,
				actions,
				selectFontSizeItme,
				handleFontSizeClick,
				isColor,
				toSuccess,
				back,
				readOnlyChange,
				onEditorReady,
				undo,
				redo,
				format,
				onStatusChange,
				clear,
				removeFormat,
				insertDate,
				insertImage,
				insertDivider
			}
		}
	}
</script>

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