将 Javascript 脚本导入 Angular

Question

我正在尝试在我的 Angular 项目中使用 TinyMCE-Elfinder 集成器 (https://github.com/nao-pon/tinymceElfinder)，我的 TinyMCE 胶囊组件已经在其中工作。

问题是，为了让集成器工作，我需要导入一些 JS 脚本。我尝试在与我的 TinyMCE 编辑器相同的 html 文件中定义它们，如下所示：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.min.css"/>
<!-- elFinder (load latest nightly) -->
<script type="text/javascript" src="https://studio-42.github.io/elFinder/demo/js/elfinder.min.js"></script>
<!-- tinyMCE -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.2.0/tinymce.min.js"></script>
<!-- tinymceElfinder -->
<script type="text/javascript" src="https://nao-pon.github.io/tinymceElfinder/tinymceElfinder.js"></script>

<editor
[(ngModel)]="content"
[init]="{
    base_url: '/tinymce',
    suffix: '.min',
    height: 500,
    menubar: false,
    plugins: [
        'advlist autolink lists link image charmap print preview anchor',
        'searchreplace visualblocks code fullscreen',
        'insertdatetime media table paste code help wordcount'
    ],
    toolbar:
        'undo redo | formatselect | bold italic backcolor link image media | \
        alignleft aligncenter alignright alignjustify | \
        bullist numlist outdent indent | removeformat | help | mkdir',

        file_picker_callback : mceElf.browser,
        images_upload_handler: mceElf.uploadHandler

    }"
(onKeyUp)="onKeyUp($event)"
></editor>

然后，从代码中可以看出，为编辑器定义了一个 file_picker_callback 和一个 image_upload_handler。

在此之后，我按照库说明声明了用于将 file_picker_callback 和 image_upload_handler (mceElf) 传递给我的 TS 文件的对象。所述代码如下所示：

...

declare const tinymceElfinder : any;

...

@Component({

})
export class RichEditorComponent {

    mceElf = new tinymceElfinder({
        url: 'php/connector.minimal.php',
        uploadTargetHash: 'l1_lw',
        nodeId: 'elfinder'
    });

    ...

}

但是，当我尝试运行我的应用时，我收到以下错误：

ERROR Error: "Uncaught (in promise): ReferenceError: tinymceElfinder is not defined

我的猜测是 Angular 忽略了 HTML 导入。我对 Angular 还很陌生，所以我真的不知道如何正确处理这个问题。有人有解决办法吗？

Answer 1

Angular 不接受将 JS 脚本写入 html 模板。尝试将所有 JS 脚本移动到 Angular 项目中的 index.html 文件中， 在head标签的末尾

关于如何将外部 JS 包含到 Angular 组件中的更多信息，你可以看到这篇文章：Angular 2: import external js file into component