How to prevent TinyMCE remove href attribute from "a" tags if contains JavaScript code?

Question

In my Angular project I use TinyMCE 5.5.1 as rich text editor with this code:

import { Component, ComponentFactoryResolver, Input, OnInit, ViewContainerRef } from '@angular/core';
import { SettingService } from 'src/app/services/setting-service.service';
import { environment } from 'src/environments/environment';

declare let tinymce: any;

@Component({
  selector: 'app-tinymce-editor',
  templateUrl: './tinymce-editor.component.html',
  styleUrls: ['./tinymce-editor.component.css']
})
export class TinymceEditorComponent implements OnInit {
  @Input() model: any;
  @Input() field: string;

  env = environment;
  apiKey = '';
  editor: any;
  options = {};
  plugins = ['link'];
  toolbar = [ ];
  styles = [ ];
  content_css = [ ];

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private viewContainerRef: ViewContainerRef,
  ) {
    this.apiKey = SettingService.getApiKeyByCode('tiny_mce_api_key');
  }

  ngOnInit(): void {
    this.options = {
      extended_valid_elements: 'span[*],img[class,*],div[*],a[*]',
      verify_html: false,
      paste_auto_cleanup_on_paste: true,
      paste_convert_headers_to_strong: false,
      paste_strip_class_attributes: 'all',
      convert_urls: false,
      style_formats: this.styles,
      content_css: this.content_css,
    };
  }
}

And this is the HTML:

<editor
  apiKey="apiKey"
  [init]="options"
  [(ngModel)]="model[field]"
></editor>

When I edit source code in TinyMCE source code editor, then click save, then TinyMCE remove href attribute from a tag if it contains JavaScript code, like this:

<a href="javascript:doAnything();">....</a>

Is there any TinyMCE option to prevent this behavior? Or how can I solve this issue?

Answer 1

add allow_script_urls:true to your options.

ref: https://www.tiny.cloud/docs/tinymce/6/url-handling/#allow_script_urls