首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何在IStandaloneCodeEditor中正确导入摩纳哥Vue3接口(复合API)

如何在IStandaloneCodeEditor中正确导入摩纳哥Vue3接口(复合API)
EN

Stack Overflow用户
提问于 2021-07-15 07:20:22
回答 1查看 505关注 0票数 0

我用摩纳哥封装了一个组件包,在定义实例类型时遇到了一个问题。我不知道如何导入接口IStandaloneCodeEditor \ IStandaloneDiffEditor,或者根本不需要导入它。

代码语言:javascript
运行
复制
<script lang="ts">
import * as monaco from "monaco-editor";
props: {
  diffEditor: {
      type: Boolean,
      default: false,
  },
  codes: {
    type: String,
    default: () => {
      return "";
    },
  },
  oldCodes: {
    type: String,
    default: () => {
      return "";
    },
  },
  language: {
    type: String,
    default: () => {
      return "json";
    },
  },
  readOnly: {
    type: Boolean,
    default: () => {
      return false;
    },
  },
  theme: {
    type: String,
    default: () => {
      return "vs";
    },
  },
}
setup(props: any) {
  const state = reactive({
    editorInstance: {}   // **How should I define the editorInstance type? IStandaloneCodeEditor or IStandaloneDiffEditor seems correct but I don't know how to import correctly**
  });

  onMounted(() => {
    if (props.diffEditor) {
      state.editorInstance = monaco.editor.createDiffEditor(props.containerRef, {
        value: props.codes,
        readOnly: props.readOnly,
        theme: props.theme, 
        ...props.editorOptions,
      });
      
      // **I'm trying to assign type any to state.editorInstance but it doesn't work** 
      (<any>state.editorInstance)!.setModel({
        original: monaco.editor.createModel(props.oldCodes, props.language),
        modified: monaco.editor.createModel(props.codes, props.language),
      });
    } else {
      state.editorInstance = monaco.editor.create(props.containerRef, {
        value: props.codes,
        language: props.language,
        readOnly: props.readOnly,
        theme: props.theme, 
        ...props.editorOptions,
      });
    }
  })

  const getModifiedEditor = () => {
    // I'm trying to assign type any to state.editorInstance but it doesn't work 
    return props.diffEditor ? (<any>state.editorInstance)!.getModifiedEditor() : state.editorInstance;  
    };

  const getOriginalEditor = () => {
    return props.diffEditor ? (<any>state.editorInstance)!.getOriginalEditor() : state.editorInstance;
  };
}

我倾向于介绍界面是正确的。

我在“摩纳哥-编辑/esm/vs/编者/编辑.api.d.ts”中找到了这个

代码语言:javascript
运行
复制
export interface IStandaloneCodeEditor extends ICodeEditor {
    updateOptions(newOptions: IEditorOptions & IGlobalEditorOptions): void;
    addCommand(keybinding: number, handler: ICommandHandler, context?: string): string | null;
    createContextKey<T>(key: string, defaultValue: T): IContextKey<T>;
    addAction(descriptor: IActionDescriptor): IDisposable;
}

export interface IStandaloneDiffEditor extends IDiffEditor {
    addCommand(keybinding: number, handler: ICommandHandler, context?: string): string | null;
    createContextKey<T>(key: string, defaultValue: T): IContextKey<T>;
    addAction(descriptor: IActionDescriptor): IDisposable;
    getOriginalEditor(): IStandaloneCodeEditor;
    getModifiedEditor(): IStandaloneCodeEditor;
}

我就是这样进口的

代码语言:javascript
运行
复制
import {IStandaloneDiffEditor,IStandaloneCodeEditor} from "monaco-editor/esm/vs/editor/editor.api";

错误:

模块'"../../node_modules/monaco-editor/esm/vs/editor/editor.api"‘没有导出成员'IStandaloneDiffEditor'.

EN

回答 1

Stack Overflow用户

发布于 2021-07-21 09:27:18

代码语言:javascript
运行
复制
import type monaco from 'monaco-editor';

let monacoEditorInstance: monaco.editor.IStandaloneCodeEditor;
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/68389510

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档