TinyMCE 富文本编辑器插件 UPFILE 使用指南

2024-01-17 15:12:23

使用 UPFILE 插件轻松上传文件到 TinyMCE 编辑器

步骤 1：安装 UPFILE 插件

TinyMCE 的 UPFILE 插件是一个强大的工具，可以让您直接在编辑器中上传和插入图片、文件和媒体。按照以下步骤轻松安装该插件：

下载 UPFILE 插件。
将插件复制到 TinyMCE 的插件目录。
在 TinyMCE 配置文件中添加以下代码：

tinymce.PluginManager.add('upfile', function(editor, url) {
  // 添加工具栏按钮
  editor.addButton('upfile', {
    text: '上传',
    icon: 'image',
    onclick: function() {
      // 打开文件选择器
      editor.windowManager.open({
        title: '选择文件',
        url: url + '/filepicker.html',
        width: 600,
        height: 400,
        buttons: [{
          text: '上传',
          onclick: function() {
            // 获取选中的文件
            var files = editor.windowManager.getWindows()[0].document.querySelector('input[type=file]').files;

            // 上传文件
            for (var i = 0; i < files.length; i++) {
              var file = files[i];
              var formData = new FormData();
              formData.append('file', file);

              $.ajax({
                url: url + '/upload.php',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                success: function(data) {
                  // 插入图片到编辑器
                  editor.insertContent('<img src="' + data.url + '" alt="' + data.name + '" />');
                }
              });
            }

            // 关闭文件选择器
            editor.windowManager.close();
          }
        }, {
          text: '取消',
          onclick: function() {
            // 关闭文件选择器
            editor.windowManager.close();
          }
        }]
      });
    }
  });
});