Migrating to tiny mce 5

Question

I took over a website for my clients that is written on very old code. However, I thought the migration to tiny mce 5 would be no problem. In the client's edit php file, the code was:

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript">
  tinymce.init({
    selector: 'textarea',
    theme: 'modern',
    plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
      'save table contextmenu directionality template paste textcolor'
    ],
    //content_css: 'css/content.css',
    menubar: 'edit view format',
    style_formats: [
    {title: 'Blocks', items: [
      {title: 'Paragraph', format: 'p'},
    ]},
    {title: 'Headers', items: [
      {title: 'Header 1', format: 'h1'},
      {title: 'Header 2', format: 'h2'},
      {title: 'Header 3', format: 'h3'},
      {title: 'Header 4', format: 'h4'},
      {title: 'Header 5', format: 'h5'},
      {title: 'Header 6', format: 'h6'}
    ]},
    {title: 'Alignment', items: [
      {title: 'Left', icon: 'alignleft', format: 'alignleft'},
      {title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
      {title: 'Right', icon: 'alignright', format: 'alignright'},
      {title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
    ]}
  ],
    toolbar: 'removeformat | bold italic | bullist numlist outdent indent | link anchor | nonbreaking charmap hr | print preview fullpage | code'
  });
  </script>

And now, in an attempt to migrate to 5, I updated to:

<script src="//cdn.tiny.cloud/1/my api key here/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript">
  tinymce.init({
    selector: 'textarea',
    theme: 'modern',
    plugins: [
      'advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker',
      'searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking',
      'save table contextmenu directionality template paste textcolor'
    ],
    //content_css: 'css/content.css',
    menubar: 'edit view format',
    style_formats: [
    {title: 'Blocks', items: [
      {title: 'Paragraph', format: 'p'},
    ]},
    {title: 'Headers', items: [
      {title: 'Header 1', format: 'h1'},
      {title: 'Header 2', format: 'h2'},
      {title: 'Header 3', format: 'h3'},
      {title: 'Header 4', format: 'h4'},
      {title: 'Header 5', format: 'h5'},
      {title: 'Header 6', format: 'h6'}
    ]},
    {title: 'Alignment', items: [
      {title: 'Left', icon: 'alignleft', format: 'alignleft'},
      {title: 'Center', icon: 'aligncenter', format: 'aligncenter'},
      {title: 'Right', icon: 'alignright', format: 'alignright'},
      {title: 'Justify', icon: 'alignjustify', format: 'alignjustify'}
    ]}
  ],
    toolbar: 'removeformat | bold italic | bullist numlist outdent indent | link anchor | nonbreaking charmap hr | print preview fullpage | code'
  });
  </script>

However now upon reloading the page, after clearing my site cache, I get a 404 error: "Failed to load resource: the server responded with a status of 404 ()"

Any help would be greatly appreciated. Thank you!

Answer 1

What resource is causing the 404? It would be quite useful to see the complete error message that you are getting.

My guess is that the issue is this line in the configuration:

theme: 'modern'

There is no modern theme in TinyMCE 5 so trying to load that theme is likely leading to an error.

Here is the complete documentation on migrating from TinyMCE 4 to TinyMCE 5: https://www.tiny.cloud/docs/migration-from-4x/