Table of contents

1. Demand

Recently at work, I encountered a requirement to implement a placeholder effect similar to the input box in the codemirror plug-in, which is used to prompt how to write the yaml file. The vegetable chicken blogger has been busy for more than a day and found a way to achieve this effect. Here's how to achieve this effect.

2. Key functions

First of all, by default, you have seen my

The use and packaging of the CodeMirror plug-in in React This article in https://blog.csdn.net/qq_45799465/article/details/125970339?spm=1001.2014.3001.5501 has a preliminary understanding of codemirror and can understand its basic use. The key implementation functions are introduced below.

(1) focus focusing method

  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)
      }
    }
  }

(2) blur out of focus method

  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)
      }
    }
  }

(3) Mounting method

Get the dom node of codemirror through ref.

Node.on("event", "function") //mount to the node

Node.off("event", "function") //unmount

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

  }

3. Realization of needs

After reading the above, you may not understand it, so let me explain it below.

In order to take into account the modification function here, I use two variables for the text prompt and the passed in file.

Here data and tooltipValue are two completely different files.

data is the value passed dynamically, and tooltipValue is the value corresponding to an array of prompts.

 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 is to judge whether it is a new addition, there will be a prompt for the addition, and there is no need to touch the modification.

Four, detailed code


//封装组建内新增的
  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 achieves a placeholder prompt effect similar to an input box