13

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?

Jaysheel Utekar
  • 1,171
  • 1
  • 19
  • 37
Prakash Patil
  • 443
  • 1
  • 4
  • 11

9 Answers9

15

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.

Prakash Patil
  • 443
  • 1
  • 4
  • 11
15

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';
  }
 });
hakamairi
  • 4,464
  • 4
  • 30
  • 53
Vijay Chauhan
  • 1,282
  • 19
  • 18
9

I have solved my problem with the use 

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
Mohammed Abu Faysal
  • 151
  • 2
  • 5
3

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

Nathan Goings
  • 1,145
  • 1
  • 15
  • 33
  • 1
    I've downloaded script from https://download.tiny.cloud/tinymce/community/tinymce_6.0.1.zip?_ga=2.237622659.2077796099.1650437738-153142498.1650437738 and it works – Paweł Moskal Apr 20 '22 at 07:40
  • @PawełMoskal, that's the "TinyMCE SDK" and the link you provided can be found on the cloud site: https://www.tiny.cloud/get-tiny/ – Nathan Goings Apr 20 '22 at 14:49
  • 1
    This should be the accepted answer. I've added another answer to detail how to override this in an Angular project – thomaux Sep 27 '22 at 16:41
2

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>
Ignacio Ara
  • 2,476
  • 2
  • 26
  • 37
2

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';
  }
});
mfink
  • 1,309
  • 23
  • 32
1

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.

thomaux
  • 19,133
  • 10
  • 76
  • 103
0

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.
junior_dev
  • 39
  • 6
0

I had multiple textarea in same page,a called:

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

Then I did in CSS

.tox-notifications-container{
  display: none;
}
Leo nardo
  • 1