代码编辑器vue-codemirror中placeholder的使用方法在codemirror的官方展示页中，有plac

在codemirror的官方展示页中，有placeholder的出现。

但是我按照常规思路，用下面两种方式给codemirror加上placeholer并不生效。

<template>
  <codemirror placeholder="zzz" :options="options"></codemirror>
</template>

<script>
  export default {
    data () {
      return {
        options: {
          placeholder: 'zzz'
        }
      }
    }
  }
</script>

经过查阅资料，发现在codemirror的使用中，placeholder是需要作为一个插件被单独引入的。

有两种引入方式：

npm引入 import 'codemirror/addon/display/placeholder.js'

import 'codemirror/addon/display/placeholder.js'

手动引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/addon/display/placeholder.js"></script>

此时会发现placeholder的字体样式和codemirror相同，为避免这种情况，需要给其单独设置样式。

.CodeMirror pre.CodeMirror-placeholder {
    color: #999;
    font-size: 0.5rem;
}