Import Javascript scripts into Angular

Question

I'm trying to use the TinyMCE-Elfinder integrator (https://github.com/nao-pon/tinymceElfinder) in my Angular project, where I already have my TinyMCE capsule component working.

The problem is that, in order to get the integrator working, I need to import some JS scripts. I have tried defining them in the same html file as my TinyMCE editor, like this:

<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>

And then, as can be seen in the code, defined a file_picker_callback and an image_upload_handler for the editor.

After this, I declared the object used to pass the file_picker_callback and image_upload_handler (mceElf) to my TS file, following the library instructions. Said code looks like this:

...

declare const tinymceElfinder : any;

...

@Component({

})
export class RichEditorComponent {

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

    ...

}

However, when I try to run my app, I get the following error:

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

My guess is that Angular is ignoring the HTML imports. I'm fairly new to Angular so I really don't know how to deal with this properly. Does anybody have a solution?

Question seems already answered here: [How do I include a JavaScript script file in Angular and call a function from that script?](https://stackoverflow.com/questions/44817349/how-do-i-include-a-javascript-script-file-in-angular-and-call-a-function-from-th) — Manuel, Jun 11 '20 at 13:43
Not quite, because I need to import them from a URL and simply downloading those scripts doesn't seem to work for some reason — David Antelo, Jun 11 '20 at 13:44

abadou · Answer 1 · 2020-06-11T14:59:29.507

1

Angular does not accept JS scripts into html templates. Try moving all JS scripts to the index.html file in your angular project, at the end of the head tag

For more informations about how to include external JS to angular component, you can see this post : Angular 2: import external js file into component

edited Jun 11 '20 at 14:59

answered Jun 11 '20 at 14:06

abadou

41
6

I already have TinyMCE integrated, which I did following those instructions. What I'm trying to do now is to integrate ElFinder into TinyMCE – David Antelo Jun 11 '20 at 14:08
what is the name of your html file that include scripts ? (the first in the top) – abadou Jun 11 '20 at 14:26
rich-editor.component.html. The second one is rich-editor.component.ts. I use them as a capsule for the tinyMCE.editor – David Antelo Jun 11 '20 at 14:32
Here is that the error, I will edit my answer to resolve your problem :) – abadou Jun 11 '20 at 14:36
Alright, your solutions seems to "kinda" work. Now I don't get that error any longer, but now I get this: Unhandled Promise rejection: elfNode.elfinder is not a function ; Zone: ; Task: Promise.then ; Value: TypeError: "elfNode.elfinder is not a function". I've been googling this and apparently this happens when elfinder.min.js has not been loaded. However, I have imported it the same way as the other scripts, which is the way you provided here. I'm not very sure of why some scripts can be loaded but not others – David Antelo Jun 11 '20 at 16:27

Import Javascript scripts into Angular

1 Answers1