UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗(yàn)等特點(diǎn)，開源基于MIT協(xié)議，允許自由使用和修改代碼..

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的華龍網(wǎng)站設(shè)計(jì)、移動媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

1 下載ueditor nodejs版本

2 復(fù)制public目錄下面的文件

到項(xiàng)目靜態(tài)資源public文件夾下

3 在項(xiàng)目根目錄創(chuàng)建ueditor文件夾

要復(fù)制進(jìn)來的內(nèi)容為

4 在根目錄的 ueditor文件夾下執(zhí)行 npm install 安裝此目錄下面package.json依賴的模塊

5 項(xiàng)目根目錄下創(chuàng)建 ue.js 代碼部分來自于

ue.js 代碼

const express = require('express'),
  path = require('path'),
  ueditor = require("./ueditor/"),
  router = express.Router();

router.use("/",ueditor(path.join(process.cwd(),'public'),function (req,res,next){
  //客戶端上傳文件設(shè)置
  //console.log(req.query.action);
  let ActionType = req.query.action;
  if(ActionType === 'uploadimage' || ActionType === 'uploadfile' || ActionType === 'uploadvideo'){
    let file_url = '/img/ueditor/';//默認(rèn)圖片上傳地址
    /*其他上傳格式的地址*/
    if(ActionType === 'uploadfile'){
      file_url = '/file/ueditor/'; //附件
    }
    if(ActionType === 'uploadvideo'){
      file_url = '/video/ueditor/'; //視頻
    }
    res.ue_up(file_url); //你只要輸入要保存的地址 。保存操作交給ueditor來做
    res.setHeader('Content-Type','text/html');
  }
  // 客戶端發(fā)起圖片列表請求
  else if(req.query.action === 'listimage'){
    let dir_url = '/img/ueditor/';
    res.ue_list(dir_url); // 客戶端會列出 dir_url 目錄下的所有圖片
  }else if(req.query.action === 'listfile'){
    let dir_url = '/file/ueditor/';
    res.ue_list(dir_url); // 客戶端會列出 dir_url 目錄下的所有圖片
  }
  // 客戶端發(fā)起其它請求
  else{
    // console.log('config.json')
    res.setHeader('Content-Type','application/json');
    res.redirect('/ueditor/nodejs/config.json');
  }
}));
module.exports = router;

特別說明 默認(rèn)ueditor上傳的圖片路徑為 public/img/ueditor

6 路由設(shè)置 根目錄下 app.js ---use()匹配的所有的路由/ueditor/ue，都會走 這個路由

7 后臺模板使用富文本編輯器 --這里我后臺主要發(fā)布文章的時候用到富文本編輯器

特別注意：一定要實(shí)例化

百度的這個富文本編輯器提供了很多種api 具體的請看

8 由于我使用form(post)方式向MySQL數(shù)據(jù)庫添加數(shù)據(jù),所以在點(diǎn)擊提交的按鈕的時候，將富文本編輯器里面的內(nèi)容 添加到 form的一個input里面

$('button[type="submit"]').click(function () {
      var conData = getContent();
      $('input.content').val(conData);
}）;

9 效果展示 --

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章名稱：nodejs后臺集成ueditor富文本編輯器的實(shí)例
網(wǎng)站路徑：http://www.chinadenli.net/article34/gcsjpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站建設(shè)、用戶體驗(yàn)、網(wǎng)站內(nèi)鏈、建站公司、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)