<template>
<view class="grace-editor">
<textarea class="grace-editor-title" v-model="article.title" placeholder="# 请输入标题" auto-height />
<!-- 内容区域 -->
<view v-for="(item, index) in article.contents" :key="index" class="grace-editor-items">
<!-- 普通文本 -->
<textarea class="grace-editor-txt" maxlength="-1" :data-index="index" v-if="item.type == 'txt'"
@input="graceEditorInput" :value="item.content" placeholder="# 请在此处输入文本内容" auto-height />
<!-- 居中标题 -->
<input type="text" class="grace-editor-center" maxlength="-1" :data-index="index"
@input="graceEditorInput" :value="item.content" placeholder="# 输入居中题目" v-else-if="item.type == 'center'" />
<!-- 图片 -->
<view class="grace-editor-img-wrap" v-else-if="item.type == 'img'">
<image :src="item.content" class="grace-editor-img" :data-index="index" mode="widthFix" @tap="deleteItem"></image>
<view class="grace-editor-img-error" v-if="item.error">
<view class="grace-flex-center">
<text class="grace-editor-img-error-text grace-red" style="font-size:32rpx;">图片上传失败！</text>
</view>
<view class="grace-flex-center grace-margin-top">
<text class="grace-editor-img-error-text grace-green">点击发布按钮重新上传</text>
<text class="grace-editor-img-error-text">或</text>
<text class="grace-editor-img-error-text grace-red" :data-index="index" @tap.stop="deleteItem">删除图片</text>
</view>
</view>
</view>
<!-- 引用 -->
<textarea class="grace-editor-quote" maxlength="-1" :data-index="index" v-else-if="item.type == 'quote'"
@input="graceEditorInput" :value="item.content" placeholder="# 请在此处输入引用内容" auto-height />
<!-- 加粗 -->
<textarea class="grace-editor-strong" :data-index="index" maxlength="-1" v-else-if="item.type == 'strong'"
@input="graceEditorInput" :value="item.content" placeholder="# 请在此处输入加粗内容" auto-height />
<!-- 链接 -->
<input type="text" class="grace-editor-link" :data-index="index" v-else-if="item.type == 'link'"
@input="graceEditorInput" :value="item.content" placeholder="# 输入连接地址" />
<!-- 分割 -->
<text class="grace-editor-spline" :data-index="index" @tap="deleteItem" v-else-if="item.type == 'spline'">● ● ●</text>
</view>
<!-- 选项类型选择 -->
<view class="grace-space-between grace-editor-menus" :style="{paddingBottom:ipxHeight}">
<text class="grace-editor-icons grace-icons" data-type="txt" @tap="graceEditorAddItem"></text>
<text class="grace-editor-icons grace-icons" data-type="center" @tap="graceEditorAddItem"></text>
<text class="grace-editor-icons grace-icons" data-type="img" @tap="graceEditorAddItem"></text>
<text class="grace-editor-icons grace-icons" data-type="quote" @tap="graceEditorAddItem"></text>
<text class="grace-editor-icons grace-icons" data-type="strong" @tap="graceEditorAddItem"></text>
<text class="grace-editor-icons grace-icons" data-type="link" @tap="graceEditorAddItem"></text>
<text class="grace-editor-icons grace-icons" data-type="spline" @tap="graceEditorAddItem"></text>
</view>
<!-- 底部占位 -->
<view style="height:200rpx; width:100%"></view>
</view>
</template>
<script>
export default{
data() {
return {
article : {title:'', contents:[]},
ipxHeight : 0
}
},
methods:{
graceEditorAddItem : function(e){
var type = e.currentTarget.dataset.type;
if(type == 'img'){
uni.chooseImage({
success:(e)=>{
var imgs = e.tempFilePaths;
for(let i = 0; i < imgs.length; i++){
this.article.contents.push({type:type,content:imgs[i]});
}
this.returnArt();
}
});
}else{
this.article.contents.push({type:type,content:''});
this.returnArt();
}
},
graceEditorInput : function(e){
var index = e.currentTarget.dataset.index;
var val = e.detail.value;
if(val == ''){
this.article.contents.splice(index, 1);
}else{
this.article.contents[index].content = val;
}
this.returnArt();
},
deleteItem : function(e){
var index = e.currentTarget.dataset.index;
uni.showModal({
title:"提示",
content:"确定要删除项目吗?",
success:(e)=>{
if(e.confirm){this.article.contents.splice(index, 1); this.returnArt();}
}
})
},
returnArt : function(){
this.$emit('change', this.article);
},
setError : function(index){
this.article.contents[index].error = true;
this.article.contents.splice(index, 1, this.article.contents[index]);
},
setDefault : function (article) {
this.article = article;
this.returnArt();
}
}
}
</script>
<style>
/* 编辑器 */
.grace-editor{padding:10rpx 25rpx; width:750rpx;}
.grace-editor-title{padding:25rpx 0; border-bottom-width:1px; border-bottom-style:solid; border-color:#F1F2F3; width:700rpx; font-size:36rpx; font-weight:bold; line-height:50rpx; color:#555555;}
.grace-editor-menus{width:750rpx; position:fixed; left:0; background-color:#F8F8F8; bottom:0; border-top-width:1px; border-top-style:solid; border-color:#F1F2F3; padding:0 25rpx;}
.grace-editor-icons{width:700rpx; flex:1; height:88rpx; color:#666666; line-height:88rpx; text-align:center; font-size:38rpx !important;}
.grace-editor-items{margin-top:10rpx; flex-direction:row; justify-content:center;}
.grace-editor-txt{width:700rpx; font-size:26rpx; margin-top:15rpx; margin-bottom:15rpx;}
.grace-editor-center{width:300rpx; text-align:center; font-size:28rpx; color:#333333; line-height:60rpx; padding:10rpx; border-bottom-width:1px; border-bottom-style:solid; border-color:#F1F2F3; font-weight:bold;}
.grace-editor-img-wrap{width:700rpx; height:300rpx; overflow:hidden; margin:10rpx 0; position:relative; font-size:0;}
.grace-editor-img{width:700rpx; height:300rpx;}
.grace-editor-img-error{position:absolute; width:700rpx; height:300rpx; left:0; top:0; background-color:rgba(0,0,0,0.5); flex-direction:column; align-items:center; justify-content:center;}
.grace-editor-img-error-text{font-size:28rpx; margin:0 15rpx; color:#FFFFFF;}
.grace-editor-quote{border-radius:8rpx; width:700rpx; color:#333333; background-color:#F8F8F8; margin-top:15rpx; margin-bottom:15rpx; font-size:26rpx;}
.grace-editor-strong{width:700rpx; font-weight:bold; font-size:26rpx; margin-top:15rpx; margin-bottom:15rpx;}
.grace-editor-link{width:700rpx; font-size:26rpx; margin-top:15rpx; margin-bottom:15rpx; color:#007AFF;}
.grace-editor-spline{width:700rpx; line-height:60rpx; text-align:center; color:#8788A3; font-size:28rpx; opacity:0.6;}
</style>