monacode

莫纳科德

摩纳哥编辑和漂亮的ES模块包装纸

探索导入摩纳哥编辑器（为代码提供动力）和更漂亮的模块的可行性；旨在使无需构建步骤的本地代码编辑体验带到Web应用程序中，将类似的代码编辑体验带入一行。

船舶具有通常在VS代码中发现的所有功能的船舶：诸如代码提示，类型推理，minimap，命令托盘，多核心选择，选择，查找和替换，代码折叠等的内容。

除了这些功能外，还集成了Prettier，以便击中⌘ + s将格式化代码。

⚡️在https://monacode.live上查看托管版本

用法

将模块作为NPM模块安装，并使用Bare Module Specifier导入它，或直接从UNPKG导入它：

 import monacode from 'https://unpkg.com/monacode/index.min.js' ; // 976Kb brotli

// Create a new editor and attach to the document body
const editor = monacode ( {
  container : document . body ,
  value : 'const add = (x, y) => x + y;' ,
} ) ;

// Listen for changes within the editor
editor . getModel ( ) . onDidChangeContent ( ( change ) => {
  const newValue = editor . getValue ( ) ;
  console . log ( newValue ) ;
} ) ;

也可以使用iFrame将编辑器嵌入您的应用程序中（请参阅演示）：

 < iframe
  src =" https://monacode.live?theme=vs-light&value=console.log('hey') "
> </ iframe >

将配置选项传递到IFRAME作为URL搜索参数中，确保URI正确编码值。但是请注意，目前不可能传递嵌套配置选项。

API

该模块导出一个默认函数，该函数接受配置对象作为参数。提供的配置将与默认配置合并，该配置本身是可用于配置Moanco编辑器的选项的子集。知道的一些有用的值包括：

• container ：DOM中存在的HTML元素（或使用React/preacct， ref ）
• value ：代表要在编辑器中渲染的初始代码的字符串
• language ：代表编辑器应尝试语法亮点的字符串，并提示
• fontSize ：一个数字，指示什么像素字体大小代码应在
• theme ：所需主题的字符串标识符或主题JSON文件的URL

调用默认导出返回基础摩纳哥编辑的实例。通过阅读API文档，以了解有关如何与编辑互动的更多信息。

发展

从该项目的根部运行以下命令使用servor来启动开发服务器，然后在适当的Local主机URL上打开您的编辑器和浏览器。

npm start

生产

从该项目的根部运行以下命令使用esbuild将源构建到一个index.min.js文件。当前，此过程将〜1秒左右，并导致重量为4.6MB的输出文件（使用Brotli降至小于1MB）。

npm run build

执照

根据MIT许可获得许可。