まとめ:
最近自分のブログを作成しています。この期間中にブログを書く時間がないかもしれませんが、良いものがあれば、まだみんなと共有する必要があります。ブログWebサイトには記事を編集するためのエディターが必要なので、オンラインで情報を確認しました。ほとんどの編集者の背景はJava、PHP、ASPなどに基づいており、node.jsに基づいている人はほとんどいません。私はもともとマークダウンを使用して記事を書きたいと思っていましたが、スタイルを調整するのは簡単ではなかったので、最終的にBaiduのUeditorを選択しました。公式Webサイトにnode.jsに基づいたコードはありません。しかし、幸いなことに、私はGithubで同様のものを見つけたので、私はあなたとそれを共有します。 node.jsを使用して独自のブログを開発する予定がある場合は、参照できます。
引用をダウンロード:
最初に、Ueditorの公式Webサイトにコードをダウンロードしました。開発バージョン1.4.3pp-8バージョンをダウンロードしました。減圧後、ファイルをパブリックディレクトリに入れます。ここでは、ueditorに名前を変更します。次に、これら3行を必要なページの頭に追加します
コードコピーは次のとおりです。
<script type = "text/javascript" charset = "utf-8" src = "/ueditor/ueditor.config.js"> </script>
<script type = "text/javascript" charset = "utf-8" src = "/ueditor/ueditor.all.min.js"> </script>
<script type = "text/javascript" charset = "utf-8" src = "/ueditor/lang/zh-cn/zh-cn.js"> </script>
次に、必要に応じて次のコードを呼び出します
コードコピーは次のとおりです。
<script id = "editor" type = "text/plain"> </script>
<スクリプト>
var ue = ue.geteditor( 'editor');
</script>
バックエンドの変更:
ダウンロードされたものは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桁の年に置き換えられます*/
/* {mm}は2か月に置き換えられます*/
/* {dd}は2つの日付に置き換えられます*/
/* {hh}は2時間に置き換えられます*/
/* {ii}は2桁に置き換えられます*/
/* {ss}は2桁の秒に置き換えられます*/
/ *違法な文字/: *? "<> | */
/ *詳細については、オンラインドキュメントを参照してください:fex.baidu.com/ueditor/#use-format_upload_filename */
/* Graffiti画像Configurationアイテムをアップロード*/
「scrawlactionname」:「uploadscrawl "、 /*アップロードのアクション名Graffiti* /
「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"]、 /*クロール画像形式ディスプレイ* /
/*ビデオ構成をアップロード*/
"VideocactionName": "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"
次のパッケージをインストールする必要があります
コードコピーは次のとおりです。
「依存関係」:{
「ボディパーサー」:「〜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エディターを統合することの全体的な内容です。みんなが気に入ってくれることを願っています。