成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

在keystone.js后臺(tái)編輯器中上傳圖片

googollee / 2609人閱讀

摘要：使用時(shí)遇到一個(gè)問(wèn)題后臺(tái)使用做富文本編輯器，但其只提供了插入網(wǎng)絡(luò)圖片的功能，而不能上傳和管理本地圖片，好在提供了選項(xiàng)來(lái)為添加插件，開(kāi)搞一在編輯器中添加插件上傳圖片插件下載插件并放到靜態(tài)目錄下配置在中增加如下配置項(xiàng)上傳圖片的上傳圖片插件二后臺(tái)

使用keystone時(shí)遇到一個(gè)問(wèn)題：keystone后臺(tái)使用tinymce做富文本編輯器，但其只提供了插入網(wǎng)絡(luò)圖片的功能，而不能上傳和管理本地圖片，好在keystone提供了選項(xiàng)來(lái)為tinymce添加插件，so~開(kāi)搞

一、 在編輯器中添加插件 1. 上傳圖片插件

下載插件并放到靜態(tài)目錄下

2. 配置

在keystone.init()中增加如下配置項(xiàng)：

{
  "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" }, // 上傳圖片插件
  }
}
二、后臺(tái)API 1. 監(jiān)聽(tīng)路由

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

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. 建立新域來(lái)管理圖片

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細(xì)節(jié)

api/upload_image.js實(shí)現(xiàn)細(xì)節(jié)：

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來(lái)解析文件，根據(jù)req.files.file.path將文件從緩沖區(qū)復(fù)制出來(lái)
  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,
    });
  })
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97633.html

相關(guān)文章

  • Node.js快速開(kāi)發(fā)利器-Keystone.js

    摘要：介紹是以和為基礎(chǔ)搭建的開(kāi)源的和應(yīng)用程序平臺(tái)。在官網(wǎng)上聲稱在中，用搭建數(shù)據(jù)驅(qū)動(dòng)的網(wǎng)站應(yīng)用程序和是最容易的。這樣實(shí)現(xiàn)一個(gè)網(wǎng)站只要定義和寫(xiě)前端代碼就好了。這應(yīng)該是前端猴子接外包的一個(gè)利器吧。 介紹 Keystone是以Express和MongoDB為基礎(chǔ)搭建的開(kāi)源的Node.js CMS和web應(yīng)用程序平臺(tái)。 Keystone在官網(wǎng)上聲稱：在Node.js中，用Keystone搭建數(shù)據(jù)驅(qū)動(dòng)的...

    zhiwei 評(píng)論0 收藏0

  • eyoucms v1.4.9授權(quán)破解版 易優(yōu)cms企業(yè)建站系統(tǒng)去版權(quán)版 v1.4.9

    摘要：授權(quán)破解版易優(yōu)企業(yè)建站系統(tǒng)易優(yōu)企業(yè)建站系統(tǒng)是一款十分優(yōu)秀專業(yè)的為企業(yè)創(chuàng)建網(wǎng)站服務(wù)的軟件。去版權(quán)破解版強(qiáng)大好用，為企業(yè)創(chuàng)建網(wǎng)站提供很多幫助和便利。直接去易優(yōu)官網(wǎng)，購(gòu)買(mǎi)商業(yè)授權(quán)即可去除版權(quán)。eyoucms v1.4.9授權(quán)破解版(易優(yōu)企業(yè)建站系統(tǒng))是一款十分優(yōu)秀專業(yè)的為企業(yè)創(chuàng)建網(wǎng)站服務(wù)的軟件。eyoucms v1.4.9去版權(quán)破解版 強(qiáng)大好用，為企業(yè)創(chuàng)建網(wǎng)站提供很多幫助和便利。易優(yōu)cms破解授權(quán)...

    番茄西紅柿 評(píng)論0 收藏2637

  • django項(xiàng)目admin后臺(tái)整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

    摘要：選擇該頁(yè)面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語(yǔ)言包放到對(duì)應(yīng)的文件夾下。 前言 我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁(yè)顯示，定制性高，后來(lái)翻了目前較為知名的幾款富文本編輯框，覺(jué)得還是tiny...

    HackerShell 評(píng)論0 收藏0

  • django項(xiàng)目admin后臺(tái)整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

    摘要：選擇該頁(yè)面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語(yǔ)言包放到對(duì)應(yīng)的文件夾下。 前言 我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁(yè)顯示，定制性高，后來(lái)翻了目前較為知名的幾款富文本編輯框，覺(jué)得還是tiny...

    Honwhy 評(píng)論0 收藏0

  • django項(xiàng)目admin后臺(tái)整合tinymce富文本編輯并自定義添加圖片本地上傳和富文本中的回顯

    摘要：選擇該頁(yè)面綁定的標(biāo)簽指定圖片上傳處理目錄注其中為了顯示為中文，標(biāo)明了中文，同時(shí)需要下載語(yǔ)言包放到對(duì)應(yīng)的文件夾下。 前言 我們常因?yàn)閐jango的自帶admin后臺(tái)功能而選擇該框架，但也因?yàn)槠渥詣?dòng)生成的特殊性而在做出特別的更改的時(shí)候束手束腳，鑒于項(xiàng)目已經(jīng)采用了django，而后臺(tái)要求能夠直接上傳富文本內(nèi)容直接用于網(wǎng)頁(yè)顯示，定制性高，后來(lái)翻了目前較為知名的幾款富文本編輯框，覺(jué)得還是tiny...

    k00baa 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<