代码编辑器设置自定义提示

<template>
  <ace-editor
    id="kp-ace-editor"
    @init="editorInit"
    @input="changeData"
    ref="my-ace-editor"
    v-model="aceContent"
    :options="{fontSize: options.fontSize || '12px',enableLiveAutocompletion:options.autoMatch || false}"
    :theme="options.theme || 'chrome'"
    :lang="options.lang || 'sql'"
    :width="options.width || '100%'"
    :height="options.height || '300px'"
  />
</template>
<script>
// 外部引入将不用在init方法中引入资源
// eslint-disable-next-line
import ace from 'brace'
import 'brace/ext/language_tools'
import 'brace/ext/searchbox'
// import 'brace/theme/eclipse'
import 'brace/theme/chrome'
// import 'brace/theme/github'
import 'brace/theme/monokai'
// import 'brace/theme/twilight'
// import 'brace/theme/sqlserver'
// import 'brace/mode/html'
import 'brace/mode/javascript'
import 'brace/mode/python'
import 'brace/mode/json'
import 'brace/mode/sql'
// import 'brace/mode/less'
// import 'brace/mode/css'
// import 'brace/mode/lua'
import 'brace/snippets/python'
import 'brace/snippets/sql';
import 'brace/snippets/javascript';
import 'brace/snippets/json';
import aceEditor from 'vue2-ace-editor'
export default {
  name: 'Vue2AceEditor',
  components: {
    aceEditor
  },
  props: {
    sqlSchema: {
      type: Boolean,
      default: false
    },
    showContent: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: ''
    },
    options: {
      type: Object,
      default () {
        return {
          fontSize: '12px', // '12pt'，
          theme: 'chrome', // chrome/github/monokai/twilight
          lang: 'sql', // html/javascript/json/sql/less
           '100%',
          height: '300px',
          autoMatch: false
        }
      }
    },
    readOnly: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    // 初始化ace-editor
    editorInit: function (editor) {
      //重新创建前，需要销毁
      // editor.dispose();
      this.editor = editor
      editor.setReadOnly(this.readOnly) // 只读
      editor.setShowPrintMargin(false) // 打印线是否显示
      const that = this
      function update() { // 添加自定义提示内容
        var shouldShow = !editor.session.getValue().length;
        var node = editor.renderer.emptyMessageNode;
        if (!shouldShow && node) {
            editor.renderer.scroller.removeChild(editor.renderer.emptyMessageNode);
            editor.renderer.emptyMessageNode = null;
        } else if (shouldShow && !node) {
            node = editor.renderer.emptyMessageNode = document.createElement("div");
            node.textContent = that.placeholder
            node.className = "ace_emptyMessage"
            node.style.padding = "0 9px"
            node.style.position = "absolute"
            node.style.zIndex = 9
            // node.style.opacity = 0.5
            editor.renderer.scroller.appendChild(node);
        }
      }
      if(that.placeholder){
        editor.on("input", update);
        setTimeout(update, 100);
      }
    },
    changeData: function (value) {
      this.$emit('ace-editor-change', value)
    }
  },
  data () {
    return {
      editor: null,
      aceContent: ''
    }
  },
  watch: {
    showContent: {// 初始化加载
      immediate: true,
      handler (val) {
        this.aceContent = val || ''
      }
    },
    readOnly () {
      this.editor.setReadOnly(this.readOnly)
    }
  },
  // beforeDestroy () {
  //   this.editor.destroy();
  //   this.editor.container.remove()
  // },
}
</script>
<style>
    .ace_emptyMessage{
      white-space: pre-wrap;
      color: #c0c4cc;
    }
</style>

end