标签: react-ace

我使用react-ace并尝试使用 java 语法的 readme 示例。效果很好。但我似乎无法将其设置为 JSON。

爪哇作品

import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";

<AceEditor
    mode="java"
    theme="github"
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
/>  

JSON 不起作用？

import AceEditor from "react-ace";
import "ace-builds/src-noconflict/mode-json";
import "ace-builds/src-noconflict/theme-github";

<AceEditor
    mode="json"
    theme="github"
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
/>  

错误

拒绝从 '...../worker-json.js' 执行脚本，因为它的 MIME 类型 ('text/html') 不可执行。（匿名）@ 2f896707-86be-497a-93b2-e1711942d7c7:1 2f896707-86be-497a-93b2-e1711942d7c7:1 未捕获的 DOMException: 无法在 '.Worker/GlobalScript' 上执行脚本。 worker-json.js' 加载失败。

如何使用 JSON？

在我的代码中，我有使用 react-ace 的组件。在我的渲染函数中，我有这一行：

<CodeEditor onChange={onCodeChanged} value={code} />

回调函数：

const onCodeBodyChanged = (newCode) => {
      // some code ...
      dispatch(setResource({ newCode }));
}

我想onCodeChanged通过 RTL进行测试，所以我试图找到更改值的文本区域，但没有任何成功

（不工作）测试的例子：

      const { container } = render(<ResourceEditorPanel />, createMockStore());
      const ace = container.querySelectorAll('.ace_text-input');
      fireEvent.change(ace, { target: { value: 'someText' } });
      await waitFor(() => {
        expect(dispatch).toHaveBeenCalled();
      });

问题是fireEvent.change(ace, { target: { value: 'someText' } });不会触发我的功能 - onCodeChanged。

你知道我该如何测试吗？

我正在使用 ace 编辑器，并通过定义以下代码来突出显示行：

var Range = ace.require('ace/range').Range;
editor.session.addMarker(new Range(item - 1, 0, item - 1, 1), "warning-marker", "fullLine");

现在，考虑到我没有任何标记 ID，我想删除在编辑器中使用的所有标记。

如何使用 addCompleter 或 setCompleter 等函数从 index.js 在基于 React 的 ace 编辑器中添加自定义完成器

import { render } from "react-dom";
import AceEditor from "../src/ace";
import "brace/mode/jsx";
import 'brace/mode/HCPCustomCalcs'
import 'brace/theme/monokai'
import "brace/snippets/HCPCustomCalcs";
import "brace/ext/language_tools";
const defaultValue = `function onLoad(editor) {
  console.log("i've loaded");
}`;
class App extends Component {

  constructor(props, context) {
    super(props, context);
    this.onChange = this.onChange.bind(this);
}
onChange(newValue) {
    console.log('changes:', newValue);
}
  render() {

      return (
          <div>
              <AceEditor
                  mode="HCPCustomCalcs"
                  theme="monokai"
                  width={ '100%' }
                  height={ '100vh' }
                  onChange={this.onChange}
                  name="UNIQUE_ID_OF_DIV"
                  editorProps={{
                      $blockScrolling: true
                  }}
                  enableBasicAutocompletion={true} …

我试图使用 ReactQuill 只是为了显示我拥有的一些富文本，因此我不希望它可以接收用户的任何输入或键入。原因，我有另一个库（ReactAce），ReactQuill 导致了一个错误，当我键入“删除”键时，它使 ReactAce 停止工作......

您可以在下面看到我正在尝试禁用 Quill 实例的示例。

quillRef = React.createRef();    

componentDidMount = () => {
  console.log(this.quillRef.current.editor);

  this.quillRef.current.editor.enable(false);   // undefined
};

render () { 
    <ReactQuill
      readOnly
      value={info}
      ref={this.quillRef}
      modules={quillConfig}
    >
}

如果您知道某种方法可以阻止 ReactQuill 接收来自键盘的任何输入，我会很高兴，因为我认为这是导致该错误的原因。

谢谢你！

我研究了代码美化器，如 google-code-prettify、beautify 等。不幸的是，我无法让这些在我的 React 应用程序中工作。我目前正在使用react-ace来显示动态填充的代码片段，但它们只是颜色突出显示，而不是格式化。

有没有一些简单的例子可以让我在 React 应用程序中使用它？它不必使用 Ace 编辑器 - 这是我的一种技巧，可以让代码显示得更好。

我是 ace 的新手，正在尝试使用react-ace 构建一个编辑器。

这是我所做的：

1. npm install react-ace ace-builds
2. 我将以下代码添加到我的 App.js 中

import React from "react";
import { render } from "react-dom";
import AceEditor from "react-ace";

import "ace-builds/src-noconflict/mode-java";
import "ace-builds/src-noconflict/theme-github";

function onChange(newValue) {
  console.log("change", newValue);
}

// Render editor
render(
  <AceEditor
    mode="java"
    theme="github"
    onChange={onChange}
    name="UNIQUE_ID_OF_DIV"
    editorProps={{ $blockScrolling: true }}
  />,
  document.getElementById("example")
);

但是我的浏览器显示此错误：ReferenceError：ace未定义

这是我的 package.json：

你能帮我吗。谢谢你！