vue2富文本编辑器

1.引入

npm i wangeditor --save

2.创建

<template>
  <div style="margin: 20px auto;width: 50%;">
    <el-button size="default" type="primary" @click="add">发布攻略</el-button>
    <el-dialog title="发布攻略" :visible.sync="flag" width="60%">
      <el-form :model="form" ref="form" :rules="rules" label-width="80px" :inline="false" size="small">
        <el-form-item label="主图" prop="pic">
          <el-input v-model="form.pic"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title"></el-input>
        </el-form-item>

        <el-form-item label="内容" prop="context">



          //创建富文本编辑器容器
          <div id="div1" style="width: 100%;"></div>




        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="flag = false">取消</el-button>
        <el-button type="primary" @click="onSubmit">发布</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import E from 'wangeditor'
let editor
function initText(context) {
  setTimeout(() => {
    if (!editor) {
      editor = new E('#div1')
      editor.config.placeholder = "请输入内容",
        //上传文件名
        editor.config.uploadFileName = "file",
        //图片上传接口
        editor.config.uploadImgServer = 'http://localhost:2000/user/uploadHtml'
      editor.create()
    }
    editor.txt.html(context)
  }, 0)
}
export default {
  name: 'MyIntroyVue',
  components: {

  },
  mixins: [],
  props: {

  },
  data() {
    return {
      form: {},
      rules: {
        pic: [
          { required: true, message: '请输入主图', trigger: 'blur' }
        ],
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' }
        ],
        context: [
          { required: true, message: '请输入内容', trigger: 'blur' }
        ]
      },
      flag: false
    }
  },
  computed: {

  },
  watch: {

  },
  mounted() {

  },
  methods: {
    add() {
      this.form = {}
      initText('')
      this.flag = true
    },
    onSubmit() {
      this.form.context = editor.txt.html()
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.$http('/strategy/saveOrUpdate', this.form, 'post').then(res => {
            if (res.code == 200) {
              this.$message.success('发布成功')
              this.flag = false
            } else {
              this.$message.error(res.msg)
            }
          })
        }else {
          this.$message.error('请填写完整信息')
        }
      })
    }
  }
};
</script>
<style scoped></style>

3.效果

4.注意事项（重要）图片上传

接口要返回 application/json 格式，格式要求如下：必须以这种形式

{
    // errno 即错误代码，0 表示没有错误。
    //       如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
    "errno": 0,

    // data 是一个数组，返回图片Object，Object中包含需要包含url、alt和href三个属性,它们分别代表图片地址、图片文字说明和跳转链接,alt和href属性是可选的，可以不设置或设置为空字符串,需要注意的是url是一定要填的。
    "data": [
        {
            url: "图片地址",
            alt: "图片文字说明",
            href: "跳转链接"
        },
        {
            url: "图片地址1",
            alt: "图片文字说明1",
            href: "跳转链接1"
        },
        "……"
    ]
}