在keystone.js后台编辑器中上传图片

googollee 发布于2019-08-23 11:53 / 2787人阅读

摘要：使用时遇到一个问题后台使用做富文本编辑器，但其只提供了插入网络图片的功能，而不能上传和管理本地图片，好在提供了选项来为添加插件，开搞一在编辑器中添加插件上传图片插件下载插件并放到静态目录下配置在中增加如下配置项上传图片的上传图片插件二后台

使用keystone时遇到一个问题：keystone后台使用tinymce做富文本编辑器，但其只提供了插入网络图片的功能，而不能上传和管理本地图片，好在keystone提供了选项来为tinymce添加插件，so~开搞

一、在编辑器中添加插件 1. 上传图片插件

下载插件并放到静态目录下

2. 配置

在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" }, // 上传图片插件
  }
}

二、后台API 1. 监听路由

在路由文件中增加如下代码：

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;

我们将API放到api/upload_image.js中，注意新增的API需要添加keystone.middleware.api中间件

2. 建立新域来管理图片

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细节

api/upload_image.js实现细节：

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

GPU云服务器云服务器编辑器图片上传后台上传图片图片一直显示图片上传中 java在云服务器上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97633.html

Node.js快速开发利器-Keystone.js

摘要：介绍是以和为基础搭建的开源的和应用程序平台。在官网上声称在中，用搭建数据驱动的网站应用程序和是最容易的。这样实现一个网站只要定义和写前端代码就好了。这应该是前端猴子接外包的一个利器吧。介绍 Keystone是以Express和MongoDB为基础搭建的开源的Node.js CMS和web应用程序平台。 Keystone在官网上声称：在Node.js中，用Keystone搭建数据驱动的...

zhiwei 2019-08-19 17:54 评论0 收藏0
eyoucms v1.4.9授权破解版易优cms企业建站系统去版权版 v1.4.9

摘要：授权破解版易优企业建站系统易优企业建站系统是一款十分优秀专业的为企业创建网站服务的软件。去版权破解版强大好用，为企业创建网站提供很多帮助和便利。直接去易优官网，购买商业授权即可去除版权。eyoucms v1.4.9授权破解版(易优企业建站系统)是一款十分优秀专业的为企业创建网站服务的软件。eyoucms v1.4.9去版权破解版强大好用，为企业创建网站提供很多帮助和便利。易优cms破解授权...

番茄西红柿 2021-08-10 09:40 评论0 收藏2637
django项目admin后台整合tinymce富文本编辑并自定义添加图片本地上传和富文本中的回显

摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。前言我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...

HackerShell 2019-08-21 17:29 评论0 收藏0
django项目admin后台整合tinymce富文本编辑并自定义添加图片本地上传和富文本中的回显

摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。前言我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...

Honwhy 2019-08-01 17:56 评论0 收藏0
django项目admin后台整合tinymce富文本编辑并自定义添加图片本地上传和富文本中的回显

摘要：选择该页面绑定的标签指定图片上传处理目录注其中为了显示为中文，标明了中文，同时需要下载语言包放到对应的文件夹下。前言我们常因为django的自带admin后台功能而选择该框架，但也因为其自动生成的特殊性而在做出特别的更改的时候束手束脚，鉴于项目已经采用了django，而后台要求能够直接上传富文本内容直接用于网页显示，定制性高，后来翻了目前较为知名的几款富文本编辑框，觉得还是tiny...

k00baa 2019-07-30 14:56 评论0 收藏0