node.js は Baidu UE editor_node.js を統合します

概要:
最近は自分のブログを書いているので、しばらくブログを書く時間がないかもしれませんが、それでも良いものをみんなと共有しなければなりません。ブログサイトには記事を編集するためのエディタが必要なので、ネットで情報を調べてみました。ほとんどのエディターのバックグラウンドは Java、php、asp などに基づいていますが、node.js に基づいているものはほとんどありません。本当はマークダウンで記事を書きたかったのですが、スタイルの調整が大変だったので最終的にBaiduのueditorを選択しました 公式サイトにはnode.jsをベースにしたコードがありません。しかし幸運なことに、github で同様のものを見つけたので、node.js を使用して独自のブログを開発する予定がある場合は、それを参照してください。

ダウンロードリファレンス:

まず、ueditor の公式 Web サイトにアクセスして、開発バージョン 1.4.3php utf-8 バージョンをダウンロードしました。ここでは、ファイルの名前を ueditor に変更しました。次に、これらの 3 行

を必要なページのヘッダーに追加します。

コードをコピーします コードは次のとおりです:

次に、必要に応じて次のコードを呼び出します

コードをコピーします コードは次のとおりです:

<スクリプト>
var ue = UE.getEditor('editor');

バックエンドの変更:

ダウンロードしたものはphpベースのものですが、今度はnode.jsベースのものに変更しましょう。まず未使用の php ファイルを削除し、次に新しいフォルダー nodejs を作成し、このディレクトリに次の内容の新しいファイル config.json を作成します:

コードをコピー コードは次のとおりです:

/* フロントエンドとバックエンドの通信に関連する設定。複数行のコメントのみが許可されます */
{
/* 画像構成アイテムをアップロード */
"imageActionName": "uploadimage", /* 画像をアップロードするアクション名を実行します */
"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} は 4 桁の年に置き換えられます */
/* {yy} は 2 桁の年に置き換えられます */
されてきました。 /* {dd} は 2 桁の日付に置き換えられます */
/* {hh} は 2 時間に置き換えられます */
/* {ii} は 2 桁の分に置き換えられます */
/* {ss} は 2 桁の秒に置き換えられます */
/* 不正な文字: * ? " < > | */
/* 詳細については、オンライン ドキュメントを参照してください: fex.baidu.com/ueditor/#use-format_upload_filename */
/* Tuya 画像アップロード設定項目 */
"scrawlActionName": "uploadscrawl", /* 落書きをアップロードするためのアクション名 */
"scrawlFieldName": "upfile", /* 送信された画像フォーム名 */
"scrawlPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 保存パスをアップロードします。保存パスとファイル名の形式をカスタマイズできます* /
"scrawlMaxSize": 2048000, /* アップロード サイズ制限、ユニット B */
"scrawlUrlPrefix": "", /* 画像アクセスパスプレフィックス */
"scrawlInsertAlign": "なし",
/* スクリーンショットツールでアップロード */
"snapscreenActionName": "uploadimage", /* スクリーンショットをアップロードするためのアクション名 */
"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", /* リモート画像のキャプチャに使用されるアクション名 */
"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", /* ビデオのアップロードを実行するアクション名 */
"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", /* コントローラー内で、アップロードされたビデオを実行するためのアクション名 */
"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", /* 画像管理を行うアクション名 */
"imageManagerListPath": "/ueditor/php/upload/image/", /* 画像を一覧表示するディレクトリを指定します */
"imageManagerListSize": 20, /* 毎回リストされるファイルの数 */
"imageManagerUrlPrefix": "", /* 画像アクセス パスのプレフィックス */
"imageManagerInsertAlign": "none", /* 挿入された画像はフローティングになります */
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* リストされたファイルの種類 */
/* 指定されたディレクトリ内のファイルを一覧表示します */
"fileManagerActionName": "listfile", /* ファイル管理を実行するアクション名 */
"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"
] /* リストされたファイルタイプ */
}

次に、ueditor.config.js ファイルを見つけて、次の行を見つけて、次の引用符を独自のバックグラウンド パスに変更します。

serverUrl: URL "php/controller.php"

例:

serverUrl: URL "ueditor"

次のパッケージをインストールする必要があります

コードをコピーします コードは次のとおりです:

"依存関係": {
"body-parser": "~1.0.0",
"エクスプレス": "~4.2.0",
"ueditor": "^1.0.0"
}

バックエンドコード:

コードをコピーします コードは次のとおりです:

var Express = require('express');var path = require('path');
var app = Express();
var ueditor = require("ueditor");
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
拡張: true
}));
app.use(bodyParser.json());
app.use("/ueditor/ueditor", ueditor(path.join(__dirname, 'public'), 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); }
//クライアントが他のリクエストを開始します
他 {
res.setHeader('Content-Type', 'application/json');
res.redirect('/ueditor/nodejs/config.json');
}
}));

注: 上記は画像のアップロードのみを処理します。ビデオのアップロードについては、公式 Web サイトの API を参照して開発をフォローしてください。

上記は、Nodejs プロジェクトに Baidu UE エディタを統合する内容です。気に入っていただければ幸いです。