Question

我正在Angular2 +应用程序中尝试使用WYSIWYG编辑器（TUI Editor）。他们没有提供Angular包装器，因此我决定创建自己的包装器（基于此wrapper）。

由于使用npm install出现了一些问题，我将其脚本文件（https://cdnjs.cloudflare.com/ajax/libs/tui-editor/1.4.0/tui-editor-Editor-full.js）保存在一个文件夹中。

我已经创建了一个服务来创建编辑器的实例，并且运行良好：

import {ElementRef, Injectable} from '@angular/core';
import Editor from '../js/tui-editor-Editor-full';

@Injectable({
  providedIn: 'root'
})
export class TuiService {

  editor: any;

  createEditor(options: object, element: ElementRef): any {
    if (options) {
      this.editor = new TuiEditor(Object.assign({
          el: element.nativeElement
        },
        options));
    }
    return this.editor;
  }
  ...
}

现在我不想添加其扩展名之一（表一：https://github.com/nhn/tui.editor/blob/master/docs/using-extensions.md），但是我遇到了一些问题。

当我以与添加编辑器脚本文件相同的方式添加扩展脚本时

import '../js/tui-editor-extTable';

在构建我的应用程序时出现这些错误

WARNING in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-editor' in 'C:\workspace\src\js'

WARNING in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-editor/dist/tui-editor-Viewer' in 'C:\workspace\src\js'

ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'jquery' in 'C:\workspace\src\js'
ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'to-mark' in 'C:\workspace\src\js'
ERROR in ./src/js/tui-editor-extTable.js
Module not found: Error: Can't resolve 'tui-code-snippet' in 'C:\workspace\src\js'
i ｢wdm｣: Failed to compile.

如果您查看 tui-editor-Editor-full.js ，则此文件已包含所有这些依赖项。为什么 tui-editor-extTable.js 脚本看不到它们？

如何使用此扩展程序？

我安装了jquery作为我项目的依赖项，但 tui-editor-extTable.js 脚本仍然无法识别它。

我试图在stackblitz上重现我的工作区

感谢您的帮助

Answer 1

我们过去在我们的应用程序中对js库存在相同的问题。我们解决了此问题，将js库添加到“ assets”文件夹中，如下所示：

然后，我们像这样实例化它：

    import 'assets/js/leaflet-tilelayer-wmts-src';
    import 'assets/js/NonTiledLayer.WMS';
    import { environment } from 'environments/environment';
    import * as E from 'esri-leaflet';
    import * as L from 'leaflet';

    export const baseMaps_dev = {
        OSM: L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: false,
            detectRetina: true,
            maxNativeZoom: 19,
            maxZoom: 20,
            name: 'OSM',
        }),
        IGN: L.tileLayer.wms('https://www.ign.es/wms-inspire/ign-base?SERVICE=WMS&', {
            format: 'image/png',
            layers: 'IGNBaseTodo',
            maxZoom: 20,
            name: 'IGN',
        }),
        IGNWMTS: L.tileLayer.wmts('https://www.ign.es/wmts/ign-base?', {
            format: 'image/png',
            layer: 'IGNBaseTodo',
            tilematrixSet: 'EPSG:3857',
            maxZoom: 20,
            name: 'IGNWMTS',
        }),
...

希望这会有所帮助

Answer 2

我终于决定克隆tui-editor存储库，以使用自定义的webpack配置创建我自己的tui-Editor js文件。

它包括：

项目中使用的所有依赖项（jquery，highlightjs ...）
表格扩展名

所以我只需要在我的代码中导入该文件。

这不是最好的解决方案，它不能回答主要问题，但可以：/

找不到模块：错误：使用外部JS库时无法解析...

2 个答案: