使用插件bin-ace-editor

地址：https://wangbin3162.gitee.io/bin-ace-editor/#/guide

安装

npm i bin-ace-editor -S

配置项

editor选项

renderer选项

mouseHandler选项

session选项

扩展选项

源码

<template>
  <a-card>
    <div :style="{ height: `${clientHeight - 160}` + `px` }" class="codeContent">
      <a-form-model ref="form" :label-width="130" :model="template" :rules="ruleValidate">
        <a-form-model-item label="脚本" prop="tempSource">
          <b-ace-editor v-model="template.tempSource" :fontSize="16" :height="scrollHeight"></b-ace-editor>
        </a-form-model-item>
        <a-form-model-item>
          <a-row justify="space-between" type="flex">
            <a-col>
              <a-button type="primary" @click="getWechatOAConfig">刷新</a-button>
              <a-button class="ml32" @click="handleZip">压缩</a-button>
              <a-button class="ml32" @click="handleFormat">格式化</a-button>
            </a-col>
            <a-col>
              <a-button type="primary" @click="handleSubmit">提交</a-button>
              <a-button class="ml32" type="primary" @click="refreshWechatOAConfig">更新配置</a-button>
            </a-col>
          </a-row>
        </a-form-model-item>
      </a-form-model>
    </div>
  </a-card>
</template>

<script>
  import BinAceEditor from 'bin-ace-editor'
  import { GetWechatOAConfig, RefreshWechatOAConfig, UpdateWechatOAConfig } from '@/api/api.content'

  const jsonData = `{"title":"测试json数据","children":[{"name":"子项名称", "desc":"子项说明" },{"name":"子项名称1", "desc":"子项说明1" }]}`
  export default {
    name: 'weChatOA',
    components: {
      'b-ace-editor': BinAceEditor
    },
    data() {
      const checkObj = (rule, value, callback) => {
        try {
          if (JSON.parse(value.trim())) {
            callback()
          }
        } catch (e) {
          callback('不是标准json')
        }
      }
      return {
        timer: null,
        clientHeight: 0,
        scrollHeight: 0,
        operationHeight: 0,
        ruleValidate: {
          tempSource: [
            { required: true, message: '必填项', trigger: 'blur' },
            { validator: checkObj, trigger: 'blur' }
          ]
        },
        template: {
          tempSource: ''
        }
      }
    },
    mounted() {
      this.elasticityResize()
      window.addEventListener('resize', this.elasticityResize)
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.elasticityResize)
    },
    created() {
      this.getWechatOAConfig()
    },
    methods: {
      getWechatOAConfig() {
        GetWechatOAConfig().then((res) => {
          if (res.code == 200) {
            this.template.tempSource = res.data.content
            this.handleFormat()
          }
        })
      },
      handleSubmit() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.updateWechatOAConfig()
                } else {
                    this.$message.error('校验失败')
                }
            })
        },
        handleZip() {
            this.template.tempSource = JSON.stringify(JSON.parse(this.template.tempSource), null, 0)
        },
        handleFormat() {
            this.template.tempSource = JSON.stringify(JSON.parse(this.template.tempSource), null, 2)
        },
        updateWechatOAConfig() {
            let params = {
                content: this.template.tempSource
            }
            UpdateWechatOAConfig(params).then((res) => {
                if (res.code == 200) {
                    this.$message.success('提交成功')
                }
            })
        },
        refreshWechatOAConfig() {
            RefreshWechatOAConfig().then((res) => {
                if (res.code == 200) {
                    this.$message.success('更新成功')
                }
            })
        },
        elasticityResize() {
            if (this.timer) clearTimeout(this.timer)
            this.timer = setTimeout(() => {
                this.$nextTick(() => {
                    this.clientHeight = document.documentElement.clientHeight
                })
            }, 300)
        }
    },
    watch: {
        clientHeight(v) {
            this.scrollHeight = v - 300
        }
    }
}
</script>

<style scoped>
.codeContent {
    width: 1024px;

    margin-top: 16px;
    margin-left: 32px;
}

.ml32 {
    margin-left: 16px;
}
</style>