Implementation method of uploading images in keystone.js background editor

The content of this article is about the implementation method of uploading images in the keystone.js background editor. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

I encountered a problem when using keystone: keystone uses tinymce as a rich text editor in the background, but it only provides the function of inserting network images, and cannot upload and manage local images. Fortunately, keystone provides options to Add a plug-in for tinymce

1. Add the plug-in in the editor

1. Upload the image plug-in

Download the plug-in and put it in the static directory

2 . Configuration

Add the following configuration items in keystone.init():

{
  'wysiwyg additional plugins': 'uploadimage',
  'wysiwyg additional buttons': 'uploadimage',
  'wysiwyg additional options': {
    'uploadimage_form_url': '/api/admin/upload-image', //上传图片的API
    'relative_urls': false,
    'external_plugins': { 'uploadimage': '/js/uploadimage/plugin.min.js' }, // 上传图片插件
  }
}

2. Backend API

1. Monitor routing

Add the following code to the routing file:

var router = express.Router();
var keystone = require('keystone');
var importRoutes = keystone.importer(__dirname);
var routes = {
  api: importRoutes('./api'),
};

router.post('/api/admin/upload-image', keystone.middleware.api, routes.api.upload_image);

module.exports = router;

We put the API in api/upload_image.js. Note that the new API needs to be added keystone.middleware. apiMiddleware

2. Create a new domain to manage images

models/FileUpload.js：

var keystone = require('keystone');
var Types = keystone.Field.Types;

/**
 * File Upload Model
 * ===========
 * A database model for uploading images to the local file system
 */

var FileUpload = new keystone.List('FileUpload');

var myStorage = new keystone.Storage({
  adapter: keystone.Storage.Adapters.FS,
  fs: {
    path: keystone.expandPath('public/uploads'), // required; path where the files should be stored
    publicPath: 'uploads', // path where files will be served
  }
});

FileUpload.add({
  name: { type: Types.Key, index: true},
  file: {
    type: Types.File,
    storage: myStorage
  },
  createdTimeStamp: { type: String },
  alt1: { type: String },
  attributes1: { type: String },
  category: { type: String },      //Used to categorize widgets.
  priorityId: { type: String },    //Used to prioritize display order.
  parent: { type: String },
  children: { type: String },
  url: {type: String},
  fileType: {type: String}

});


FileUpload.defaultColumns = 'name';
FileUpload.register();

3. API details

api/upload_image.jsImplementation details:

var
  keystone = require('keystone'),
  fs = require('fs'),
  path = require('path');

var FileData = keystone.list('FileUpload'); 

module.exports = function (req, res) {
  var
    item = new FileData.model(),
    data = (req.method == 'POST') ? req.body : req.query;
  
  // keystone采用的老版multer来解析文件，根据req.files.file.path将文件从缓冲区复制出来
  fs.copyFile(req.files.file.path, path.join(__dirname, '../../public/uploads', req.files.file.name), function (err) {
    var sendResult = function () {
      if (err) {
        res.send({ error: { message: err.message } });
      } else {
        // 按插件要求的返回格式返回URL
        res.send({ image: {
          url: "\/uploads\/" + req.files.file.name
        } });
      }
    };

    // TinyMCE upload plugin uses the iframe transport technique
    // so the response type must be text/html
    res.format({
      html: sendResult,
      json: sendResult,
    });
  })
}

Related recommendations:

Ask the editor ckeditor to open the upload.php file after uploading the image Upload error

Drag event editor implements drag and drop upload image effect

The above is the detailed content of Implementation method of uploading images in keystone.js background editor. For more information, please follow other related articles on the PHP Chinese website!