How to use the codemirror.fromTextArea function in codemirror

async mounted() {
		this._options = Object.assign(defaultOptions, this.options);

		if (this._options.mode === 'css') {
			await import(/* webpackChunkName: "codemirror" */ 'codemirror/mode/css/css.js' as any);
		} else if (this._options.mode === 'gfm') {
			await import(/* webpackChunkName: "codemirror" */ 'codemirror/mode/gfm/gfm.js' as any);
		}

		// Codemirror doesn't work in SSR, so bootstrap it in mounted().
		const CodeMirror = require('codemirror');
		this.editor = CodeMirror.fromTextArea(this.$el, this._options);
		this.editor.setValue(this.value || '');

		this.editor.on('change', cm => {
			this.$emit('changed', cm.getValue());
			this.$emit('input', cm.getValue());
		});

		this.bootstrapped = true;
	}

componentDidMount () {
    // console.log(this.cnt_node, this.cnt_node.value);
    this.codemirror = CodeMirror.fromTextArea(this.cnt_node, {
      lineNumbers: true,
      readOnly: true,
      mode: 'hosts'
    })

    this.codemirror.setSize('100%', '100%')

    this.codemirror.on('change', (a) => {
      let v = a.getDoc().getValue()
      this.setValue(v)
    })

    this.codemirror.on('gutterClick', (cm, n) => {
      if (this.props.readonly === true) return

      let info = cm.lineInfo(n)

renderCodeMirror() {
    // 生成codemirror实例
    this.editor = CodeMirror.fromTextArea(this.textarea, this.props.options);
    // 获取CodeMirror用于获取其中的一些常量
    this.codemirror = CodeMirror;
    // 事件处理映射
    const eventDict = this.getEventHandleFromProps();

    Object.keys(eventDict).forEach((event) => {
      this.editor.on(eventDict[event], this.props[event]);
    });

    const { value, width, height } = this.props;
    // 初始化值
    this.editor.setValue(value || '');

    if (width || height) {
      // 设置尺寸
      this.editor.setSize(width, height);

_initViews: function () {
    var options = _.defaults(_.extend({}, this.model.toJSON()), this.options);

    var isReadOnly = options.readonly;
    var hasLineNumbers = options.lineNumbers;

    var extraKeys = {
      'Ctrl-S': this.triggerApplyEvent.bind(this),
      'Cmd-S': this.triggerApplyEvent.bind(this),
      'Ctrl-Space': this._completeIfAfterCtrlSpace.bind(this)
    };

    this.editor = CodeMirror.fromTextArea(this.$('.js-editor').get(0), {
      lineNumbers: hasLineNumbers,
      theme: 'material',
      mode: this._mode,
      scrollbarStyle: 'simple',
      lineWrapping: true,
      readOnly: isReadOnly,
      extraKeys: extraKeys,
      placeholder: this._placeholder
    });
    this.editor.on('change', _.debounce(this._onCodeMirrorChange.bind(this), 150), this);

    if (!_.isEmpty(this._addons)) {
      _.each(this._addons, function (addon) {
        var Class = ADDONS[addon];
        var addonView = new Class({
          editor: this.editor

mode: 'javascript',
    matchBrackets: true,
    tabSize: 2,
    autofocus: (window === window.top),
    extraKeys: {
      'Ctrl-S': __saveAsGist,
      'Cmd-S': __saveAsGist
    },
    gutters: ['error'],
    keyMap: 'tabSpace',
    smartIndent: true
  });

  __editor.on('change', __runCodes);

  var __result = CodeMirror.fromTextArea(__results, {
    mode: 'javascript',
    tabSize: 2,
    readOnly: true
  });

  __editor.setOption('theme', 'mistakes');
  __result.setOption('theme', 'mistakes');

  __s.gist = __gist;
  __s.content = __content;
  __s.clientId = __setClientId;
  __s.authCode = __setAuthCode;

  __confirmToken();

  return __s;

if (uploaderDiv) {
		let uploader = new qq.FineUploader({
			//debug: true,
			element: uploaderDiv,
			request: {
				endpoint: 'pictures?do=uploadReciever'
			},
			retry: {enableAuto: true},
			chunking: {enabled: true},
			resume: {enabled: true}
		});
	}

	let editorDiv = document.getElementById("editor");
	if (editorDiv) {
		let editor = CodeMirror.fromTextArea(editorDiv, {
			lineWrapping: true,
			mode: "text/html"
		});

		$('input[name=pic]').click(function (e) {
			e.preventDefault();
			editor.replaceSelection('[* ' + $(this).data('source') + ' 200x? <]');
			editor.focus();
		});

		if (!editor.getValue() && window.localStorage) {
			var loc = location.pathname + location.search;
			if (localStorage.getItem('content:' + loc) != undefined) {
				editor.setValue(localStorage.getItem('content:' + loc));
			}
			$('[name="title"]').val(localStorage.getItem('title:' + loc));

initialize() {
    this.editor = CodeMirror.fromTextArea(this.el, { mode: "django" }) as Editor;

    fetch("/wtm/variables/")
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        this.addPanel(data);
      });
  }

function getCodeMirror(textArea) {
  return CodeMirror.fromTextArea(textArea, {
    lineNumbers: false,
    theme: 'dracula',
    mode: 'graql',
    viewportMargin: Infinity,
    autofocus: true,
  });
}

function codeMirrorify({ textarea_element, autocomplete_keywords, submitFormCallback }) {
    CodeMirror.commands.autocomplete = autocomplete;

    return CodeMirror.fromTextArea(textarea_element, {
        extraKeys: { "Ctrl-Space": "autocomplete", "Ctrl-Enter": submitFormCallback },
        lineNumbers: false,
        lineWrapping: true,
        mode: "tql",
        readOnly: textarea_element.readOnly ? "nocursor" : false,
    });

    function autocomplete(editor) {
        editor.showHint({
            words: autocomplete_keywords,
            hint: getHint,
        });
    }
}

selectAll("textarea.editor-readonly").forEach(el => {
    CodeMirror.fromTextArea(el as HTMLTextAreaElement, {
      mode: "beancount",
      readOnly: true,
    });
  });
}