How to use the codemirror/lib/codemirror.fromTextArea function in codemirror

extraKeys: {
      Tab: function (cm) {
        var spaces = new Array(cm.getOption('indentUnit') + 1).join(' ');
        cm.replaceSelection(spaces);
      }
    },
    lineNumbers: true,
    lineWrapping: false,
    mode: 'text/javascript', // Mostly for comments.
    placeholder: document.getElementById('placeholder'),
    tabSize: 2
  });
  recordCm.on('change', createChangeHandler(500));

  // Setup JSON schema read-only editor (sic).
  avscCm = CodeMirror.fromTextArea(document.getElementById('avsc'), {
    lineNumbers: true,
    lineWrapping: false,
    mode: 'application/json',
    placeholder: '// ...and the corresponding JSON schema will appear here.',
  });

};

didInsertElement() {
    this._super();

    let $originalTextarea = this.$().find('textarea');
    this.codemirror = CodeMirror.fromTextArea($originalTextarea[0], {
      lineNumbers: true,
      mode: $originalTextarea.data('codemirror-mode'),
      tabSize: 2,

      // Enable auto-refresh plugin to fix codemirror creation fields that may
      // be hidden originally (eg, hidden under collapsed form sections).
      autoRefresh: true,
    });

    // Set the id on the codemirror input to match the field's label so that
    // when clicking on the label the codemirror input gains focus.
    const inputField = this.codemirror.getInputField();
    if(inputField) {
      inputField.id = this.codemirrorInputFieldId;

      const wrapperElement = this.codemirror.getWrapperElement();

private initCodeEditor = (isInit: boolean) => {
    if (!this.codeMirrorInst) {
      // @FIXME ref is null in componentDidUpdate
      if (!this.codeEditor.current) { return true }
      const codeEditorDom = findDOMNode(this.codeEditor.current)
      this.codeMirrorInst = codeMirror.fromTextArea(codeEditorDom, {
        mode: 'text/javascript',
        theme: '3024-day',
        lineNumbers: true,
        lineWrapping: true
      })
      this.codeMirrorInst.setSize('100%', 300)
    }
    if (isInit && this.state.localConfig.useExpression) {
      this.codeMirrorInst.doc.setValue(this.state.localConfig.alias)
    }
    return false
  }

initialize : function() {
			// Load the code mirror editor.
			var apiBodyTextArea = document.getElementById("apiBody");

			this.apiBodyCodeMirror = CodeMirror.fromTextArea(apiBodyTextArea, {
				lineNumbers : true,
				lineWrapping : true,
				indent : true,
				mode : "javascript"
			});

			this.apiBodyCodeMirror.setSize('100%', '150px');

			$("#apiUrl").keyup(function(event) {
				if (event.keyCode == 13) {
					$("#run").click();
				}
			});

			$("#run").unbind('click').bind("click", function(view) {
				return function() {

componentDidMount() {
    const { value } = this.props;
    const editorNode = this.refs.editor;
    const that = this;
    this.codeMirror = CM.fromTextArea(editorNode, this.getOptions());
    this.codeMirror.on('change', this.codemirrorValueChanged.bind(this));
    this.codeMirror.on('cursorActivity', this.updateCursorState.bind(this));
    this._currentCodemirrorValue = value;

    // 保存
    key('⌘+s, ctrl+s', (e) => {
      e.preventDefault();
      that.handleSave();
    });

    // 返回
    key('⌘+shift+left', (e) => {
      e.preventDefault();
      that.handleBack();
    });

window.onload = function () {
  // Setup editable IDL editor.
  recordCm = CodeMirror.fromTextArea(document.getElementById('record'), {
    extraKeys: {
      Tab: function (cm) {
        var spaces = new Array(cm.getOption('indentUnit') + 1).join(' ');
        cm.replaceSelection(spaces);
      }
    },
    lineNumbers: true,
    lineWrapping: false,
    mode: 'text/javascript', // Mostly for comments.
    placeholder: document.getElementById('placeholder'),
    tabSize: 2
  });
  recordCm.on('change', createChangeHandler(500));

  // Setup JSON schema read-only editor (sic).
  avscCm = CodeMirror.fromTextArea(document.getElementById('avsc'), {

initEditor() {
    if (!this._textarea) {
      return
    }

    const { wrapLines, highlightTag, lightTheme, useTab, tabSize, indentSize } = this.props

    if (this._codeMirror) {
      this._codeMirror.toTextArea()
      this._codeMirror = null
    }

    this._codeMirror = CodeMirror.fromTextArea(this._textarea, {
      tabSize,
      dragDrop: false,
      matchTags: highlightTag ? { bothTags: true } : undefined,
      indentUnit: indentSize,
      indentWithTabs: useTab,
      mode: 'xml',
      lineNumbers: true,
      theme: lightTheme ? 'neo' : 'one-dark',
      autoCloseTags: true,
      foldGutter: true,
      gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
      styleActiveLine: {
        nonEmpty: true,
      },
      highlightSelectionMatches: {
        wordsOnly: true,

setTimeout(() => {
      let myTextarea = document.getElementById('code');
      this.codeMirrorEditor = CodeMirror.fromTextArea(myTextarea, {
        mode: 'javascript',//编辑器语言
        theme: 'monokai', //编辑器主题
        extraKeys: { "Ctrl": "autocomplete" },//ctrl可以弹出选择项 
        lineNumbers: true//显示行号
      });
    });
  }

function codemirrorify(el) {
  return CodeMirror.fromTextArea(el, {
    theme: "neo",
    lineNumbers: true,
    viewportMargin: Infinity,
    mode: "fluentd"
  });
}

componentDidUpdate() {
        if (this.props.isOpen) {
            const { file } = this.props;
            if (Object.keys(file).length != 0 && (typeof file.lines) == 'string') {
                if (this.codeMirror) {
                    this.codeMirror.toTextArea();
                    this.codeMirror = null;
                }
                const target = document.getElementById('cm-log-file-content');
                if (target) {
                    this.codeMirror = CodeMirror.fromTextArea(target, {
                        mode: 'links',
                        lineNumbers: true,
                        readOnly: true,
                        lineWrapping: true,
                        scrollbarStyle: 'simple',
                        theme: 'solarized dark'
                    });
                    this.codeMirror.setValue(file.lines);
                    jQuery('.CodeMirror').delegate('.cm-attach-links', 'click', function (event) {
                        var text = event.target.textContent;
                        if (text && text.length == 46) {
                            var id = text.substring(12, 44);
                            var url = URLHelper.formatUrl(API_URI.attachment) + '/' + id + '.jpg';
                            jQuery.fancybox.open([{
                                href: url,
                                title: id