tinymce -图像/文件上传默认为图像

TinyMCE 是一个流行的富文本编辑器，它允许用户在网页上创建和编辑富文本内容。在 TinyMCE 中，图像和文件上传功能是通过插件实现的，这些插件可以配置为默认上传图像或文件。

基础概念

富文本编辑器：一种允许用户以所见即所得的方式编辑网页内容的工具，支持格式化文本、插入图像、链接等多种功能。

插件：TinyMCE 的功能扩展模块，可以通过添加或移除插件来定制编辑器的行为。

图像/文件上传：允许用户将本地计算机上的文件上传到服务器，并在编辑器中插入这些文件的链接或直接显示图像。

类型

图像上传插件：专门用于处理图像文件。
文件上传插件：可以处理各种类型的文件，不仅仅是图像。

应用场景

博客平台：用户可以直接在文章中插入图片。
内容管理系统（CMS）：编辑人员可以方便地管理网站内容。
在线表单：允许用户上传附件。

遇到的问题及解决方法

问题：TinyMCE 图像/文件上传默认为图像

这通常是因为编辑器的配置设置导致的。默认情况下，TinyMCE 可能会优先处理图像上传。

解决方法

修改配置文件：在 TinyMCE 的初始化配置中，可以指定默认的上传行为。例如，如果你想让文件上传成为默认行为，可以这样设置：
修改配置文件：在 TinyMCE 的初始化配置中，可以指定默认的上传行为。例如，如果你想让文件上传成为默认行为，可以这样设置：
使用插件：确保你已经安装并启用了适当的插件，如 filemanager 或 uploadimage。
服务器端处理：确保服务器端有相应的处理逻辑来接收和处理上传的文件。

示例代码

以下是一个简单的 TinyMCE 初始化配置示例，展示了如何设置默认的文件上传行为：

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
  <script>
    tinymce.init({
      selector: 'textarea',
      plugins: 'image filemanager',
      toolbar: 'image file',
      file_picker_types: 'file', // 设置默认为文件上传
      file_picker_callback: function (callback, value, meta) {
        var input = document.createElement('input');
        input.setAttribute('type', 'file');
        input.onchange = function () {
          var file = this.files[0];
          var formData = new FormData();
          formData.append('file', file);

          fetch('/your-upload-endpoint', {
            method: 'POST',
            body: formData
          })
          .then(response => response.json())
          .then(data => {
            callback(data.url, { title: file.name });
          });
        };
        input.click();
      }
    });
  </script>
</head>
<body>
  <textarea>Easy (and free!) You should check out our premium features.</textarea>
</body>
</html>

在这个示例中，file_picker_types: 'file' 设置了默认的文件上传类型，而 file_picker_callback 定义了如何处理文件选择和上传的过程。

通过这种方式，你可以灵活地控制 TinyMCE 中图像和文件上传的行为，以满足不同的应用需求。