ringkasan:
Saya sedang membangun blog saya sendiri baru -baru ini. Saya mungkin tidak punya waktu untuk menulis blog selama periode ini, tetapi saya masih harus membaginya dengan semua orang jika saya memiliki hal -hal baik. Situs web blog harus memiliki editor untuk mengedit artikel, jadi saya memeriksa beberapa informasi secara online. Latar belakang sebagian besar editor didasarkan pada Java, PHP, ASP, dll., Dan sedikit yang didasarkan pada Node.js. Saya awalnya ingin menggunakan Markdown untuk menulis artikel, tetapi gayanya tidak mudah untuk disesuaikan, jadi saya akhirnya memilih Ueditor Baidu, dan tidak ada kode berdasarkan Node.js di situs resminya. Tapi untungnya, saya menemukan yang serupa di GitHub, jadi saya akan membaginya dengan Anda. Jika Anda berencana menggunakan Node.js untuk mengembangkan blog Anda sendiri, Anda dapat merujuknya.
Kutipan Unduh:
Pertama, saya mengunduh kode di situs web resmi Ueditor. Saya mengunduh versi pengembangan versi 1.4.3php UTF-8. Setelah dekompresi, masukkan file di direktori publik. Di sini saya mengganti nama menjadi Ueditor. Kemudian tambahkan tiga baris ini ke kepala halaman yang Anda butuhkan
Salinan kode adalah sebagai berikut:
<type script = "Text/JavaScript" Charset = "UTF-8" SRC = "/Ueditor/Ueditor.Config.js"> </cript>
<type script = "Text/JavaScript" charset = "UTF-8" src = "/ueditor/ueditor.all.min.js"> </script>
<type script = "text/javascript" charset = "utf-8" src = "/ueditor/lang/zh-cn/zh-cn.js"> </script>
Kemudian hubungi kode berikut jika diperlukan
Salinan kode adalah sebagai berikut:
<skrip id = "editor" type = "Text/Plain"> </script>
<script>
var ue = ue.getEditor ('editor');
</script>
Modifikasi Backend:
Yang diunduh didasarkan pada PHP, dan sekarang kami akan mengubahnya menjadi Node.js berdasarkan. Pertama, hapus file php yang tidak perlu, lalu buat nodeJs folder baru, dan buat file config.json baru di direktori ini, kontennya adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
/* Untuk konfigurasi terkait komunikasi front-end, komentar hanya memungkinkan metode multi-line*/
{
/* Unggah item konfigurasi gambar*/
"ImageActionName": "Unggahmage", /* Nama tindakan gambar unggahan* /
"imagefieldname": "upfile", /* dikirimkan nama bentuk gambar* /
"ImageMaxSize": 2048000, / * Batas ukuran unggah, unit B * /
"ImageLowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Unggah format gambar untuk ditampilkan* /
"ImageCompressenable": true, / * Apakah akan mengompres gambar, defaultnya benar * /
"ImageCompressborder": 1600, /* Batas tepi maksimum untuk kompresi gambar* /
"ImageInsertAlign": "None", /* Metode Float Image Float* /
"ImageUrlPrefix": "", /* Prefix jalur akses gambar* /
"ImagePathFormat": "/uEditor/php/unggah/gambar/{yyyy} {mm} {dd}/{time} {rand: 6}",/* Unggah jalur simpan, Anda dapat menyesuaikan jalur simpan dan format nama file*/
/* {fileName} akan diganti dengan nama file asli. Anda perlu memperhatikan masalah kode kacau Cina dalam konfigurasi ini*/
/* {rand: 6} akan diganti dengan nomor acak, dan nomor berikut adalah jumlah bit dari nomor acak*/
/* {waktu} akan diganti dengan cap waktu*/
/* {yyyy} akan diganti dengan tahun empat digit*/
/* {yy} akan diganti dengan dua digit tahun*/
/* {mm} akan diganti dengan dua bulan*/
/* {dd} akan diganti dengan dua tanggal*/
/* {hh} akan diganti dengan dua jam*/
/* {II} akan diganti dengan dua digit*/
/* {ss} akan diganti dengan dua digit detik*/
/ * Karakter ilegal/: *? "<> | *//
/ * Silakan merujuk ke dokumen online untuk detailnya: fex.baidu.com/ueditor/#use-format_upload_filename *//
/* Grafiti unggah gambar item konfigurasi*/
"scrawlactionname": "unggahcrawl", /* nama tindakan grafiti unggahan* /
"ScrawlfieldName": "upfile", /* Kirimkan nama bentuk gambar* /
"ScrawlPathFormat": "/ueditor/php/unggah/gambar/{yyyy} {mm} {dd}/{time} {rand: 6}",/* Unggah jalur simpan, Anda dapat menyesuaikan jalur simpan dan format nama file*/
"ScrawlmaxSize": 2048000, / * Batas ukuran unggah, unit B * /
"Scrawlurlprefix": "", /* Prefix jalur akses gambar* /
"Scrawlinsertalign": "None",
/* Unggah alat tangkapan layar*//
"snapscreenactionName": "unggah", /* nama tindakan unggahan tangkapan layar* /
"SnapscreenPathFormat": "/uEditor/php/unggah/gambar/{yyyy} {mm} {dd}/{time} {rand: 6}",/* Unggah jalur simpan, Anda dapat menyesuaikan format nama simpan dan file file*/
"snapscreenurlprefix": "", /* Prefix jalur akses gambar* /
"snapscreeninsertalign": "none", /* float gambar dimasukkan* /
/* Konfigurasi gambar jarak jauh merangkak*/
"CatcherLocalDomain": ["127.0.0.1", "LocalHost", "img.baidu.com"],
"CatcherActionName": "CatchImage", /* Nama tindakan gambar jarak jauh dieksekusi* /
"CatcherFieldName": "Sumber", /* Daftar Gambar Formulir Gambar* /
"CatcherPathFormat": "/ueditor/php/unggah/gambar/{yyyy} {mm} {dd}/{time} {rand: 6}",/* Unggah jalur simpan, Anda dapat menyesuaikan jalur simpan dan format nama file*/
"CatcherUrlPrefix": "", /* Prefix jalur akses gambar* /
"CatchermaxSize": 2048000, / * Batas ukuran unggah, unit B * /
"CatcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Tampilan Format Gambar Crawl* /
/* Unggah konfigurasi video*/
"VideoActionName": "unggahvideo", /* Nama tindakan video yang diunggah* /
"videofieldname": "upfile", /* dikirimkan nama bentuk video* /
"videopathFormat": "/ueditor/php/unggah/video/{yyyy} {mm} {dd}/{time} {rand: 6}",/* Unggah jalur simpan, Anda dapat menyesuaikan jalur simpan dan format nama file*/
"videourlprefix": "", /* Video Access Path Prefix* /
"VideomaxSize": 102400000, / * Batas ukuran unggah, unit B, default 100MB * /
"VideoallowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".Ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* unggah tampilan format video* /
/* Unggah konfigurasi file*/
"FileActionName": "unggahanfile", /* controller, nama tindakan video yang diunggah* /
"FilefieldName": "upfile", /* Nama formulir file yang dikirimkan* /
"FilePathFormat": "/uEditor/php/unggah/file/{yyyy} {mm} {dd}/{time} {rand: 6}",/* Unggah jalur simpan, Anda dapat menyesuaikan jalur simpan dan format nama file*/
"FileUrlPrefix": "", /* Prefix jalur akses file* /
"FileMaxSize": 51200000, / * Batas ukuran unggah, unit B, default 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"
], /* Unggah tampilan format file* /
/* Daftar gambar di direktori yang ditentukan*/
"ImageManagerActionName": "ListImage", /* Nama tindakan manajemen gambar* /
"ImageManagerListPath": "/ueditor/php/unggah/gambar/",/* Tentukan direktori untuk mendaftar gambar*/
"ImageManagerListSize": 20, /* Jumlah file yang terdaftar setiap kali* /
"ImageManagerUrlPrefix": "", /* Prefix jalur akses gambar* /
"ImageManagerInSertAlign": "none", /* Metode mengambang gambar yang dimasukkan* /
"ImageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Jenis file yang terdaftar* /
/* Daftar file dalam direktori yang ditentukan*/
"FileManagerActionName": "ListFile", /* Nama tindakan manajemen file eksekusi* /
"FileManagerListPath": "/ueditor/php/unggah/file/",/* Tentukan direktori tempat file yang akan terdaftar*/
"FileManagerUrlPrefix": "", /* Prefix jalur akses file* /
"FileManagerListSize": 20, /* Jumlah file yang terdaftar setiap kali* /
"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"
] /* Jenis file yang terdaftar* /
}
Kemudian temukan file ueditor.config.js, temukan baris di bawah ini, dan ubah kutipan sesudahnya ke jalur latar Anda sendiri.
ServerUrl: URL + "PHP/Controller.php"
Misalnya:
ServerUrl: url + "ueditor"
Kita perlu menginstal paket berikut
Salinan kode adalah sebagai berikut:
"dependensi": {
"Body-Parser": "~ 1.0.0",
"Express": "~ 4.2.0",
"Ueditor": "^1.0.0"
}
Kode Latar Belakang:
Salinan kode adalah sebagai berikut:
var express = membutuhkan ('express'); var path = membutuhkan ('path');
var app = express ();
var ueditor = membutuhkan ("ueditor");
var bodyparser = membutuhkan ('body-parser');
app.use (bodyparser.urlencoded ({
Extended: Benar
}));
app.use (bodyparser.json ());
app.use ("/ueditor/ueditor", ueditor (path.join (__ dirname, 'public'), function (req, res, next) {
// Klien Ueditor memulai permintaan gambar unggahan
if (req.query.action === 'unggah') {
var foo = req.ueditor;
var imgname = req.ueditor.filename;
var img_url = '/gambar/ueditor/';
// Anda hanya perlu memasukkan alamat yang ingin Anda simpan. Tinggalkan operasi simpan ke Ueditor
res.ue_up (img_url);
}
// Klien memulai permintaan daftar gambar
lain if (req.query.action === 'listImage') {
var dir_url = '/gambar/ueditor/';
// Klien akan mencantumkan semua gambar di direktori dir_url
res.ue_list (dir_url);
}
// Klien memulai permintaan lain
kalau tidak {
res.setHeader ('tipe konten', 'aplikasi/json');
res.redirect ('/ueditor/nodeJs/config.json');
}
}));
Catatan: Di atas hanya menangani unggahan gambar. Untuk unggahan video, Anda dapat melihat API situs web resmi dan meniru mereka.
Di atas adalah seluruh konten mengintegrasikan editor Baidu UE dalam proyek NodeJS. Saya harap semua orang menyukainya.