将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

有将TinyMCE集成到角度应用程序的正确方法：

https://www.tiny.cloud/docs/integrations/angular/

您必须在npm install中安装TinyMCE软件包，并且不需要手动添加脚本：

npm install --save @tinymce/tinymce-angular