yixiang/components/richtext-editor/richtext-editor.vue

<template>
	<view class="container">
		<!-- 编辑器内容@focus="modeShow" -->
		<view class="main">
			<!-- //如果不需要跟随键盘弹出注释:style="{ 'height': editorHeight + 'px' }"  mode默认改为true即可 -->
			<editor @focus="modeShow" :style="{ 'height': editorHeight + 'px' }" @statuschange="selected"
				class="myEditor" placeholder="写点什么儿~" show-img-size show-img-toolbar show-img-resize
				@ready="onEditorReady" @blur="onsuccess"></editor>
		</view>

		<!-- 模块 -->
		<view class="modes">
			<!-- 功能选项  :style="{position: 'relative',bottom:keyboardHeight+'px'}"-->
			<view class="tabName hflex acenter jbetween" @click="ontabtap">
				<view class="hflex acenter">
					<image @click="changeImg" v-show="!img" src="@/static/richtext/img.png" :data-current="3" mode="aspectFill"></image>
					<image @click="changeImg" v-show="img" src="@/static/richtext/imgselect.png" :data-current="3" mode="aspectFill">
					</image>
					<image @click="changeFont" v-show="!font" src="@/static/richtext/font.png" :data-current="1" mode="aspectFill"></image>
					<image @click="changeFont" v-show="font" src="@/static/richtext/fontselect.png" :data-current="1" mode="aspectFill">
					</image>
				</view>
				<!-- <image @click="changeAlign" v-show="!align" src="@/static/richtext/leftcenter.png" :data-current="2" mode="">
				</image>
				<image @click="changeAlign" v-show="align" src="@/static/richtext/leftcenterSelect.png" :data-current="2"
					mode=""></image> -->
				
				<view class="hflex acenter">
					<image @click="repeal" src="@/static/richtext/backone.png" mode=""></image>
					<image @click="recover" src="@/static/richtext/afterone.png" mode=""></image>
				</view>
				<!-- <image @click="modeShow" src="@/static/richtext/keyboard.png" mode=""></image> -->
			</view>
			<!-- 功能选项内容 -->
			<view class="tab_card" v-show="tabIndex==1 && font==true">
				<!-- 其他 -->
				<view class="one">
					<view @click="addBold" class="oneitem" :style="Bold?'background-color: #ffffff;':''">
						<image src="@/static/richtext/bold.png" mode=""></image>
					</view>
					<view @click="bias" class="oneitem" :style="slash?'background-color: #ffffff;':''">
						<image src="@/static/richtext/incline.png" mode=""></image>
					</view>
					<view @click="addDivider" class="oneitem" :style="halvingline?'background-color: #ffffff;':''">
						<image src="@/static/richtext/halvingline.png" mode=""></image>
					</view>
				</view>
				<!-- H2 -->
				<view class="one">
					<view @click="Hfirst" class="oneitem" :style="H1?'background-color: #ffffff;':''">
						<image src="@/static/richtext/h-1.png" mode=""></image>
					</view>
					<view @click="Htwo" class="oneitem" :style="H2?'background-color: #ffffff;':''">
						<image src="@/static/richtext/h-2.png" mode=""></image>
					</view>
					<view @click="Hthree" class="oneitem" :style="H3?'background-color: #ffffff;':''">
						<image src="@/static/richtext/h-3.png" mode=""></image>
					</view>
					<view @click="Hfour" class="oneitem" :style="H4?'background-color: #ffffff;':''">
						<image src="@/static/richtext/h-4.png" mode=""></image>
					</view>
				</view>
				<!-- 字号 单位px-->
				<view class="three">
					<view @click="thirtySix" class="threeitem" :style="thirtysix?'background-color: #ffffff;':''">
						<text style="font-weight: 700;font-size: 38upx;">36</text>
					</view>
					<view @click="thirtyTwo" class="threeitem" :style="thirtytwo?'background-color: #ffffff;':''">
						<text style="font-weight: 600;font-size: 36upx;">32</text>
					</view>
					<view @click="twentyEight" class="threeitem" :style="twentyeight?'background-color: #ffffff;':''">
						<text style="font-size: 34upx;">28</text>
					</view>
					<view @click="twentySix" class="threeitem" :style="twentysix?'background-color: #ffffff;':''">
						<text style="font-size: 32upx;">26</text>
					</view>
					<view @click="twentyFour" class="threeitem" :style="twentyfour?'background-color: #ffffff;':''">
						<text style="font-size: 28upx;">24</text>
					</view>
					<view @click="Twenty" class="threeitem" :style="twenty?'background-color: #ffffff;':''">
						<text style="font-size: 26upx;">20</text>
					</view>
				</view>
				<!-- 字体颜色 -->
				<!-- <view class="four">
					<view @click="Black" class="fouritema" :style="black?'border: 4upx solid black;':''">
						<text></text>
					</view>
					<view @click="Red" class="fouritemb" :style="red?'border: 4upx solid #92a5c7;':''">
						<text></text>
					</view>
					<view @click="Gray" class="fouritemc" :style="gray?'border: 4upx solid #92a5c7;':''">
						<text></text>
					</view>
					<view @click="Blue" class="fouritemd" :style="blue?'border: 4upx solid #55aaff;':''">
						<text></text>
					</view>
					<view @click="Orange" class="fouriteme" :style="orange?'border: 4upx solid orange;':''">
						<text></text>
					</view>
					<view @click="Green" class="fouritemf" :style="green?'border: 4upx solid green;':''">
						<text></text>
					</view>
				</view> -->
				<!-- 对齐方式 -->
				<view class="one">
					<view class="oneitem" @click="alignLeft" :style="leftcenter?'background-color: #ffffff;':''">
						<image src="@/static/richtext/leftcenter.png" mode=""></image>
					</view>
					<view class="oneitem" @click="alignCenter" :style="center?'background-color: #ffffff;':''">
						<image src="@/static/richtext/center.png" mode=""></image>
					</view>
					<view class="oneitem" @click="alignright" :style="rightcenter?'background-color: #ffffff;':''">
						<image src="@/static/richtext/rightcenter.png" mode=""></image>
					</view>
					<view class="oneitem" @click="Sort" :style="underline?'background-color: #ffffff;':''">
						<image src="@/static/richtext/underline.png" mode=""></image>
					</view>
					<view class="oneitem" @click="Refine" :style="refine?'background-color: #ffffff;':''">
						<image src="@/static/richtext/dot.png" mode=""></image>
					</view>
					<view class="oneitem" @click="Check" :style="check?'background-color: #ffffff;':''">
						<image src="@/static/richtext/addrefine.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="tab_card" v-show="tabIndex==2 && align==true">
				<!-- 对齐方式 -->
				<view class="one">
					<view class="oneitem" @click="alignLeft" :style="leftcenter?'background-color: #ffffff;':''">
						<image src="@/static/richtext/leftcenter.png" mode=""></image>
					</view>
					<view class="oneitem" @click="alignCenter" :style="center?'background-color: #ffffff;':''">
						<image src="@/static/richtext/center.png" mode=""></image>
					</view>
					<view class="oneitem" @click="alignright" :style="rightcenter?'background-color: #ffffff;':''">
						<image src="@/static/richtext/rightcenter.png" mode=""></image>
					</view>
					<view class="oneitem" @click="Sort" :style="underline?'background-color: #ffffff;':''">
						<image src="@/static/richtext/underline.png" mode=""></image>
					</view>
					<view class="oneitem" @click="Refine" :style="refine?'background-color: #ffffff;':''">
						<image src="@/static/richtext/dot.png" mode=""></image>
					</view>
					<view class="oneitem" @click="Check" :style="check?'background-color: #ffffff;':''">
						<image src="@/static/richtext/addrefine.png" mode=""></image>
					</view>
				</view>
				<view class="two">
					<view class="twoitem">
						<image src="@/static/richtext/lineheight.png" mode=""></image>
					</view>
					<view @click="lineHeightone" class="twoitem" :style="heightone?'background-color: #ffffff;':''">
						<text>1</text>
					</view>
					<view @click="lineHeightonea" class="twoitem" :style="heightonea?'background-color: #ffffff;':''">
						<text>1.5</text>
					</view>
					<view @click="lineHeighttwo" class="twoitem" :style="heighttwo?'background-color: #ffffff;':''">
						<text>2</text>
					</view>
					<view @click="lineHeighttwoa" class="twoitem" :style="heighttwoa?'background-color: #ffffff;':''">
						<text>2.5</text>
					</view>
					<view @click="lineHeightthree" class="twoitem" :style="heightthree?'background-color: #ffffff;':''">
						<text>3</text>
					</view>
				</view>

				<!-- 背景色 -->
				<view class="fours">
					<view @click="Blackback" class="foursitema" :style="blackback?'border: 4upx solid black;':''">
						<text></text>
					</view>
					<view @click="Redback" class="foursitemb" :style="redback?'border: 4upx solid red;':''">
						<text></text>
					</view>
					<view @click="Grayback" class="foursitemc" :style="grayback?'border: 4upx solid #92a5c7;':''">
						<text></text>
					</view>
					<view @click="Blueback" class="foursitemd" :style="blueback?'border: 4upx solid #55aaff;':''">
						<text></text>
					</view>
					<view @click="Orangeback" class="foursiteme" :style="orangeback?'border: 4upx solid orange;':''">
						<text></text>
					</view>
					<view @click="Green" class="foursitemf" :style="greenback?'border: 4upx solid green;':''">
						<text></text>
					</view>
				</view>
			</view>
			<!-- 图片 -->
			<view class="tab_cardimg" v-show="tabIndex==3 && img==true">
				<view class="mo">
					<view class="moitem" @click="insertImg">
						<image src="@/static/richtext/img.png" mode=""></image>
						<text>来自图库</text>
					</view>
					<!-- <view class="moitem">
						<image src="@/static/richtext/photograph.png" mode=""></image>
						<text>拍照</text>
					</view> -->
					<!-- @click="insertVideo" -->
					<!-- <view class="moitem" @click="insertVideo">
						<image src="@/static/richtext/insertvideo.png" mode=""></image>
						<text>插入视频</text>
					</view> -->
				</view>
			</view>
		</view>

		<!-- 利用rich-text来回显html内容 data是富文本编辑器html的内容-->
		<!-- <rich-text class="ql-editor" :nodes="data"></rich-text> -->
		<!-- uparse解析 -->
		<!--  <u-parse :content="data" @preview="preview" @navigate="navigate" ></u-parse> -->
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	export default {
		data() {
			return {
				mode: false, //显示模块 //如果不需要跟随键盘弹出 改为true默认显示
				tabIndex: 1, //下标
				Height: 0, //高度
				font: true, //字体选项卡
				align: false, //对齐方式选项卡
				img: false, //图片选项卡
				halvingline: false, //下划线
				slash: false, //倾斜
				Bold: false, //变量
				H1: false, //H1
				H2: false, //H2
				H3: false, //H3
				H4: false, //H4
				thirtysix: false, //36字号px
				thirtytwo: false, //32字号px
				twentyeight: false, //28字号px
				twentysix: false, //26字号px
				twentyfour: false, //24字号px
				twenty: false, //20字号px
				black: true, //黑色字体
				red: false, //红色字体
				gray: false, //灰蓝色字体
				blue: false, //浅蓝色字体
				orange: false, //橙色字体
				green: false, //绿色字体
				blackback: true, //黑色背景
				redback: false, //红色字体
				grayback: false, //灰蓝色字体
				blueback: false, //浅蓝色字体
				orangeback: false, //橙色字体
				greenback: false, //绿色字体
				center: false, //居中
				leftcenter: false, //居左
				rightcenter: false, //居右
				underline: false, //排序
				refine: false, //加圆点
				check: false, //加方格
				spacingone: false, //字母间距1
				heightone: false, //行高1
				heightonea: false, //行高1.5
				heighttwo: false, //行高2
				heighttwoa: false, //行高2.5
				heightthree: false, //行高3
				editorCtx: {},
				//键盘高度
				keyboardHeight: 0,
				editorHeight: 0,
				data: ""
			}
		},
		mounted() {
			var _this = this
			uni.getSystemInfo({
				success: function(res) {
					_this.Height = res.windowHeight;
				}
			});
		},
		methods: {
			onsuccess() {
				var that = this
				that.editorCtx.getContents({
					success: function(data) {
						that.data = data.html
						that.$emit('onsuccess', that.data)
					},
				})
			},
			modeShow() { //
				this.mode = !this.mode

				//如果不需要跟随键盘弹出注释即可
				var _this = this
				//  监听键盘高度变化
				uni.onKeyboardHeightChange((obj) => {
					_this.keyboardHeight = obj
					_this.editorHeight = _this.Height - obj - 30
				})
			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				this.switchTab(index);

				this.tabIndex = index;

			},
			switchTab(index) {
				if (this.tabIndex == index) {
					return
				}
				this.tabIndex = index;
			},
			onEditorReady(e) { //初始化
				uni.createSelectorQuery().in(this).select('.myEditor').fields({
					context: true
				}, res => {
					this.editorCtx = res.context
					res.context.setContents({
						html: this.data
					})
				}).exec()
			},
			changeFont() { //字体选项卡
				this.font = !this.font
				this.align = false
				this.img = false
			},
			changeAlign() { //对齐方式选项卡
				this.align = !this.align
				this.font = false
				this.img = false
			},
			changeImg() { //图片选项卡 
				this.img = !this.img
				this.font = false
				this.align = false
			},
			addDivider() { //插入分割线 halvingline
				this.halvingline = !this.halvingline //改变图标颜色
				this.editorCtx.insertDivider()
				this.editorCtx.getContents()
			},
			repeal() { //撤销
				this.editorCtx.undo()
			},
			recover() { //恢复
				this.editorCtx.redo()
			},
			addBold() { //字体加粗
				this.Bold = !this.Bold //变量
				this.editorCtx.format('bold', 'bold')
			},
			bias() { //字体倾斜
				this.slash = !this.slash //改变图标颜色
				this.editorCtx.format('italic')
			},
			alignCenter() { //居中对齐
				this.center = !this.center //改变图标颜色
				this.leftcenter = false //改变图标颜色
				this.rightcenter = false //改变图标颜色
				this.editorCtx.format('align', 'center') //属性，值
			},
			alignLeft() { //居左对齐
				this.leftcenter = !this.leftcenter //改变图标颜色
				this.center = false //改变图标颜色
				this.rightcenter = false //改变图标颜色
				this.editorCtx.format('align', 'left') //属性，值
			},
			alignright() { //居右对齐
				this.rightcenter = !this.rightcenter //改变图标颜色
				this.center = false //改变图标颜色
				this.leftcenter = false //改变图标颜色
				this.editorCtx.format('align', 'right') //属性，值
			},
			Sort() { //排序
				this.underline = !this.underline //改变图标颜色
				this.editorCtx.format('list', 'ordered') //属性，值 ordered 排序 bullet 点 check 方格
			},
			Refine() { //加圆点
				this.refine = !this.refine //改变图标颜色
				this.editorCtx.format('list', 'bullet') //属性，值 ordered 排序 bullet 点 check 方格
			},
			Check() { //加方格
				this.check = !this.check //改变图标颜色
				this.editorCtx.format('list', 'check') //属性，值 ordered 排序 bullet 点 check 方格
			},
			Hfirst() { //标题字体变大
				this.H1 = !this.H1
				if (this.H1) {
					this.editorCtx.format('header', 'H1')
				} else if (!this.H1) {
					this.editorCtx.format('header', '0')
				}
			},
			Htwo() { //标题字体变大
				this.H2 = !this.H2
				if (this.H2) {
					this.editorCtx.format('header', 'H2')
				} else if (!this.H2) {
					this.editorCtx.format('header', '0')
				}
			},
			Hthree() { //标题字体变大
				this.H3 = !this.H3
				if (this.H3) {
					this.editorCtx.format('header', 'H3')
				} else if (!this.H3) {
					this.editorCtx.format('header', '0')
				}
			},
			Hfour() { //标题字体变大
				this.H4 = !this.H4
				if (this.H4) {
					this.editorCtx.format('header', 'H4')
				} else if (!this.H4) {
					this.editorCtx.format('header', '0')
				}
			},
			thirtySix() { //36
				this.thirtysix = !this.thirtysix
				if (this.thirtysix) {
					this.editorCtx.format('fontSize', '36px')
				} else if (!this.thirtysix) {
					this.editorCtx.format('fontSize', '')
				}
			},
			thirtyTwo() { //32
				this.thirtytwo = !this.thirtytwo
				if (this.thirtytwo) {
					this.editorCtx.format('fontSize', '32px')
				} else if (!this.thirtytwo) {
					this.editorCtx.format('fontSize', '')
				}
			},
			twentyEight() { //28
				this.twentyeight = !this.twentyeight
				if (this.twentyeight) {
					this.editorCtx.format('fontSize', '28px')
				} else if (!this.twentyeight) {
					this.editorCtx.format('fontSize', '')
				}
			},
			twentySix() { //26
				this.twentysix = !this.twentysix
				if (this.twentysix) {
					this.editorCtx.format('fontSize', '26px')
				} else if (!this.twentysix) {
					this.editorCtx.format('fontSize', '')
				}
			},
			twentyFour() { //24
				this.twentyfour = !this.twentyfour
				if (this.twentyfour) {
					this.editorCtx.format('fontSize', '24px')
				} else if (!this.twentyfour) {
					this.editorCtx.format('fontSize', '')
				}
			},
			Twenty() { //20
				this.twenty = !this.twenty
				if (this.twenty) {
					this.editorCtx.format('fontSize', '20px')
				} else if (!this.twenty) {
					this.editorCtx.format('fontSize', '')
				}
			},
			spacingOne() { //字母间距1
				this.spacingone = !this.spacingone
				if (this.spacingone) {
					this.editorCtx.format('letterSpacing', '100px')
				} else if (!this.spacingone) {
					this.editorCtx.format('letterSpacing', '')
				}
			},
			lineHeightone() { //行高1
				this.heightone = !this.heightone
				if (this.heightone) {
					this.editorCtx.format('lineHeight', '20px') //20upx
				} else if (!this.heightone) {
					this.editorCtx.format('lineHeight', '')
				}
			},
			lineHeightonea() { //行高1.5
				this.heightonea = !this.heightonea
				// 当点击1.5时取消其他行高 根据需求自行更改 其他功能同理
				this.heightone = false
				this.heighttwo = false
				this.heighttwoa = false
				this.heightthree = false
				if (this.heightonea) {
					this.editorCtx.format('lineHeight', '30px') //20upx
				} else if (!this.heightonea) {
					this.editorCtx.format('lineHeight', '')
				}
			},
			lineHeighttwo() { //行高2
				this.heighttwo = !this.heighttwo
				if (this.heighttwo) {
					this.editorCtx.format('lineHeight', '40px') //20upx
				} else if (!this.heighttwo) {
					this.editorCtx.format('lineHeight', '')
				}
			},
			lineHeighttwoa() { //行高2.5
				this.heighttwoa = !this.heighttwoa
				if (this.heighttwoa) {
					this.editorCtx.format('lineHeight', '50px') //50upx
				} else if (!this.heighttwoa) {
					this.editorCtx.format('lineHeight', '')
				}
			},
			lineHeightthree() { //行高3
				this.heightthree = !this.heightthree
				if (this.heightthree) {
					this.editorCtx.format('lineHeight', '60px') //50upx
				} else if (!this.heightthree) {
					this.editorCtx.format('lineHeight', '')
				}
			},
			Black() { //黑色字体
				this.black = !this.black
				if (this.black) {
					this.editorCtx.format('color', 'black')
				} else if (!this.black) {
					this.editorCtx.format('color', '')
				}
			},
			Red() { //黑色字体
				this.red = !this.red
				if (this.red) {
					this.editorCtx.format('color', 'red')
				} else if (!this.red) {
					this.editorCtx.format('color', '')
				}
			},
			Gray() { //灰蓝色字体
				this.gray = !this.gray
				if (this.gray) {
					this.editorCtx.format('color', '#92a5c7')
				} else if (!this.gray) {
					this.editorCtx.format('color', '')
				}
			},
			Blue() { //浅蓝色字体
				this.blue = !this.blue
				if (this.blue) {
					this.editorCtx.format('color', '#00aaff')
				} else if (!this.blue) {
					this.editorCtx.format('color', '')
				}
			},
			Orange() { //橙色字体
				this.orange = !this.orange
				if (this.orange) {
					this.editorCtx.format('color', 'orange')
				} else if (!this.orange) {
					this.editorCtx.format('color', '')
				}
			},
			Green() { //绿色字体
				this.green = !this.green
				if (this.green) {
					this.editorCtx.format('color', 'green')
				} else if (!this.green) {
					this.editorCtx.format('color', '')
				}
			},
			Blackback() { //黑色背景
				this.blackback = !this.blackback
				if (this.blackback) {
					this.editorCtx.format('backgroundColor', 'black')
				} else if (!this.blackback) {
					this.editorCtx.format('backgroundColor', '')
				}
			},
			Redback() { //黑色背景
				this.redback = !this.redback
				if (this.redback) {
					this.editorCtx.format('backgroundColor', 'red')
				} else if (!this.redback) {
					this.editorCtx.format('backgroundColor', '')
				}
			},
			Grayback() { //灰蓝色背景
				this.grayback = !this.grayback
				if (this.grayback) {
					this.editorCtx.format('backgroundColor', '#92a5c7')
				} else if (!this.grayback) {
					this.editorCtx.format('backgroundColor', '')
				}
			},
			Blueback() { //浅蓝色字体
				this.blueback = !this.blueback
				if (this.blueback) {
					this.editorCtx.format('backgroundColor', '#00aaff')
				} else if (!this.blueback) {
					this.editorCtx.format('backgroundColor', '')
				}
			},
			Orangeback() { //橙色字体
				this.orangeback = !this.orangeback
				if (this.orangeback) {
					this.editorCtx.format('backgroundColor', 'orange')
				} else if (!this.orangeback) {
					this.editorCtx.format('backgroundColor', '')
				}
			},
			Greenback() { //绿色背景
				this.greenback = !this.greenback
				if (this.greenback) {
					this.editorCtx.format('backgroundColor', 'green')
				} else if (!this.greenback) {
					this.editorCtx.format('backgroundColor', '')
				}
			},
			selected() { //选中内容
				this.editorCtx.getSelectionText()
			},
			insertImg() { //插入图片
				var _this = this
				uni.chooseImage({
					success: (chooseImageRes) => {
						uni.showLoading({
							title: '上传中...'
						})
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: $api.config.baseUrl + 'upload/image', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'image',
							// formData: {
							// 	'user': 'test'
							// },
							success: (uploadFileRes) => {
								
								let res = JSON.parse(uploadFileRes.data)
								for (let i = 0; i < tempFilePaths.length; i++) {
									_this.editorCtx.insertImage({
										src: res.data.url //图片路径 换成服务器地址
									})
								}
								uni.hideLoading()
							}
						});
					}
				});
				/* uni.chooseImage({
					success: res => {
						uni.showLoading({
							title: 'loading...'
						})
						//在这里先把封面截图保存到服务器拿到服务器存储地址放在这里
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							this.editorCtx.insertImage({
								src: res.tempFilePaths[i] //图片路径 换成服务器地址
							})
						}
						uni.hideLoading()
					}
				}) */
			},
			insertVideo() { //视频				//uni.chooseMedia()
				let that = this
				uni.chooseMedia({
					count: 1,
					mediaType: ['video'],
					sourceType: ['album', 'camera'],
					maxDuration: 30,
					camera: 'back',
					success(res) {
						that.src = res.tempFiles[0].tempFilePath
						let imgArr = res.tempFiles[0].thumbTempFilePath
						//在这里先把封面截图保存到服务器拿到服务器存储地址放在这里
						that.editorCtx.insertImage({
							//https://mp-2a0f3e44-b47a-4bd5-a925-ba63d3e2a8ab.cdn.bspapp.com/add_img/1693998858778-2023-08-21 133334.png
							src: 'https://mp-2a0f3e44-b47a-4bd5-a925-ba63d3e2a8ab.cdn.bspapp.com/add_img/1693998858778-2023-08-21 133334.png', //视频封面图 //服务器地址
							alt: '图片出差了',
							extClass: 'videothumb',
						})
						that.getCtx()
					}
				})


			},
			// 获取编辑器内容 
			getCtx() {
				var that = this
				that.editorCtx.getContents({
					success: function(data) {
						that.data = data.html
						//需要把编辑器内的图片/视频地址更换成储存在服务器后的图片/视频路径

						//在要显示的页面，利用rich-text来回显html内容 data是富文本编辑器html的内容
						// <rich-text class="ql-editor" :nodes="data"></rich-text> 
						//这里把编辑器里的视频封面截图替换成了视频
						//uniapp富文本编辑器内不支持video无法显示视频,rich-text可以显示但需要uparse插件解析
						//https://ext.dcloud.net.cn/plugin?id=183 这里有详细教程
						
						// let reg = /<img[^>]*class=['videothumb"]([^'"]+)[^>]*>/g
						// that.data = data.html.replace(reg,
						// 	'<video id="myVideo" class="videosrc" src="https://mp-2a0f3e44-b47a-4bd5-a925-ba63d3e2a8ab.cdn.bspapp.com/add_file/2023-09-17 172002.mp4"></video>'
						// 	);

					}
				})
			},



		}
	}
</script>

<style lang="scss">
	/* 样式二 */
	.tabName {
		width: 100%;
		height: 60upx;
		line-height: 60upx;
		padding: 15upx 28rpx;
		
		border-top: 1upx solid #d9e4f9;
		border-bottom: 1upx solid #d9e4f9;
		image {
			width: 40rpx;
			height: 40rpx;
			margin-right: 52rpx;
		}
	}

	/* .tabName>image {
		width: 40upx;
		height: 40upx;
	} */


	/* 内容高度根据需求自定义 */
	.tab_card {
		width: 750upx;
		height: 430upx;
		/* 	margin-top: 10upx; */
		background-color: #ffffff;
		text-align: center;
		line-height: 430upx;
		padding: 5upx 0;

	}

	.tab_card>.one {
		width: 690upx;
		height: 60upx;
		line-height: 60upx;
		margin: 25upx 30upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #edf3fa;
		padding: 12upx 0;
	}

	.tab_card>.one>.oneitem {
		width: 90upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 5upx;
	}

	.tab_card>.one>.oneitem>image {
		width: 50upx;
		height: 50upx;

		margin-top: 5upx;
	}


	/* 行高 */
	.tab_card>.two {
		width: 690upx;
		height: 60upx;
		line-height: 60upx;
		margin: 25upx 30upx;
		display: flex;
		justify-content: space-around;

		align-items: center;
		background-color: #edf3fa;
		padding: 12upx 0;
	}

	.tab_card>.two>.twoitem {
		width: 90upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 5upx;
	}

	.tab_card>.two>.twoitem>image {
		width: 50upx;
		height: 50upx;
		margin-top: 5upx;
	}

	.tab_card>.two>.twoitem>text {
		width: 50upx;
		height: 50upx;
		color: #899cba;
		font-size: 32upx;
	}

	/* 字号 */
	.tab_card>.three {
		width: 690upx;
		height: 60upx;
		line-height: 60upx;
		margin: 25upx 30upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #edf3fa;
		padding: 12upx 0;
	}

	.tab_card>.three>.threeitem {
		width: 90upx;
		height: 60upx;
		line-height: 60upx;
		border-radius: 5upx;
	}

	/* 字体颜色 */
	.tab_card>.four {
		width: 690upx;
		height: 60upx;
		line-height: 60upx;
		margin: 25upx 30upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #edf3fa;
		padding: 12upx 0;
	}

	.tab_card>.four>.fouritema {
		width: 55upx;
		height: 55upx;
		line-height: 55upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		/*  border: 4upx solid black; */
	}

	.tab_card>.four>.fouritema>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: black;
		border-radius: 50%;
	}

	.tab_card>.four>.fouritemb {
		width: 55upx;
		height: 55upx;
		line-height: 55upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		/* border: 4upx solid red; */
	}

	.tab_card>.four>.fouritemb>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: red;
		border-radius: 50%;
	}

	.tab_card>.four>.fouritemc {
		width: 55upx;
		height: 55upx;
		line-height: 55upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		/* border: 4upx solid #92a5c7; */
	}

	.tab_card>.four>.fouritemc>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: #92a5c7;
		border-radius: 50%;
	}

	.tab_card>.four>.fouritemd {
		width: 55upx;
		height: 55upx;
		line-height: 55upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		/* border: 4upx solid #00aaff; */
	}

	.tab_card>.four>.fouritemd>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: #00aaff;
		border-radius: 50%;
	}

	.tab_card>.four>.fouriteme {
		width: 55upx;
		height: 55upx;
		line-height: 55upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		/* border: 4upx solid orange; */
	}

	.tab_card>.four>.fouriteme>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: orange;
		border-radius: 50%;
	}

	.tab_card>.four>.fouritemf {
		width: 55upx;
		height: 55upx;
		line-height: 55upx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		/* border: 4upx solid green; */
	}

	.tab_card>.four>.fouritemf>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: green;
		border-radius: 50%;
	}


	/* 对齐方式 背景颜色*/
	.tab_card>.fours {
		width: 690upx;
		height: 60upx;
		line-height: 60upx;
		margin: 25upx 30upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #edf3fa;
		padding: 12upx 0;
	}

	.tab_card>.fours>.foursitema {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/*  border: 4upx solid black; */
	}

	.tab_card>.fours>.foursitema>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: black;
	}

	.tab_card>.fours>.foursitemb {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border: 4upx solid red; */
	}

	.tab_card>.fours>.foursitemb>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: red;
	}

	.tab_card>.fours>.foursitemc {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border: 4upx solid #92a5c7; */
	}

	.tab_card>.fours>.foursitemc>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: #92a5c7;
	}

	.tab_card>.fours>.foursitemd {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border: 4upx solid #00aaff; */
	}

	.tab_card>.fours>.foursitemd>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: #00aaff;
	}

	.tab_card>.fours>.foursiteme {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border-radius: 50%; */
		/* border: 4upx solid orange; */
	}

	.tab_card>.fours>.foursiteme>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: orange;
	}

	.tab_card>.fours>.foursitemf {
		width: 50upx;
		height: 50upx;
		line-height: 50upx;
		display: flex;
		align-items: center;
		justify-content: center;
		/* border: 4upx solid green; */
	}

	.tab_card>.fours>.foursitemf>text {
		width: 46upx;
		height: 46upx;
		display: inline-block;
		background-color: green;
	}




	/* 图片选项卡 */
	.tab_cardimg {
		width: 750upx;
		height: 430upx;
	}

	.tab_cardimg>.mo {
		width: 750upx;
		height: 200upx;
		display: flex;
	}

	.tab_cardimg>.mo>.moitem {
		width: 140upx;
		height: 140upx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-left: 40upx;
		margin-top: 30upx;
	}

	.tab_cardimg>.mo>.moitem>image {
		width: 80upx;
		height: 80upx;
	}

	.tab_cardimg>.mo>.moitem>text {
		width: 120upx;
		height: 40upx;
		margin-top: 10upx;
		color: #92a5c7;
		font-size: 24upx;
		text-align: center;
	}


	/*  */
	.main {
		width: 100%;
		min-height: 820upx;
		max-height: max-content;
		/* height: max-content; */
	}
	.modes {
		height: 500rpx;
	}
	.myEditor {
		min-height: 820upx;
		max-height: max-content;
		/* height: max-content; */
		padding: 0 20upx;
		font-size: 36upx;
	}
</style>