11

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

Java 工作

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：无法在 'WorkerGlobalScope' 上执行 'importScripts'：脚本位于 '...../ worker-json.js' 加载失败。

如何使用 JSON？

4

2 回答 2

7

尝试设置选项useWorker: false

      <AceEditor
        mode="json"
        theme="github"
        onChange={onChange}
        name="UNIQUE_ID_OF_DIV"
        editorProps={{ $blockScrolling: true }}
        setOptions={{
          useWorker: false
        }}
      />
于 2021-01-16T19:08:45.580 回答
4

据我了解，您需要采取任何一种方式来解决工人问题。

  • 导入这个ace-builds/webpack-resolver：
import AceEditor from "react-ace";

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

import 'ace-builds/webpack-resolver';
  • 用于file-loader加载worker-json文件然后配置 ace worker：
import AceEditor from "react-ace";

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

import ace from "ace-builds";

// `webpack` would return the url for `worker-json.js`
// then we use it to configure `ace`
import jsonWorkerUrl from "file-loader!ace-builds/src-noconflict/worker-json";

ace.config.setModuleUrl("ace/mode/json_worker", jsonWorkerUrl);
于 2021-01-10T11:55:32.217 回答