使用el-input和el-upload实现

使用`el-input`和`el-upload`可以实现一个简易的富文本编辑器，并支持上传图片。下面是一个示例代码：

<template>
  <div>
    <el-input
      type="textarea"
      v-model="content"
      placeholder="请输入文本内容"
    ></el-input>
    <el-upload
      class="upload-demo"
      action="/api/upload"
      :on-success="handleUploadSuccess"
      :before-upload="beforeUpload"
      :file-list="fileList"
      :limit="1"
      :show-file-list="false"
    >
      <el-button slot="trigger" size="small" type="primary">点击上传图片</el-button>
    </el-upload>
    <div v-if="imageUrl">
      <img :src="imageUrl" alt="上传的图片" style="max-width: 100%;">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '',
      fileList: [],
      imageUrl: ''
    };
  },
  methods: {
    handleUploadSuccess(response, file) {
      this.imageUrl = response.url;
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG) {
        this.$message.error('只能上传 JPG/PNG 格式的图片');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB');
        return false;
      }

      this.fileList = [file];
      return true;
    }
  }
};
</script>

上述代码中，`el-input`用于输入文本内容，`el-upload`用于上传图片。在上传图片时，通过`before-upload`方法进行图片格式和大小的校验，然后通过`handleUploadSuccess`方法获取上传成功后的图片链接，并将其显示在页面上。