这个功能是在后台编辑小程序页面，然后在小程序端展示出来。
左侧预览，右侧编辑，下方点击可以添加对应组件。

图片广告(轮播图)组件：

富文本组件：

整体功能的思路是这样的：
新建与编辑是同一个页面，进入页面时请求后端提供的接口拿到数据库中的数据，并展示出来，点击发布按钮请求后端接口把数据保存到数据库中。

json数据格式：

list:[
	{
    
		cardRight: 1,
		type: "image_ad",
		showRight: false,
		images:[
			{
    
				url:'',
				title:''
			}
		]
	}
	{
    
		cardRight: 2,
		type: "rich_text",
		showRight: false,
		content: "<p>这是富文本的内容</p>"
	}
]

父组件左侧思路：

<!--左侧预览区域-->
<div class="list" v-for="(item,index) in list" :key="index" @click="left_click(index)" :class="leftIndex == index ? 'border' : ''">
	<!--删除按钮-->
	<div v-if="leftIndex == index" class="close" @click.stop @click="close(index)">
		<img src="../../assets/xx.png" alt="">
	</div>
	<!--图片广告左侧预览组件-->
	<imageAd v-if="item.type == 'image_ad'" :list="list" :leftIndex="index"></imageAd>
	<!--富文本左侧预览组件-->
	<richText v-if="item.type == 'rich_text'" :list="list" :leftIndex="index"></richText>
</div>
<p class="bottom">添加内容</p>
<div class="add_item">
	<p @click="addImageAd()">图片广告</p>
	<p @click="addRichText()">富文本</p>
</div>

methods: {
    
	left_click(index){
    
     var that = this
     that.leftIndex = index
     for(let i=0;i<that.list.length; i++){
    
       that.list[i].showRight = false
       this.$set(that.list,i,that.list[i])
     }
     // this.$set(that.list,that.list)
     that.list[that.leftIndex].showRight = true
     console.log(that.list)
   },
   addImageAd(){
    
     var that = this
     that.list.push(
       {
    
         'showRight':true,
         'cardRight':1,
         'type':'image_ad',
         'images':[]
       }
     )
   },
   addRichText(){
    
     var that = this
     that.list.push(
       {
    
         'showRight':true,
         'cardRight':2,
         'type':'rich_text',
         'content':'<p>点击编辑富文本</p>'
       }
     )
   },
}

左侧子组件思路：

拿到父组件传入list和leftIndex，渲染页面即可

父组件右侧思路：

<!-- 编辑区域 -->
<div v-if="list.length && list[leftIndex].showRight">
  <div class="edit_wrap">
    <imageAdEdit v-if="list.length && list[leftIndex].cardRight == 1" :list="list" :leftIndex="leftIndex"></imageAdEdit>
    <richTextEdit @userDefinedEvent="userDefined" v-if="list.length && list[leftIndex].cardRight == 2" :list="list" :leftIndex="leftIndex"></richTextEdit>
  </div>
</div>

右侧子组件思路：
图片广告右侧编辑组件：

<p>建议尺寸： 750px（宽）* 400px（高）</p>
<div v-for="(item,index) in list[leftIndex].images" :key="index" class="add_image">
    <img src="../assets/xx.png" class="close" alt="" @click="close(index)">
    <span class="span1"><i>* </i>图片：</span>
    <!--无图片-->
    <div class="image" v-if="!list[leftIndex].images[index].url">
        <div v-if="list[leftIndex].images[index]">+添加图片</div>
        <input type="file" id="upfile" name="upfile" accept="image/*" @change="upFile(index)">
    </div>
    <!--有图片-->
    <div class="image" v-else>
        <img :src="cdn_url + item.url" alt="">
    </div>
</div>
<div v-if="list[leftIndex].images.length < 5" class="add_ad" @click="add_ad()">+ 添加一个广告</div>

<script>
    import {
     apis,cdn_url } from '../uitl/config'
    export default {
    
        data(){
    
            return{
    
                cdn_url:cdn_url
            }
        },
        props:["list","leftIndex"],
        methods:{
    
            add_ad(){
    //图片添加至list中
                this.list[this.leftIndex].images.push(
                    {
    
                        url:"",
                        title:""
                    }
                )
            },
            close(index){
    //删图片
                this.list[this.leftIndex].images.splice(index,1);
            },
            //图片上传至cdn
            upFile(index){
    
                var that = this
                var reads = new FileReader();
                var file = document.getElementById('upfile').files[0];
                console.log(file)
                if(file.size / 1024 / 1024 > 3){
    
                    that.$message({
    
                        message: '图片过大',
                        type: 'error'
                    });
                    return false
                }
                reads.readAsDataURL(file);
                var formData = new FormData();
                formData.append('file',file);
                // 获取图片的签名
                var api_token = localStorage.getItem('api_token')
                that.$axios.post(`${
      apis}/xxx/xxx/xxx`,{
    'api_token':api_token}).then(res => {
    
                    console.log(res.data.data.url)
                    formData.append('policy', res.data.data.policy);
                    formData.append('authorization', res.data.data.authorization);
                    // 上传到cdn
                    that.$axios.post(res.data.data.url,formData).then(res => {
    
                        console.log(res.data.url)
                        that.list[that.leftIndex].images[index].url = res.data.url
                    })
                })
            }
        }
    }
</script>

富文本右侧编辑组件：
这里就是引用富文本插件并获取内容。

保存发布：
请求接口保存list。

小程序端：
请求接口获取list并渲染。