编辑器组件

ux-editor 组件

ux-editor 组件的核心功能是创建内容，包含 : 标题、段落文本、加粗文本、倾斜文本、居中文本、引用文本、图片、链接、分割符 9种类型的内容元素。

目前 uni-app x 暂不支持视频选择，待官方支持 视频选择 后我们将跟进更新视频类型支持（ 内容展示组件已实现视频展示功能 ）。

运行图示

组件属性

组件方法

setContent(items:UXEditorItem[])

函数功能 : 设置编辑器项目
函数参数 : 编辑器项目数值，格式 : UXEditorItem[]

getContent()

函数功能 : 获取编辑器项目
返回值格式 : UXEditorItem[]

getNeedUploadImages()

函数功能 : 获取编辑器内容中需要上传的图片项目
返回值格式 : UXEditorNeedUploadItem[]

演示代码

1. 演示代码包含了 ref 使用演示，相关手册 :
https://uniapp.dcloud.net.cn/uni-app-x/component/#callmethod
2. 使用 组件对应ref.items = 默认数据; 的方式来为编辑器设置默认值，详见演示代码；

<template>
	<!-- 组件内部使用 scroll-view 此处请使用 view 作为根节点 -->
	<view class="page">
		<view class="demo-header">
			<text class="demo-header-text">uxEditor 演示</text>
			<text 
			class="demo-button" 
			@tap="getContents">获取内容</text>
		</view>
		<view style="margin-top:0rpx; flex:1;">
			<ux-editor ref="editor"></ux-editor>
		</view>
		<view style="height:20rpx;"></view>
	</view>
</template>
<script lang="uts">
import { UXEditorItem } from "@/uni_modules/ux-editor/ux-editor.uts";
export default {
	data() {
		return {
			title: 'Hello',
			editor : null as null|UxEditorComponentPublicInstance
		}
	},
	onReady() {
		// 此处演示为编辑器设置默认值
		var editor = this.$refs['editor'] as UxEditorComponentPublicInstance;
		editor.items = [
			{content:"标题文本", type:"h"},
			{content:"段落文本", type:"text"}
		] as UXEditorItem[];
	},
	methods: {
		getContents : function(){
			var editor = this.$refs['editor'] as UxEditorComponentPublicInstance;
			console.log(editor.getContent());
			uni.showToast({
				icon:"none",
				title:"具体数据请观察控制台"
			});
		}
	}
}
</script>
<style scoped>
.page{flex:1; background-color:#FFFFFF; display:flex; flex-direction:column;}
.demo-header{display:flex; flex-direction:row; align-items:center; justify-content:space-between; padding:25rpx 17rpx}
.demo-header-text{font-size:28rpx; color:#888888;}
.demo-button{padding:15rpx; font-size:26rpx; border:1px solid #3688FF; color:#3688FF; border-radius:12rpx;}
</style>