zhibo/components/YEditor/YEditor2.vue

// releaseArticle.vue
<template>
	<view class="ashome-article">
		<!-- 自定义导航栏 page.json中 设置 "navigationStyle": "custom"-->
		<view class="relase-top" :style="{ marginTop: safeAreaInsets!.top + 'px' }">
			<uni-icons type="closeempty" size="26" @click="closeExchange"></uni-icons>
			<view class="titles">发布文章</view>
			<text></text>
		</view>
		<!-- 发布文章 -->
		<view class="release-article">
			<view class="article-img">
				<uni-file-picker :limit="9" mode="grid" :image-styles="imageStyles" file-mediatype="image" :auto-upload="false"
					@select="selectImage" ref="filePickerRef" v-model="imageList" @delete="deletea"></uni-file-picker>
			</view>
			<!-- 输入标题 -->
			<view class="article-title">
				<input class="title" type="text" placeholder="输入标题更受欢迎哦~" :maxlength="30" v-model="articleTitle"
					@input="inputTitle(1)" />
			</view>
			<!-- 输入文章内容 -->
			<view class="article-content">
				<!-- 富文本 -->
				<richTextEditor v-model:value="articleContent" />
			</view>
		</view>
		<!-- 发布按钮 -->
		<view class="release-btn" hover-class="button-hover" @tap="releaseExchange">
			发布
		</view>
	</view>
	<uni-popup ref="alertDialogRef" type="dialog">
		<uni-popup-dialog type="info" cancelText="取消" confirmText="确认" title="提示" content="有内容未发布，是否确认退出？"
			@confirm="dialogConfirm"></uni-popup-dialog>
	</uni-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 图片上传
	import {
		uploadImages
	} from '@/utils/public'
	import richTextEditor from "./richTextEditor.vue"

	// 获取屏幕边界到安全区域距离
	const {
		safeAreaInsets
	} = uni.getSystemInfoSync()


	// 弹出层组件
	const alertDialogRef = ref()

	// 发布文章参数
	const articleParams = ref({})

	// 标题
	const articleTitle = ref < string > ('')

	// 内容
	const articleContent = ref < string > ('')

	// 上传图片组件
	const filePickerRef = ref()

	// 上传完毕后的图片列表
	const imageList = ref([])

	// 上传图标样式
	const imageStyles = ref({
		height: 100, // 边框高度
		width: 100, // 边框宽度
	})

	// 加载
	onLoad((option: any) => {})


	const inputTitle = (type: number) => {
		if (type === 1) {
			// 校验输入的标题，如果字数超过30个，则不能继续输入，然后提示最多只能输入30个字
			if (articleTitle.value.length > 30) {
				uni.showToast({
					title: '最多可输入30个字',
					icon: 'none',
				})
				articleTitle.value = articleTitle.value.substring(0, 30)
			}
		} else {
			if (articleContent.value.length > 1000) {
				uni.showToast({
					title: '最多可输入1000个字',
					icon: 'none',
				})
				articleContent.value = articleContent.value.substring(0, 1000)
			}
		}
	}

	// 关闭发布文章页面
	const closeExchange = () => {
		alertDialogRef.value && alertDialogRef.value.open()
	}
	// 确认关闭
	const dialogConfirm = () => {
		uni.navigateBack({
			delta: 1,
		})
	}

	// 立即发表
	const releaseExchange = async () => {
		// 标题和内容必填
		if (!articleTitle.value || !articleContent.value) {
			uni.showToast({
				title: '标题和内容必填！',
				icon: 'none',
			})
			return
		}

		uni.showToast({
			title: '发布成功',
			icon: 'success',
		})

		setTimeout(() => {
			uni.navigateBack()
		}, 500)
	}

	// 选择完图片
	const selectImage = (e) => {

		const tempFiles = e.tempFiles
		// 处理每张选中的图片
		tempFiles.forEach(async (tempFile) => {
			await uploadImages(tempFile, imageList.value)
		})
	}

	// 删除
	const deletea = (e) => {
		console.log('删除图片', e)
	}
</script>

<style scoped lang="scss">
	.ashome-article {
		height: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;

		.relase-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			height: 100rpx;
			background-color: #fff;
			// border-bottom: 1px solid #f5f5f5;
			color: #3d3d3d;
			font-size: 32rpx;

			.titles {
				font-weight: bold;
			}
		}

		.release-article {
			flex: 1;
			padding: 32rpx;

			.article-img {
				margin-bottom: 20rpx;

				// /deep/ .file-picker__box {}
				:deep(.uni-file-picker) {
					.uni-file-picker__container {
						overflow-x: scroll;
						white-space: nowrap;
						display: block !important;

						.file-picker__box {
							display: inline-block !important;

							.file-picker__box-content {
								.file-picker__progress {
									display: none;
								}
							}
						}
					}
				}
			}

			.article-title {
				margin-bottom: 20rpx;

				.title {
					display: block;
					// height: 46rpx;
					// font-weight: bold;
					font-size: 36rpx;
				}
			}

			.article-content {
				height: 62vh;
				// overflow: auto;
				width: 100%;

				.content {
					// height: calc(100vh - 500rpx);
					height: 100%;
					width: 100%;
					display: block;
					font-size: 28rpx;
				}
			}
		}

		// 发布按钮 固定定到底部
		.release-btn {
			position: fixed;
			bottom: 10%;
			right: 30rpx;
			height: 100rpx;
			width: 100rpx;
			display: flex;
			z-index: 99;
			border-radius: 50%;
			background-color: #a1d8ba;
			font-size: 28rpx;
			font-weight: bold;
			align-items: center;
			justify-content: center;
			color: #fff;
			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.3) !important;

		}

		.button-hover {
			background-color: #97cbb0;
		}
	}
</style>