@ts-live/ts-editor
v0.0.8
Published
基于 monaco-editor 的 typescript 编辑器
Downloads
3
Readme
ts-editor
基于 monaco-editor 的 typesc 编辑器,支持实时编译、预览。
Usage
安装:
npm i @ts-live/ts-editor
使用
import {
Editor,
monaco
} from '@ts-live/ts-editor';
const editor = new Editor(domElement, options);
- domElement 指
monaco-editor
编辑器要挂载的 dom 元素 - options 实例化
Editor
的选项,支持的完整选项如下:
interface IEditorOptions = {
code?: string; // 初始化代码
compiledCode?: string; // 初始化运行的代码
delayInit?: boolean; // 是否延迟初始化
delay?: number; // editor 内容改动后会触发 onCodeChange,该选项用来设置触发延迟的间隔时间
runable?: boolean; // 是否可运行 code
compilable?: boolean; // 是否可编译 code
types?: ITypes; // module 的类型定义,用来类型提示,格式为 {[moduleName: string]: types string},可以使用提供的工具包 dts-bundle 来生成。
scope?: Scope; // 用来像 editor 注入代码依赖的的 module,以使代码可正常执行
language?: IEditorLanguage;
// monaco-editor 的编译选项
compilerOptions?: monaco.languages.typescript.CompilerOptions;
// monaco-editor 实例编辑器时的选项
editorOptions?: monaco.editor.IStandaloneEditorConstructionOptions;
// monaco-editor 创建之前触发
editorWillCreate?: EditorWillCreateCallback;
// monaco-editor 创建完成后触发
editorDidCreate?: EditorDidCreateCallback;
// editor 内容有改动时触发
onCodeChange?: OnCodeChangeCallback;
// code 编译之前触发,如果回调返回 false 会阻止编译
codeWillCompile?: CodeWillCompileCallback;
// code 编译成功后触发
codeDidCompile?: CodeDidCompileCallback;
// code 运行之前触发,如果回调返回 false 会阻止运行
codeWillRun?: CodeWillRunCallback;
// code 运行成功后触发
codeDidRun?: CodeDidRunCallback;
// 编译或运行过程中有遇到错误时触发
onError?: OnErrorCallback;
};
type EditorWillCreateCallback = (compilerOptions: monaco.languages.typescript.CompilerOptions) => void;
type EditorDidCreateCallback = (editor: Editor) => void;
type OnCodeChangeCallback = (e: monaco.editor.IModelContentChangedEvent, lastCode: string, latestCode: string) => void;
type CodeWillCompileCallback = (code: string) => Promise<boolean | void> | boolean | void;
type CodeDidCompileCallback = (code: string, compiledCode: string) => void;
type CodeWillRunCallback = (compiledCode: string) => Promise<boolean | void> | boolean | void;
type CodeDidRunCallback = (ret: any, compiledCode: string) => void;
type OnErrorCallback = (err: Error) => void;