如何将 JSON 与 react-ace 一起使用？

Posted 2023-03-14

【中文标题】如何将 JSON 与 react-ace 一起使用？

【英文标题】：How to use JSON with react-ace?

【发布时间】：2021-04-13 09:38:21

【问题描述】：

我正在使用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？

【问题讨论】：

你有最小的可重现回购吗？

【参考方案1】：

尝试设置选项useWorker: false

      <AceEditor
        mode="json"
        theme="github"
        onChange=onChange
        name="UNIQUE_ID_OF_DIV"
        editorProps= $blockScrolling: true 
        setOptions=
          useWorker: false
        
      />

【讨论】：

这会关闭注释

【参考方案2】：

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

导入这个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);

【讨论】：

这两种方法都会给出：Uncaught DOMException: Failed to execute 'importScripts' on 'WorkerGlobalScope'

你能分享最小的可重现回购吗？所以我可以帮你看看（看起来像一个特定的案例，因为我这边一切正常）

我需要设置它！这是完整的回购：github.com/ajthinking/data-story/blob/master/src/resources/js/…

我不确定如何独立运行您的客户端。我试过yarn hot，但似乎没有任何效果