Implementation method of uploading images in keystone.js background editor-JS Tutorial-php.cn

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 inkeystone.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' }, // 上传图片插件 } }

Copy after login

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;

Copy after login

We put the API inapi/upload_image.js. Note that the new API needs to be addedkeystone.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();

Copy after login

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

Copy after login

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!