Implementierungsmethode zum Hochladen von Bildern im Hintergrundeditor von keystone.js

Der Inhalt dieses Artikels befasst sich mit der Implementierungsmethode zum Hochladen von Bildern im Hintergrundeditor von keystone.js. Ich hoffe, dass er für Sie hilfreich ist.

Bei der Verwendung von Keystone ist ein Problem aufgetreten: Keystone verwendet Tinymce als Rich-Text-Editor im Hintergrund, bietet jedoch nur die Funktion zum Einfügen von Netzwerkbildern und kann keine lokalen Bilder hochladen und verwalten. Glücklicherweise bietet Keystone Optionen So fügen Sie ein Plug-in für tinymce hinzu

1. Fügen Sie ein Plug-in im Editor hinzu

1 Laden Sie das Bild-Plug-in hoch

Laden Sie das Plug-in herunter und Legen Sie es im statischen Verzeichnis

2 ab. Konfiguration

Fügen Sie die folgenden Konfigurationselemente in keystone.init() hinzu:

{
  '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. Fügen Sie der Routing-Datei den folgenden Code hinzu:

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;

Wir fügen die API in

ein. Beachten Sie, dass die neue API

Middlewareapi/upload_image.js<🎜 hinzufügen muss >2. Erstellen Sie eine neue Domain, um Bilder zu verwaltenkeystone.middleware.api

:

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-Detailsmodels/FileUpload.js

Implementierungsdetails:

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,
    });
  })
}

Verwandte Empfehlungen: api/upload_image.js

Fragen Sie den Editor. Nach dem Öffnen des Bild-Uploads mit dem ckeditor ist beim Hochladen der Datei upload.php ein Fehler aufgetreten.

Drag Der Ereigniseditor realisiert den Drag-and-Drop-Upload-Bildeffekt

Das obige ist der detaillierte Inhalt vonImplementierungsmethode zum Hochladen von Bildern im Hintergrundeditor von keystone.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!