将ace代码编辑器导入Webpack,ES6,TypeScript项目

阿德里安·莫伊萨(Adrian Moisa)

我正在尝试构建一个将托管ace编辑器的Web组件。问题是我找不到有关如何导入模块和设置类型的足够信息。使用简单的<script>标签和全局变量,下面的代码运行良好

到目前为止,这就是我所拥有的:

npm install ace-code-editor --save
npm install @types/ace --save-dev

代码编辑器

// Error: [ts] File '.../node_modules/@types/ace/index.d.ts' is not a module.
import * as ace from 'ace';

export class CodeEditorCmp extends HTMLElement {

    // DOM
    private editor: AceAjax;  // How do I import the type. What type to use?

    constructor() {
        super();
    }

    connectedCallback() {
        this.initCodeEditor();
    }

    initCodeEditor(){

        this.editor = ace.edit("editor-vsc");

        // How do I import the editor themes?
        this.editor.setTheme("ace/theme/xcode"); 

        // How do I import the editor modes?
        var JavaScriptMode = ace.require("ace/mode/html").Mode; 

        this.editor.session.setMode(new JavaScriptMode());
        this.editor.getSession().setTabSize(4);
        this.editor.getSession().setUseSoftTabs(true);
        this.editor.getSession().setUseWrapMode(true);
        this.editor.setAutoScrollEditorIntoView(true);

        // Update document
        this.editor.getSession().on('change', this.onEditorChange);
    }

    onEditorChange(){
    }

}

require('./code-editor.cmp.scss');
window.customElements.define('editor-vsc', CodeEditorCmp);
乔恩·布莱克

对于那些不想使用brace模块的人,我看到了我的问题是我导入了错误版本的ace。安装后,请确保从导入src-noconflictnoconflict版本使用ace.require,它看起来比使用require的其他迭代好得多。

我建议您执行以下操作:

npm install ace-builds --save
npm install @types/ace --save-dev

然后在您的文件中导入如下所示的noconflict:

import * as acemodule from 'ace-builds/src-noconflict/ace';

这将导致ace定义一个变量然后,您将能够正常引用ace的方法和属性,例如ace.edit()

您可以从git页面中获得有关ace的不同版本的更多信息

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章