tjshop/shop/static/manager/src/components/page/config/EditShopConfig.vue

<template>
    <div>
        <div class="config_button">
            <el-button type="primary" @click="save">保存</el-button>
            <el-button @click="goBack">取消</el-button>
        </div>
        <div id="bar" class="bar">
        </div>
        <div id="editor" class="editor">
        </div>

    </div>
</template>
<script>
var E = require('wangeditor')
export default {
  data() {
    return {
      key: '',
      value: ''
    }
  },
  methods: {
    save: function() {
        var that = this
      var param = {
        key: this.key,
        value: this.value
      }
      this.$http.saveSysConfig(param, this).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1000,
            onClose: function() {
              that.$router.push('/sysConfig')
            }
          })
        }
      })
    },
    goBack: function() {
      this.$router.back()
    }
  },
  mounted: function() {
    var that = this
    var editor = new E('#bar', '#editor')
    editor.customConfig.uploadImgShowBase64 = true
    //editor.customConfig.uploadImgServer = process.env.SERVER_PATH + 'editupload'
    //editor.customConfig.uploadFileName = 'file'
    editor.customConfig.onchange = function(html) {
      that.value = html
    }
    editor.create()

    var key = this.$route.query.key
    this.key = key

    this.$http.getSysConfig({ key: key }, this).then(res => {
      if (res.code === 0) {
        editor.txt.html(res.obj)
      }
    })
  }
}
</script>

<style>
.bar {
  background-color: #f1f1f1;
  border: 1px solid #ccc;
}
.editor {
  border: 1px solid #ccc;
  border-top: none;
  height: 700px;
}

.config_button {
  margin-bottom: 20px;
}
</style>