内容提交及存储

内容提交

用户通过 uxEditor 组件来创建内容项目，在点击提交按钮时我们利用 uxEditor 的 getContent() 方法来获取内容数据（数组形式），获得内容数据后我们将其转换为 json 数据提交给后端 API 接口，后端收到 JSON 数据后可以对其进行进一步处理，然后保存到数据库。

内容存储

我们可以将数据以 2 种形式存储：

1. uxEditor 产生的 JSON 数据直接存储

后端将 uxEditor 产生的 JSON 数据原样保存到数据库，展示数据时也原样输出内容 JSON 数据，这是比较高效的一种方式。

当我们对内容有编辑需求时，直接格式化输出 JSON 内容，让系统管理员编辑 JSON 数据即可。

2. 将内容数据转换为 HTML 数据存储

后端将 uxEditor 产生的 JSON 数据内容转换为 HTML 数据，然后再保存到数据库中，这种方式相对逻辑比较麻烦（ 不过我们已经为您提供了后端转换源码 ），但能够兼容各类网页编辑器（ 如 百度的 ueditor、wangEditor 等等 ），可以满足后台操作使用 HTML 编辑器的需求。

当我们对内容有编辑需求时，系统管理员可以利用 HTML 编辑器来编辑内容。

说明

针对内容数据存储逻辑，我们为您提供了基于 GO 和 PHP 的后端源码包，源码已经经过测试，请参考源码继续改进。
请加入 uXui 交流 QQ 群 : 527580758 ，在群文件中获取后端源码。

内容提交前端源码

<template>
	<!-- 组件内部使用 scroll-view 此处请使用 view 作为根节点 -->
	<view class="page">
		<view class="demo-header">
			<text class="demo-header-text">uxEditor 演示</text>
			<text 
			class="demo-button" 
			@tap="submit">提交</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, 
	UXEditorNeedUploadItem, 
	UXEditorItemForSubmit ,
	UXEditorResponse
} from "@/uni_modules/ux-editor/ux-editor.uts";
export default {
	data() {
		return {}
	},
	onReady() {
		// 此处演示为编辑器设置默认值
		var editor = this.$refs['editor'] as UxEditorComponentPublicInstance;
		var items = [
			{content:"标题文本", type:"h", uploadStatus:2},
			{content:"段落文本", type:"text", uploadStatus:2}
		] as UXEditorItem[];
		editor.setContent(items);
	},
	methods: {
		// 提交按钮触发的直接函数
		submit : function(){
			var editor = this.$refs['editor'] as UxEditorComponentPublicInstance;
			// 编辑器内容数据
			var contentItems = editor.getContent();
			// 获取需要上传的图片数组
			var needUploadImages = editor.getNeedUploadImages();
			if(needUploadImages.length > 0){
				uni.showLoading({
					title:"图片上传中..."
				});
				// 循环上传图片直至完成
				this.uploadImage(contentItems, needUploadImages, 0);
			}else{
				this.submitData(contentItems);
			}
		},
		// 图片上传函数
		uploadImage : function(contentItems:UXEditorItem[], needUploadImages:UXEditorNeedUploadItem[], step:number){
			// 上传完毕
			if(step > needUploadImages.length - 1){
				this.submitData(contentItems);
				return ;
			}
			// 上传图片
			uni.uploadFile({
				// 图片上传接口地址 php
				url: 'http://192.168.1.101/uploadImage.php', 
				// // 图片上传接口地址 GO
				// url: 'http://192.168.1.101:8080/upload', 
				filePath: needUploadImages[step].tmpPath,
				name: 'file',
				formData: {},
				// 上传成功
				success: (res) => {
					var response = JSON.parse<UXEditorResponse>(res.data);
					var errcode:number = response?.errcode == null ? 0 : response.errcode;
					// 上传过程错误
					if(errcode > 0){
						contentItems[needUploadImages[step].index].uploadStatus = 3;
						uni.hideLoading();
						uni.showToast({
							icon:"none",
							title:"图片上传失败，请重试"
						});
						var editor = this.$refs['editor'] as UxEditorComponentPublicInstance;
						editor.setContent(contentItems);
					}else{
						var imageUrl:string = response?.data == null ? "":response.data;
						// 修改内容项目的上传状态
						contentItems[needUploadImages[step].index].uploadStatus = 2;
						contentItems[needUploadImages[step].index].content = imageUrl;
						this.uploadImage(contentItems, needUploadImages, step+1)
					}					
				}, 
				// 上传失败
				fail: () => {
					contentItems[needUploadImages[step].index].uploadStatus = 3;
					uni.hideLoading();
					uni.showToast({
						icon:"none",
						title:"图片上传失败，请重试"
					});
					var editor = this.$refs['editor'] as UxEditorComponentPublicInstance;
					editor.setContent(contentItems);
				},
			});
		},
		// 数据提交函数
		submitData:function(contentItems:UXEditorItem[]){
			uni.showLoading({title:"提交中 ..."});
			var contentForSubmit = [] as UXEditorItemForSubmit[];
			// 整理最终提交的数据
			contentItems.forEach((item:UXEditorItem)=>{
				var itemIn = {
					type:item.type,
					content:item.content
				} as UXEditorItemForSubmit;
				contentForSubmit.push(itemIn)
			});
			// 连接 api 接口进行真正的数据提交
			uni.request<UXEditorResponse>({
				method:"POST",
				header:{
					"Content-Type": "application/x-www-form-urlencoded"
				},
				// 此处请替换为自己的后端 api 地址
				// 可以参考我们提供的 后端源码
				url: 'http://192.168.1.101/transformToHTMLAndSave.php', 
				data: {
					content:JSON.stringify(contentForSubmit)
				},
				success: (res) => {
					uni.hideLoading();
					uni.showToast({
						icon:"none",
						title:"提交成功，请观察控制台"
					});
					console.log(res.data);
				},
				fail:function(err){
					uni.hideLoading();
					uni.showToast({
						icon:"none",
						title:"提交失败，请观察控制台"
					});
					console.log(err);
				}
			});
		}
	}
}
</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>