minsu_goodsmonent_manage/pages/goods/list/detail.vue

<template>
	<div>
		<el-form label-width="150px">
			<!-- <div class="container">
				<h3 class="margin_b_20">主图</h3>
				<el-form-item><uni-file-picker v-model="imgval" fileMediatype="image" returnType="array"
						:image-styles="imageStyle" @select="imgDelete" /></el-form-item>
			</div> -->
			<div class=" container">
				<h3 class="margin_b_20">商品详情</h3>
				<el-form-item>
					<div id="wangeditor" class="editor">
						<div ref="editorElem"></div>
					</div>
				</el-form-item>
			</div>
		</el-form>
	</div>
</template>

<script>
	import E from 'wangeditor';
	export default {
		data() {
			return {
				imageValue: [],
				imgval:null,
				imageStyle: {
					height: '150px',
					width: '150px'
				},
				editor: null,
				editorContent: ''
			};
		},
		props: ['catchData'],
		methods: {
			submitData(callback) {
				// if (this.imageValue.length < 1) {
				// 	this.$message({
				// 		message: '请选择主图',
				// 		type: 'warning'
				// 	});
				// 	this.$emit('detail');
				// 	return;
				// }
				if (!this.editorContent) {
					this.$message({
						message: '请输入商品详情',
						type: 'warning'
					});
					this.$emit('detail');
					return;
				}

				if (typeof callback === 'function') {
					callback({
						content: this.editorContent,
						imgs: this.imageValue
					});
				}
			},
			getData(callback) {
				this.submitData(callback);
			},
			setData(data) {
				this.imageValue = data.imgs;

				if (data.desc) {
					this.editor.txt.html(data.desc);
					this.editorContent = data.desc;
				}
			},
			imgDelete(e) {
				var img = e.tempFiles[0].file;
				const file = img;
				
				const formData = new FormData();
				formData.append('file', file);
				// 文件上传
				this.$axios.post("/file/open/",formData,
				{
					headers:{
						'Content-type' : 'multipart/form-data'
					}
				}).then(response => {
					let res = response
					if (res.success) {
						img =res.data
						this.imgval=img
						this.imageValue.push(img)
					} else {
						uni.showToast({
							icon:'error',
							title: '请重新上传！'
						});
						img =''
						this.imageValue = null;
					}
				}).catch(res =>{
					uni.showToast({
						icon:'error',
						title: '请重新上传！'
					});
					img =''
					this.imageValue = null;
				});
				this.imageValue.splice(this.imageValue, 1);
				// this.imageValue.splice(this.imageValue.findIndex(x => x.url == e.url), 1);
			}
		},
		mounted() {
			let $this = this;

			this.editor = new E(this.$refs.editorElem);
			// 编辑器的事件，每次改变会获取其html内容
			this.editor.customConfig.onchange = html => {
				this.editorContent = html;
			};

			// 将图片大小限制为 2M
			this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024;
			// 限制一次最多上传 10张图片
			this.editor.customConfig.uploadImgMaxLength = 10;

			this.editor.customConfig.customAlert = function(info) {
				// info 是需要提示的内容
				alert('自定义提示：' + info);
			};
			// 插入网络图片的校验
			this.editor.customConfig.linkImgCheck = function (src) {
			console.log(src) // 图片的链接
			return true // 返回 true 表示校验成功
			// return ‘验证失败’ // 返回字符串，即校验失败的提示信息
			};
			this.editor.customConfig.customUploadImg = function(files, insert) {
				// files 是 input 中选中的文件列表
				// insert 是获取图片 url 后，插入到编辑器的方法
				for (var i = 0; i < files.length; i++) {
					
					const formData = new FormData();
					formData.append('file', files[i]);
					// 文件上传
					$this.$axios.post("/file/open/",formData,
					{
						headers:{
							'Content-type' : 'multipart/form-data'
						}
					}).then(response => {
						let res = response
						if (res.success) {
							insert(res.data);
						} else {
							uni.showToast({
								icon:'error',
								title: '请重新上传！'
							});
							img =''
						}
					}).catch(res =>{
						uni.showToast({
							icon:'error',
							title: '请重新上传！'
						});
						img =''
					});
				}
			};

			this.editor.customConfig.menus = [
				// 菜单配置
				'head', // 标题
				'bold', // 粗体
				'fontSize', // 字号
				'fontName', // 字体
				'italic', // 斜体
				'underline', // 下划线
				'strikeThrough', // 删除线
				'foreColor', // 文字颜色
				'backColor', // 背景颜色
				'link', // 插入链接
				'list', // 列表
				'justify', // 对齐方式
				'quote', // 引用
				'emoticon', // 表情
				'image', // 插入图片
				'table', // 表格
				'code', // 插入代码
				'undo', // 撤销
				'redo' // 重复
			];
			this.editor.create(); // 创建富文本实例
		}
	};
</script>

<style></style>