TinyMCE shows error in the editor

Question

I have used tinyMCE for my project. but now I am getting a below error

This domain is not registered with TinyMCE Cloud. Start a free trial to discover our premium cloud services and pro support

Can anyone know how to get rid of this error message? without using paid service from tinyMCE?

Slaughterhouse

Answer 1

Thank you @Ignacio Ara. A free API key is valid only for 30 days. I have used CSS property display none for the class .mce-notification.mce-in that resolved my problem.

Slaughterhouse

Could You Please Provide The CSS? – Titan

@Titan .tox-notification { display: none !important } – Whitmire

Answer 2

I solved my problem used this function.

_tinymce.init({
  selector: 'textarea',
  init_instance_callback : function(editor) {
    var freeTiny = document.querySelector('.tox .tox-notification--in');
   freeTiny.style.display = 'none';
  }
 });

Gar

As no other solution has helped me, this should be the accepted one. Thanks. – Campion

Answer 3

I have solved my problem with the use

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>

Bignonia

As my edit was rejected, for everyone that needs 5.0 use this: <script src="https://cdn.tiny.cloud/1/[API_KEY_HERE]/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> – Fluency

Answer 4

If you're using a JS framework like VueJS, you can use the tinymce-script-src attribute to use a non-cloud version of tinymce.min.js to avoid the error message but still have the framework functionality.

Example using a locally stored non-cloud file:

<editor tinymce-script-src="tinymce/tinymce.min.js" ... /> 

You can see why this works in the Vue implementation here: https://github.com/tinymce/tinymce-vue/blob/9ef5d30ff68c5428940ff4722bdb257e6079bc7e/src/main/ts/components/Editor.ts#L94

Engadine

I've downloaded script from download.tiny.cloud/tinymce/community/… and it works – Abercromby

@PawełMoskal, that's the "TinyMCE SDK" and the link you provided can be found on the cloud site: tiny.cloud/get-tiny – Engadine

This should be the accepted answer. I've added another answer to detail how to override this in an Angular project – Geehan

Answer 5

It seems that you're using TinyMCE getting the file from their domain (cloud.tinymce.com), you should get a free key and update the URL e.g.:

<script src="http://cloud.tinymce.com/stable/tinymce.min.js?apiKey=[YOUR_API_KEY]"></script>

Theodor

Answer 6

This will remove only the first "free trial" warning notification (and leave other notifications like deprecated plugins, errors, etc).

tinymce.init({
  selector: 'textarea',
  init_instance_callback : function(editor) {
      var freeTiny = document.querySelector('.mce-notification');
      freeTiny.style.display = 'none';
  }
});

Powered

Same thing, You can use .tox-notification { display: none !important }. Its saved me. – Celandine

Answer 7

The correct way of avoiding the warning is to host the library yourself, as pointed out in Nathan Goings' answer (which IMO should be the accepted one).

If you are integrating TinyMCE in an Angular project using the @tinymce/tinymce-angular package, you can override the library source path by defining a provider:

import { Component } from '@angular/core';
import { TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
import { RawEditorOptions } from 'tinymce';

@Component({
  selector: 'tiny-editor',
  template: '<editor [init]="editorOptions"></editor>',
  providers: [
    { provide: TINYMCE_SCRIPT_SRC, useValue: 'assets/tinymce.min.js' }
  ]
})
export class TinyEditorComponent   {

  editorOptions: RawEditorOptions = {
    base_url: '/assets',
    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'
    ].join(' '),
    toolbar:
      `undo redo | formatselect | bold italic backcolor |
      alignleft aligncenter alignright alignjustify |
      bullist numlist outdent indent | removeformat | help`
  }
}

Don't forget to update the architect build step in your angular.json file, to include the tinymce files into your public assets folder:

{
...
    "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "assets": [
              ...
              {
                "glob": "**/*",
                "input": "./node_modules/tinymce/",
                "output": "./assets/"
              }
              ...
           ]
        }
        ...
     }
     ...
}

For more information, check this guide on how to integrate a self-hosted TinyMCE instance in an Angular app.

Geehan

Answer 8

While CCS does the job in most cases, you may have to use !important. You could also try hiding it on DOMContentLoaded with vanilla javascript:

<style>
/* one way */
  .tox-notifications-container{
      visibility: hidden;
    }
/* another way */
  .tox-notifications-container{
      display: none;
    }
</style>

/* javascript way */

window.addEventListener('DOMContentLoaded', () => {
document.querySelector('.tox-notifications-container').style.visibility = "hidden";
}); // Assuming that you have only one element with this class.

Deceased

Answer 9

I had multiple textarea in same page,a called:

tinymce.init({
   selector: 'textarea'
})

Then I did in CSS

.tox-notifications-container{
  display: none;
}

Heterograft