返回

新手如何从头撸一个 tinymce 图片上传插件

前端

  1. 环境准备

首先，你需要安装好tinymce编辑器。你可以通过npm或者yarn安装：

npm install tinymce

或者

yarn add tinymce

安装完成后，你需要创建一个tinymce实例。你可以通过以下代码创建一个实例：

tinymce.init({
  selector: 'textarea#mytextarea',
  plugins: 'image',
  toolbar: 'image'
});

2. 创建插件

接下来，你需要创建一个插件。你可以通过以下命令创建一个插件：

tinymce.PluginManager.add('imageupload', function(editor) {
  // Add a button to the toolbar
  editor.addButton('imageupload', {
    text: '上传图片',
    icon: 'image',
    onclick: function() {
      // Open the image upload dialog
      editor.windowManager.open({
        title: '上传图片',
        url: 'imageupload.html',
        width: 600,
        height: 400,
        buttons: [{
          text: '上传',
          onclick: function() {
            // Get the selected image file
            var file = editor.dom.select('input[type=file]')[0].files[0];

            // Send the file to the server
            var formData = new FormData();
            formData.append('image', file);

            $.ajax({
              url: 'upload.php',
              type: 'POST',
              data: formData,
              processData: false,
              contentType: false,
              success: function(data) {
                // Insert the image into the editor
                editor.insertContent('<img src="' + data.url + '" alt="' + data.name + '" />');

                // Close the dialog
                editor.windowManager.close();
              }
            });
          }
        }, {
          text: '取消',
          onclick: function() {
            // Close the dialog
            editor.windowManager.close();
          }
        }]
      });
    }
  });
});

3. 上传图片

接下来，你需要创建一个上传图片的页面。你可以通过以下代码创建一个页面：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <form action="upload.php" method="POST" enctype="multipart/form-data">
    <input type="file" name="image">
    <input type="submit" value="上传">
  </form>
</body>
</html>

4. 处理上传的图片

最后，你需要创建一个处理上传图片的脚本。你可以通过以下代码创建一个脚本：

<?php
// Get the uploaded image file
$file = $_FILES['image'];

// Move the file to the uploads directory
move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name']);

// Return the image URL and name
echo json_encode(['url' => 'uploads/' . $file['name'], 'name' => $file['name']]);
?>

5. 完成

现在，你已经成功创建了一个tinymce图片上传插件。你可以通过以下代码将插件添加到你的tinymce实例中：

tinymce.init({
  selector: 'textarea#mytextarea',
  plugins: 'image imageupload',
  toolbar: 'image imageupload'
});

现在，你就可以在你的tinymce编辑器中上传图片了。