标签: react-codemirror

我正在尝试使用反应包装器 lib https://www.npmjs.com/package/react-codemirror2通过代码镜像浏览器编辑器实现 css 的自动建议

我试过 editor.execCommand('autocomplete');onchange 事件，但它使浏览器崩溃

我的尝试

import ReactDOM from "react-dom";
import React from "react";
import {UnControlled as CodeMirror} from 'react-codemirror2';

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/addon/hint/show-hint.css';

require('codemirror/mode/css/css');
require('codemirror/addon/hint/css-hint');
require('codemirror/addon/hint/show-hint');
require('codemirror/addon/edit/closebrackets');
require('codemirror/addon/lint/lint');
require('codemirror/addon/display/autorefresh');


const App = () => {

    const handleChange = (editor, data, value) => {

        console.log(editor, data, value);

        /* Crash the browser */
        // editor.execCommand('autocomplete');
    }
    return(
        <div>
            <CodeMirror
                value='body{ background: red }'
                options={{
                    mode: 'css',
                    theme: 'material',
                    lineWrapping: true,
                    smartIndent: true,
                    lineNumbers: true, …

使用 react-codemirror2 和 react-jsonschema-form 启动了一个非常相似的新项目https://mozilla-services.github.io/react-jsonschema-form/

但是，当我的 codemirror 编辑器呈现 JSON 时，我将所有节目加载到一行中。我已经浏览了https://mozilla-services.github.io/react-jsonschema-form/的源代码，但找不到与我所拥有的不同的任何内容。

我的源代码：

    import React, { useEffect, useState } from "react";
import { UnControlled as CodeMirror } from "react-codemirror2";

import "codemirror/lib/codemirror.css";
import "codemirror/theme/material.css";
import "codemirror/mode/javascript/javascript.js";

// components

const CodeEditorContainer = ({ code, onChange }) => {
  const [codeEditorState, setCodeEditorState] = useState();

  useEffect(() => {
    setCodeEditorState(code);
  }, [code]);

  const cmOptions = {
    theme: "default",
    height: "auto",
    viewportMargin: Infinity,
    mode: {
      name: "javascript",
      json: true,
      statementIndent: 2
    },
    lineNumbers: true,
    lineWrapping: …

我正在使用react-codemirror节点模块,如下所示:

<CodeMirror 
  className={className} 
  value={this.state.code} 
  onBeforeChange={this.onBeforeChange} 
  onChange={this.onChange} 
  options={options}
/>

该change事件工作正常,但我似乎不能与挂钩beforeChange事件.谁知道我做错了什么？

我在课堂上声明了处理程序如下:

onBeforeChange(change) {
  console.log('calling beforeChange');
}

onChange(newCode) {
  this.setState({
    code: newCode
  });
}

如何将自定义组件的输出保存回 React Admin 模型？

我有一个带有一个自定义组件的表单，该组件是 CodeMirror 字段。对其他所有内容的更改均正确保存。但是我的 CodeMirror 字段虽然可以作为编辑器正常工作并按我想要的方式配置，但不会保存更改。

我是 React-Admin 的新手，并且对 React 的经验有限，所以我想我错过了一些基本的东西。

const handleChange = (field) => (val, evt) => {
  // I reach here with `field` set to the instance of MyEditField, with `val`
  // set to the updated editor value, and `evt` the CodeMirror event

  // But now how do I update the underlying record?

  // The following will update the stored copy, but doesn't mark it as a change 
  // to be saved by the …