@fieldia/monaco (英语)
外地 文本, VS 代码中的一行和 JSON 字段 编辑, 摩纳哥: 发现和 替换、折叠、多个光标、移动行、 VS 代码的密钥——用 语言为页名,并带有表格的主题.
npm install @fieldia/monaco
import { mountViewer } from '@fieldia/viewer';
import { monacoWidgets } from '@fieldia/monaco';
mountViewer(host, { page, dataSource, widgets: monacoWidgets });
节点选择使用 "widget": "monaco"数字 :
{ "type": "field", "field": "script", "widget": "monaco", "options": { "language": "python" } }
text.monaco(单位:千美元)text字段,语言options.language名称 - 每个名字@fieldia/code取( 取)python, (中文(简体) ),sql, (中文(简体) ),typescript, (中文(简体) ),bash. ) (中文(简体) ) 以及摩纳哥的其他语法(GraphQL、SCSS、Elixir、F#、HCL......):MONACO_LANGUAGES列出他们。 一个摩纳哥没有纯文本的语法.char.monaco(单位:千美元)char字段,语言中的一行代码options.language名称,例如条件:order.total > 100 && !order.paid。见 单行。 。 。 .json.monaco(单位:千美元)json字段,编辑为JSON。 有效 JSON 达到形式 它被输入; 无效的文本是这样说的, 最后的好值 留下来.
摩纳哥很大(约3 MB,800 KB gzipped, 及其编辑功能),所以 它只在页面有这样的字段时才加载,而每种语言的语法只加载 当一地用之. 在装入字段之前,它是一个纯文本框 一体行动——如果摩纳哥无法装上子弹,就不要动.
你的包头
部件导入 monaco-editor'ES模块,它导入了自己的CSS.
Vite 照原样使用;网络包装需要 style-loader 财务报告和审定财务报表 css-loader
页:1 .css (和 asset/resource 页:1 .ttf); 建设在旁边写 CSS
您的捆绑, 您的页面链接, 和需要 loader: { '.ttf': 'file' }。 。 。 .
用代码分拆(ES模块)来构建,所以摩纳哥是自己的文件.
语言服务(工人)
没有别的了,代码是彩色的,没有工人。 为了JSON 选中其输入时, 以及对 TypeScript 的建议和检查, JavaScript,CSS和HTML,按照摩纳哥的要求给部件工人:
import { createMonacoWidgets } from '@fieldia/monaco';
// Vite: each worker is a module of monaco-editor's own.
import EditorWorker from 'monaco-editor/editor/editor.worker?worker';
import JsonWorker from 'monaco-editor/languages/features/json/json.worker?worker';
import TsWorker from 'monaco-editor/languages/features/typescript/ts.worker?worker';
const widgets = createMonacoWidgets({
getWorker: (_id, label) => {
if (label === 'json') return new JsonWorker();
if (label === 'typescript' || label === 'javascript') return new TsWorker();
return new EditorWorker();
},
// The services these workers are for; CSS's and HTML's fields ask for none.
services: ['json', 'typescript'],
});
(单位:千美元)css.worker 财务报告和审定财务报表 html.worker 坐在旁边 json.worker下页
languages/features/css 财务报告和审定财务报表 languages/features/html. ) (中文(简体) ). 函数变为
MonacoEnvironment.getWorker除非您的应用程序设置了 MonacoEnvironment
它自己保存着.
摩纳哥的每个领域都开始使用自己的语言服务
已经。 当你只为一部分人而派遣工人们的时候,你应当说出一部分人的名字
字段请求无: createMonacoWidgets({ getWorker, services: ['json'] })
(单位:千美元)json, (中文(简体) ), typescript ——JavaScript也一样——, css - SCSS和Less's也一样..
财务报告和审定财务报表 html) (中文(简体) ).
单行
A 类 char 字段编辑器为一行, 如 @fieldia/code'其为:
- 与文本框一样高,在画出窗体文本框的框中 或皮肤和黑暗中:没有行号,没有迷你地图,没有折叠. A 类 长行与护身符相向滚动.
- 输入时不添加行, 也可以添加 Shift、 Alt 或 Ctrl 。 Ctrl+ Enter (Cmd+ Enter) (中文(简体) )
和任何田野一样
keys: { enterMovesToNext: true },输入移动到下一个字段,作为 从文本框中。 否则 Enter 什么都不做. - 粘贴行变为一行, 因为文本框会加入它们; 粘贴行 单独休息什么也不会增加。 换行——一条线 复制到下, 数行的建议 —— 立即加入, Undo 把它带回去 从其它地方设定的值会全部显示 .
- Ctrl+F 打开浏览器的查找, 如文本框: VS 代码的查找没有 房间在一行.
- 节点的
placeholder显示时为空。 它的输入说它是一个 线条(aria-multiline="false") (中文(简体) ).
每个编辑
- Tab 移动到下一个字段, 如每个字段; Ctrl+] 和 Ctrl+ [缩进] .
- 仅在字段需要时读取; 需要, 无效, 且其信件在 编辑器的输入,字段的标签名称和指向.
- 文本和JSON随其文本而增长,从几行到屏幕 页面滚动在鼠标轮下.
- 其主题取自Fieldia的道具,因为网页上有这些道具(主题:,
计划,口音, 当它们改变。 代码为
@fieldia/code, 淡出或暗出页面, 可在每个主题上读取 表面; 将自己设置为--fd-code-*标志 摩纳哥有一个主题 每页 : 不同外观中的两种表单共享所绘制的上一种. - 代码是左到右, 在阿拉伯页上.
麻省理工学院. 摩纳哥也是麻省理工学院的.