迁移到微型 mce 5

Question

我为我的客户接管了一个用非常旧的代码编写的网站。但是，我认为迁移到 tiny mce 5 是没有问题的。在客户端编辑 php 文件中，代码为：

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

现在，为了迁移到 5，我更新为：

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

但是现在在清除我的网站缓存后重新加载页面时，我收到 404 错误： “无法加载资源：服务器响应状态为 404 ()”

如有任何帮助，我们将不胜感激。谢谢！

Answer 1

什么资源导致了 404？查看您收到的完整错误消息将非常有用。

我猜问题出在配置中的这一行：

theme: 'modern'

TinyMCE 5 中没有现代主题，因此尝试加载该主题可能会导致错误。

这是从 TinyMCE 4 迁移到 TinyMCE 5 的完整文档：https://www.tiny.cloud/docs/migration-from-4x/

迁移到微型 mce 5

Migrating to tiny mce 5

tinymce

tinymce-4

tinymce-5