一、需求

最近在工作时遇到一个需求，要求在codemirror插件中实现一个类似于input框的placeholder效果，用来提示yaml文件如何书写，菜鸡博主忙活了一天多找到了一个实现这种效果的方法，下面展示如何实现这种效果。

二、关键函数

首先默认你看过我的

React中CodeMirror插件的使用及封装_大聪明码农徐的博客-CSDN博客_codemirror react关于 CodeMirror 插件的引入、解释、使用、及封装。https://blog.csdn.net/qq_45799465/article/details/125970339?spm=1001.2014.3001.5501 的这篇文章，对于codemirror有一个初步的认识，并能够理解其基本使用。下面介绍关键实现函数。

（一）focus 聚焦方法

  focusEvent = () => {
    const { data, TooltipValue, bool } = this.props
    const { CodeMirrorRef } = this;
    const editor = CodeMirrorRef.getCodeMirror();
    const str = editor.getValue()
    if (bool) {
      if (str == TooltipValue) {
        editor.setValue('')
      } else {
        editor.setValue(str)
      }
    }
  }

（二）blur 失焦方法

  blurEvent = () => {
    const { data, TooltipValue, bool } = this.props;
    const { CodeMirrorRef } = this;
    const editor = CodeMirrorRef.getCodeMirror();
    const str = editor.getValue()
    if (bool) {
      if (str.length == 0) {
        editor.setValue(TooltipValue)
      } else {
        editor.setValue(str)
      }
    }
  }

（三）挂载方法

通过 ref 拿到 codemirror的dom节点。

节点.on("事件"，“函数”) //挂载到节点上

节点.off("事件"，“函数”) //取消挂载

  componentDidMount() {
    const { bool } = this.props;
    const { CodeMirrorRef } = this;
    const editor = CodeMirrorRef.getCodeMirror();
    if (bool) {
      editor.on("focus", this.focusEvent)
      editor.on("blur", this.blurEvent)
    }

  }

三、需求实现

看完上面的可能不太懂，下面我来解读一下。

这里为了兼顾修改的功能，我把文字提示和传进去的文件分别用了两个变量。

这里 data和tooltipValue是完全不一样的两个文件。

data是动态传的值，tooltipValue是提示的一个数组对应的值。

 TooltipValueArr: {
        affinity:'#示例\n#nodeAffinity:\n#      preferredDuringSchedulingIgnoredDuringExecution:\n#      - weight: 1\n#        preference:\n#          matchExpressions:\n#          - key: disktype\n#            operator: In\n#            values:\n#           - ssd\n',
        tolerations:'#示例\n#- key: "test"\n#  operator: "Equal"\n#  value: "yk"\n#  effect: "NoSchedule"\n',
        env:'#示例\n#- name: NGINX_USERNAEM\n#  valueFrom:\n#    secretKeyRef:\n#      key: username\#      name: test-secret\n#      optional: false\n#- name: NGINX_PASSWORD\#  valueFrom:\n#    secretKeyRef:\n#      key: password\n#      name: test-secret\n#      optional: false\n#- name: MY_POD_IP\n#  valueFrom:\n#   fieldRef:\#     fieldPath: status.podIP\n',
        volumes:'#示例\n#- hostPath:\n#    path: /test\n#  name: data\n#- name: mydata\n#  persistentVolumeClaim:\n#    claimName: test-pvc\n#- configMap:\n#    name: test\n#  name: config\n',
        volumeMounts:'#示例\n#- mountPath: /opt\n#  name: data\n#- mountPath: /etc/test/conf/aa\n#  name: mydata\n#  subPath: aa\n#- mountPath: /etc/test/conf/nginx.conf\n#  name: config\n#  subPath: test.conf\n'
      },

bool 是判断是否为新增，新增就有提示，修改则不用去动。

四、详细代码


//封装组建内新增的
  componentDidMount() {
    const { bool } = this.props;
    const { CodeMirrorRef } = this;
    const editor = CodeMirrorRef.getCodeMirror();
    if (bool) {
      editor.on("focus", this.focusEvent)
      editor.on("blur", this.blurEvent)
    }

  }
  saveRef = ref => {
    this.CodeMirrorRef = ref;
    const { saveRef = false } = this.props;
    if (saveRef) {
      saveRef(ref);
    }
  };
  focusEvent = () => {
    const { data, TooltipValue, bool } = this.props
    const { CodeMirrorRef } = this;
    const editor = CodeMirrorRef.getCodeMirror();
    const str = editor.getValue()
    if (bool) {
      if (str == TooltipValue) {
        editor.setValue('')
      } else {
        editor.setValue(str)
      }
    }
  }
  blurEvent = () => {
    const { data, TooltipValue, bool } = this.props;
    const { CodeMirrorRef } = this;
    const editor = CodeMirrorRef.getCodeMirror();
    const str = editor.getValue()
    if (bool) {
      if (str.length == 0) {
        editor.setValue(TooltipValue)
      } else {
        editor.setValue(str)
      }
    }
  }

//jsx语法中引用的的代码
                 <CodeMirrorForm
                    setFieldsValue={setFieldsValue}
                    formItemLayout={formItemLayoutss}
                    Form={Form}
                    style={
   
   { marginBottom: '20px' }}
                    getFieldDecorator={getFieldDecorator}
                    name={selectVal}
                    message="请编辑内容"
                    data={yamlValue || ''}
                    mode={'yaml'}
                    bool = { isBool }
                    TooltipValue={ TooltipValue }
                  />

CodeMirror实现类似input框的 placeholder提示效果