展示组件

ux-editor-render 组件

ux-editor-render 组件的核心功能是展示内容项目，包含 : 标题、段落文本、加粗文本、倾斜文本、居中文本、引用文本、图片、链接、视频、分割符等类型的内容元素。

1. 目前 uni-app x 暂不支持视频选择，待官方支持 视频选择 后我们将跟进更新视频类型支持。
2. ux-editor-render 支持视频渲染，您可以在后端发布时发布视频项目。

运行图示

ux-editor-render 和 富文本组件的区别

1. ux-editor-render 基于内容项目渲染为原生组件，运行效果极好。
2. ux-editor-render 对应功能开发更灵活，比如已经实现的点击图片对图片进行放大预览功能。
   您可以复制我们的组件，改进出更丰富更个性的内容渲染组件。
3. 和富文本组件比较的缺点是需要自己开发及转换（ 我们已经为您基本写好，您只需要改进即可 ）。

组件属性 items

items 属性
类型 : UXEditorItemForSubmit[]
作用 : 内容项目数组（ 来自 uxEditor 生成的内容数据或后台系统转换后的内容项目数据）

演示代码

说明

演示代码调了演示 api 数据，我们为您提供了基于 GO 和 PHP 的后端源码包，源码已经经过测试，请参考源码继续改进。
请加入 uXui 交流 QQ 群 : 527580758 ，在群文件中获取后端源码。

代码

<template>
	<scroll-view 
	style="padding:30rpx; flex:1;">
		<ux-editor-render :items="contentItems"></ux-editor-render>
	</scroll-view>
</template>
<script lang="uts">
import { 
	UXEditorItemForSubmit ,
} from "@/uni_modules/ux-editor/ux-editor.uts";
type ResponseType = {
	errcode:string
	data:UXEditorItemForSubmit[]
}
export default {
	data() {
		return {
			contentItems : [] as UXEditorItemForSubmit[]
		}
	},
	onReady:function(){
		uni.showLoading({title:"loading ..."});
		// 从 api 加载内容数据
		uni.request<ResponseType>({
			method:"GET",
			// 此处请替换为自己的后端 api 地址
			url: 'http://192.168.1.101/contentDemo.php', 
			success: (res) => {
				uni.hideLoading();
				console.log(res.data);
				var data = res.data;
				if(data == null){
					return
				}else{
					this.contentItems = data.data;
				}
			},
			fail:function(err){
				uni.hideLoading();
				uni.showToast({
					icon:"none",
					title:"内容数据加载失败"
				});
				console.log(err);
			}
		});
	},
	methods: {
		
	}
}
</script>
<style scoped>
</style>