在文档库网站MDX中嵌入自定义摩纳哥编辑器
在文档库网站MDX中嵌入自定义摩纳哥编辑器
提问于 2020-05-06 08:43:15
我有一个使用文档词库2建立的网站。
现在，我想嵌入一个摩纳哥编辑到一个页面，我将注册一种语言的摩纳哥编辑器。我可以在一个新的React网站上使用react-monaco-editor、monaco-languageclient和vscode-languageserver来实现这一点，但我不知道如何将其添加到文档库中。
首先，我将这些包添加到我的文档库网站的package.json中，然后尝试制作一个组件App，这样我就可以将<App />添加到文档库页面中。
在组件的一个文件中，我有：
import MonacoEditor from 'react-monaco-editor';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';在组件的另一个文件中，我有：
import { MonacoToProtocolConverter, ProtocolToMonacoConverter } from 'monaco-languageclient/lib/monaco-converter';
import * as monaco from 'monaco-editor';
import { TextDocument } from "vscode-languageserver";然后我得到了
./node_modules/monaco-editor/esm/vs/base/browser/ui/codiconLabel/codicon/codicon.css
ModuleParseError: Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)和
./node_modules/vscode-languageserver/lib/files.js
Module not found: Can't resolve 'child_process' in '/Users/chengtie/Startup/PRODSERVER/10StudioWebsite/newWebsite/node_modules/vscode-languageserver/lib'
有人知道该怎么做吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-06 10:00:20
这里的问题似乎是关于CSS无法被webpack加载。你将需要通过插件为webpack添加CSS加载程序。
您可以尝试引用Hermes网站上的这个Hermes网站，它将摩纳哥编辑器添加到网站，您也可以通过点击“游乐场”来尝试编辑器。
在这里使用monaco-editor-webpack-plugin可能会更好，因为它可以帮助您添加必要的加载程序，例如当前设置中缺少的CSS加载程序。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61630937
复制相关文章
相似问题
腾讯云开发者
