nodejs學習筆記三nodejs使用富文本插件ueditor

来源:http://www.cnblogs.com/chuaWeb/archive/2016/02/15/5178257.html
-Advertisement-
Play Games

在做自己的nodejs項目的時候遇到需要使用ueditor。原來下載的是ueditor的jsp版本。目錄如下 在ueditor.config.js中有配置伺服器home路徑（這個home路徑能找到ueditor文件夾，可以使用這個路徑訪問ueditor內的靜態資源，比如我的top.ctx為http:


　　在做自己的nodejs項目的時候遇到需要使用ueditor。原來下載的是ueditor的jsp版本。目錄如下 
　　
　　在ueditor.config.js中有配置伺服器home路徑（這個home路徑能找到ueditor文件夾，可以使用這個路徑訪問ueditor內的靜態資源，比如我的top.ctx為http://localhost:8080,那麼我可以通過http://localhost:8080/static/ueditor/ueditor.config.js在瀏覽器打開這個腳本） 

window.UEDITOR_HOME_URL = top.ctx + '/static/ueditor/';

　　還有一個上傳統一路徑 

window.UEDITOR_CONFIG = { 
    //home 
    UEDITOR_HOME_URL: URL,
    // 伺服器統一請求介面路徑 
    serverUrl: URL + "jsp/controller.jsp",
    ... 
}

　　所以當ueditor上傳文件或自動存檔的時候調用serverUrl路徑找到對應的controller.jsp來處理。 


　　但是ueditor卻沒有nodejs版本，只能自己寫了，參考了http://www.jb51.net/article/60781.htm。 

　　首先:

　　我修改ueditor.config.js中了home路徑（這個路徑根據自己設置的靜態資源文件來填寫，參考上面home路徑的說明） 

window.UEDITOR_HOME_URL = top.ctx + '/ueditor/'

　　其次我修改了伺服器統一請求路徑 

serverUrl: URL + "ueditor"

　　這就意味著ueditor保存數據（上傳圖片等）會統一請求路徑：top.ctx + '/ueditor/ueditor'。所以我們在後臺代碼必然要對這個請求路徑做處理才行。 

　　然後：

　　在ueditor文件夾下新建了nodejs文件夾，在nodejs下新建一個config.json文件。 源碼如下

/* 前後端通信相關的配置,註釋只允許使用多行方式 */
{
    /* 上傳圖片配置項 */
    "imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
    "imageFieldName": "upfile", /* 提交的圖片表單名稱 */
    "imageMaxSize": 2048000, /* 上傳大小限制，單位B */
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
    "imageCompressEnable": true, /* 是否壓縮圖片,預設是true */
    "imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
    "imageInsertAlign": "none", /* 插入的圖片浮動方式 */
    "imageUrlPrefix": "", /* 圖片訪問路徑首碼 */
    "imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
                                /* {filename} 會替換成原文件名,配置這項需要註意中文亂碼問題 */
                                /* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */
                                /* {time} 會替換成時間戳 */
                                /* {yyyy} 會替換成四位年份 */
                                /* {yy} 會替換成兩位年份 */
                                /* {mm} 會替換成兩位月份 */
                                /* {dd} 會替換成兩位日期 */
                                /* {hh} 會替換成兩位小時 */
                                /* {ii} 會替換成兩位分鐘 */
                                /* {ss} 會替換成兩位秒 */
                                /* 非法字元 \ : * ? " < > | */
                                /* 具請體看線上文檔: fex.baidu.com/ueditor/#use-format_upload_filename */
    /* 塗鴉圖片上傳配置項 */
    "scrawlActionName": "uploadscrawl", /* 執行上傳塗鴉的action名稱 */
    "scrawlFieldName": "upfile", /* 提交的圖片表單名稱 */
    "scrawlPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
    "scrawlMaxSize": 2048000, /* 上傳大小限制，單位B */
    "scrawlUrlPrefix": "", /* 圖片訪問路徑首碼 */
    "scrawlInsertAlign": "none",
    /* 截圖工具上傳 */
    "snapscreenActionName": "uploadimage", /* 執行上傳截圖的action名稱 */
    "snapscreenPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
    "snapscreenUrlPrefix": "", /* 圖片訪問路徑首碼 */
    "snapscreenInsertAlign": "none", /* 插入的圖片浮動方式 */
    /* 抓取遠程圖片配置 */
    "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
    "catcherActionName": "catchimage", /* 執行抓取遠程圖片的action名稱 */
    "catcherFieldName": "source", /* 提交的圖片列表表單名稱 */
    "catcherPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
    "catcherUrlPrefix": "", /* 圖片訪問路徑首碼 */
    "catcherMaxSize": 2048000, /* 上傳大小限制，單位B */
    "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取圖片格式顯示 */
    /* 上傳視頻配置 */
    "videoActionName": "uploadvideo", /* 執行上傳視頻的action名稱 */
    "videoFieldName": "upfile", /* 提交的視頻表單名稱 */
    "videoPathFormat": "/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
    "videoUrlPrefix": "", /* 視頻訪問路徑首碼 */
    "videoMaxSize": 102400000, /* 上傳大小限制，單位B，預設100MB */
    "videoAllowFiles": [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上傳視頻格式顯示 */
    /* 上傳文件配置 */
    "fileActionName": "uploadfile", /* controller里,執行上傳視頻的action名稱 */
    "fileFieldName": "upfile", /* 提交的文件表單名稱 */
    "filePathFormat": "/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳保存路徑,可以自定義保存路徑和文件名格式 */
    "fileUrlPrefix": "", /* 文件訪問路徑首碼 */
    "fileMaxSize": 51200000, /* 上傳大小限制，單位B，預設50MB */
    "fileAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ], /* 上傳文件格式顯示 */
    /* 列出指定目錄下的圖片 */
    "imageManagerActionName": "listimage", /* 執行圖片管理的action名稱 */
    "imageManagerListPath": "/ueditor/php/upload/image/", /* 指定要列出圖片的目錄 */
    "imageManagerListSize": 20, /* 每次列出文件數量 */
    "imageManagerUrlPrefix": "", /* 圖片訪問路徑首碼 */
    "imageManagerInsertAlign": "none", /* 插入的圖片浮動方式 */
    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件類型 */
    /* 列出指定目錄下的文件 */
    "fileManagerActionName": "listfile", /* 執行文件管理的action名稱 */
    "fileManagerListPath": "/ueditor/php/upload/file/", /* 指定要列出文件的目錄 */
    "fileManagerUrlPrefix": "", /* 文件訪問路徑首碼 */
    "fileManagerListSize": 20, /* 每次列出文件數量 */
    "fileManagerAllowFiles": [
        ".png", ".jpg", ".jpeg", ".gif", ".bmp",
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",
        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",
        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"
    ] /* 列出的文件類型 */
}
View Code

　　最後：

　　就是處理top.ctx + '/ueditor/ueditor'請求的後臺代碼了。我的後臺運行主程式是server.js(就像c的main.c一樣)。所以本人就在server.js裡面寫處理代碼了。 
　　想要使用ueditor，需要依賴一下幾個nodejs包：express/body-parser/ueditor ,使用"npm install 包名 --save"安裝即可 
　　
　　後臺代碼如下（當然，如果先前的代碼已經包含了的包和代碼就不用再重覆了） 

var express = require('express'); 
var path = require('path');
var app = express();
var ueditor = require("ueditor");
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(bodyParser.json());
app.use("/ueditor/ueditor", ueditor(path.join(__dirname, 'static'), function(req, res, next) {
    // ueditor 客戶發起上傳圖片請求
    if (req.query.action === 'uploadimage') {
        var foo = req.ueditor;
        var imgname = req.ueditor.filename;
        var img_url = '/images/ueditor/';
        //你只要輸入要保存的地址 。保存操作交給ueditor來做
        res.ue_up(img_url); 
    }
    //  客戶端發起圖片列表請求
    else if (req.query.action === 'listimage') {
        var dir_url = '/images/ueditor/';
        // 客戶端會列出 dir_url 目錄下的所有圖片
        res.ue_list(dir_url); 
    }
    // 客戶端發起其它請求
    else {
        res.setHeader('Content-Type', 'application/json');
        res.redirect('/ueditor/nodejs/config.json');
    }
}));

　　需要註意的是ueditor(path.join(__dirname, 'static'),...)設置保存文件（圖片）的文件夾路徑，是相對於當前的文件路徑。 

　　ok,去運行server.js跑起來，就可以使用了 

　　

 

　　如果覺得本文不錯，請點擊右下方【推薦】！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • CSS“隱藏”元素的幾種方法的對比
    一說起CSS隱藏元素，我想大部分小伙伴們都會想到的第一種方法就是設置display為none。這是最為人所熟知也是最常用的方法。我相信還有不少人想到使用設置visibility為hidden來隱藏元素，這種方式也是常用的方法，而且也有很多人知道兩者的不同。除了這兩種方法，本文還總結了一些比較不常用的...
  • js基礎篇——call/apply、arguments、undefined/null
    a.call和apply方法詳解 call方法: 語法：call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定義：調用一個對象的一個方法，以另一個對象替換當前對象。 說明： call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初
  • 創建和刪除節點：——核心DOM
    1. 創建單個元素節點：3步： 1. 創建空元素節點對象： var elem=document.createElement("標簽名"); 比如: var a=document.createElement("a"); html: <a></a> 2. 設置新元素的關鍵屬性： 比如: a.href="
  • 初識JavaScript 簡單的入門, 認識JavaScript
    先來打個官腔, JavaScript是一種直譯式腳本語言, 是一種動態類型, 弱類型, 基於原型的語言, 內置支持類型, 它廣泛的應用於HTML網頁中, 給HTML網頁增加動態功能, 這門語言雖然叫做JavaScript, 但是和Java沒太大卵關係, 只是因為開發公司Netscape和Sun(Ja
  • 谷歌不相容showModalDialog()方法出現對話視窗解決方法
    javascript中showModalDialog()方法在IE，火狐，百度，360等瀏覽器可以使用，但是在谷歌瀏覽器下去沒有任何反應，現在我給大家一種方法，當然這個方法是我在網上找的，調試可以使用。 <script type="text/javascript"> //開啟模式視窗 functio
  • 【同行說技術】JavaScript開發的資源總結和心靈雞湯
    JavaScript一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用於客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網頁上使用，用來給HTML網頁增加動態功能。今天小編收集了5篇關於Jav
  • 熟悉HTML CSS佈局模型
    HTML最難的地方來了!這個我反覆了很多遍, 包括現在寫博客, 也對我自己算是一種溫習, 我這塊怕是沒辦法寫的很好懂, 因為我自己還不能把我學到的準確通俗易懂的表達出來, 給自己記個筆記, 以後再來一點一點的改, 新手可以看看, 對於初學這塊的人應該還是有點幫助的. CSS佈局模型 以下全部是個人初
  • cdnjquery載入失敗載入本地
    1 <script type="text/javascript" src="//libs.baidu.com/jquery/1.7.2/jquery.min.js"></script> 2 <!--如果cdn jQ載入不成功 載入本地jQ庫 --> 3 <script type="text/java
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類