node.js menyepadukan editor_node.js Baidu UE

Ringkasan:
Saya sedang membina blog saya sendiri baru-baru ini mungkin saya tidak mempunyai masa untuk menulis blog untuk seketika, tetapi saya masih perlu berkongsi perkara yang baik dengan semua orang. Laman web blog mesti mempunyai editor untuk mengedit artikel, jadi saya menyemak beberapa maklumat dalam talian. Latar belakang kebanyakan editor adalah berdasarkan java, php, asp, dsb., dan sedikit berdasarkan node.js. Saya pada asalnya ingin menggunakan penurunan harga untuk menulis artikel, tetapi gayanya sukar untuk disesuaikan, jadi saya akhirnya memilih ueditor Baidu Tiada kod berdasarkan node.js di laman web rasminya. Tetapi nasib baik saya menemui yang serupa di github, jadi saya berkongsi dengan semua orang Jika anda bercadang untuk menggunakan node.js untuk membangunkan blog anda sendiri, anda boleh merujuknya.

Muat turun rujukan:

Mula-mula pergi ke laman web rasmi ueditor untuk memuat turun kod pembangunan versi 1.4.3php utf-8 Selepas membuka zip, letakkan fail itu di direktori awam. Kemudian tambahkan tiga baris ini

pada pengepala halaman yang anda perlukan

Salin kod Kod adalah seperti berikut:

var ue = UE.getEditor('editor');

Pengubahsuaian belakang:

Yang dimuat turun adalah berdasarkan php, sekarang mari tukar kepada satu berdasarkan node.js. Mula-mula padam fail php yang tidak digunakan, kemudian buat nodejs folder baharu dan buat fail config.json baharu dalam direktori ini dengan kandungan berikut:

Salin kod Kod adalah seperti berikut:

/* Konfigurasi yang berkaitan dengan komunikasi hadapan dan belakang, hanya komen berbilang baris dibenarkan */
{
/* Muat naik item konfigurasi imej */
"imageActionName": "uploadimage", /* Nama tindakan untuk melaksanakan imej yang dimuat naik */
"imageFieldName": "upfile", /* Nama borang imej yang diserahkan */
"imageMaxSize": 2048000, /* Had saiz muat naik, unit B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Muat naik paparan format imej */
"imageCompressEnable": benar, /* Sama ada untuk memampatkan imej, lalainya adalah benar */
"imageCompressBorder": 1600, /* Had sisi terpanjang pemampatan imej */
"imageInsertAlign": "tiada", /* Kaedah terapung imej yang dimasukkan */
"imageUrlPrefix": "", /* Awalan laluan akses imej */
"imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Muat naik laluan menyimpan, anda boleh menyesuaikan laluan menyimpan dan format nama fail * /
/ * {FILENAME} akan digantikan dengan nama fail asal Konfigurasikan keperluan ini untuk memberi perhatian kepada masalah kacau Cina * /
/ * {RAND: 6} akan digantikan dengan nombor rawak. /* {time} akan digantikan dengan cap masa */
/* {yyyy} akan digantikan dengan tahun empat digit */
/* {yy} akan digantikan dengan tahun dua digit */
/* {mm} akan digantikan dengan dua digit untuk bulan */
/* {dd} akan digantikan dengan tarikh dua digit */
/* {hh} akan digantikan dengan dua jam */
/* {ii} akan digantikan dengan dua digit minit */
/* {ss} akan digantikan dengan dua digit saat */
                                                                                                                                                /* g "; * ? /* Sila lihat dokumentasi dalam talian untuk butiran: fex.baidu.com/ueditor/#use-format_upload_filename */
/* Item konfigurasi muat naik imej Tuya */
"scrawlActionName": "uploadscrawl", /* Nama tindakan untuk memuat naik grafiti */
"scrawlFieldName": "upfile", /* Nama borang imej yang diserahkan */
"scrawlPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Muat naik laluan menyimpan, anda boleh menyesuaikan laluan menyimpan dan format nama fail * /
"scrawlMaxSize": 2048000, /* Had saiz muat naik, unit B */
"scrawlUrlPrefix": "", /* Awalan laluan akses imej */
"scrawlInsertAlign": "tiada",
/* Muat naik dengan alat tangkapan skrin */
"snapscreenActionName": "uploadimage", /* Nama tindakan untuk memuat naik tangkapan skrin */
"snapscreenPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Muat naik laluan menyimpan, anda boleh menyesuaikan laluan menyimpan dan format nama fail * /
"snapscreenUrlPrefix": "", /* Awalan laluan akses imej */
"snapscreenInsertAlign": "tiada", /* Kaedah terapung gambar yang disisipkan */
/* Tangkap konfigurasi imej jauh */
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage", /* Nama tindakan yang digunakan untuk menangkap imej jauh */
"catcherFieldName": "sumber", /* Nama borang senarai imej yang diserahkan */
"catcherPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Muat naik laluan menyimpan, anda boleh menyesuaikan laluan menyimpan dan format nama fail * /
"catcherUrlPrefix": "", /* Awalan laluan akses imej */
"catcherMaxSize": 2048000, /* Had saiz muat naik, unit B */
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Tangkap paparan format imej */
/* Muat naik konfigurasi video */
"videoActionName": "uploadvideo", /* Nama tindakan untuk melaksanakan muat naik video */
"videoFieldName": "upfile", /* Nama borang video yang diserahkan */
"videoPathFormat": "/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* Muat naik laluan menyimpan, anda boleh menyesuaikan laluan menyimpan dan format nama fail * /
"videoUrlPrefix": "", /* Awalan laluan akses video */
"videoMaxSize": 102400000, /* Had saiz muat naik, unit B, lalai 100MB */
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* Muat naik video Paparan format*/
/* Muat naik konfigurasi fail */
"fileActionName": "uploadfile", /* Dalam pengawal, nama tindakan untuk melaksanakan video yang dimuat naik */
"fileFieldName": "upfile", /* Nama borang fail yang diserahkan */
"filePathFormat": "/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* Muat naik laluan menyimpan, anda boleh menyesuaikan laluan menyimpan dan format nama fail * /
"fileUrlPrefix": "", /* Awalan laluan akses fail */
"fileMaxSize": 51200000, /* Had saiz muat naik, unit B, lalai 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"
], /* Muat naik paparan format fail */
/* Senaraikan imej dalam direktori yang ditentukan */
"imageManagerActionName": "listimage", /* Nama tindakan untuk melaksanakan pengurusan imej */
"imageManagerListPath": "/ueditor/php/upload/image/", /* Tentukan direktori untuk menyenaraikan imej */
"imageManagerListSize": 20, /* Bilangan fail disenaraikan setiap kali */
"imageManagerUrlPrefix": "", /* Awalan laluan akses imej */
"imageManagerInsertAlign": "tiada", /* Imej yang disisipkan diapungkan */
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Jenis fail tersenarai */
/* Senaraikan fail dalam direktori yang ditentukan */
"fileManagerActionName": "listfile", /* Nama tindakan untuk melaksanakan pengurusan fail */
"fileManagerListPath": "/ueditor/php/upload/file/", /* Tentukan direktori untuk menyenaraikan fail */
"fileManagerUrlPrefix": "", /* Awalan laluan akses fail */
"fileManagerListSize": 20, /* Bilangan fail disenaraikan 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 fail tersenarai */
}

Kemudian cari fail ueditor.config.js, cari baris berikut dan tukar petikan berikut kepada laluan latar belakang anda sendiri.

serverUrl: URL "php/controller.php"

Contohnya:

serverUrl: URL "ueditor"

Kami perlu memasang pakej berikut

Salin kod Kod adalah seperti berikut:

"pergantungan": {
"body-parser": "~1.0.0",
"express": "~4.2.0",
"ueditor": "^1.0.0"
}

Kod belakang:

Salin kod Kod adalah seperti berikut:

var express = memerlukan('express');var path = require('path');
var app = express();
var ueditor = memerlukan("ueditor");
var bodyParser = memerlukan('body-parser');
app.use(bodyParser.urlencoded({
dilanjutkan: benar
}));
app.use(bodyParser.json());
app.use("/ueditor/ueditor", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
// klien ueditor memulakan permintaan muat naik imej
Jika (req.query.action === 'uploadimage') {
      var foo = req.ueditor;
      var imgname = req.ueditor.filename;
      var img_url = '/images/ueditor/';
//Anda hanya perlu memasukkan alamat yang ingin anda simpan. Serahkan operasi menyimpan kepada ueditor
          res.ue_up(img_url); }
// Pelanggan memulakan permintaan senarai gambar
​ else if (req.query.action === 'listimage') {
        var dir_url = '/images/ueditor/';
                // Pelanggan akan menyenaraikan semua imej dalam direktori dir_url
           res.ue_list(dir_url); }
//Pelanggan memulakan permintaan lain
lain {
          res.setHeader('Content-Type', 'application/json');
          res.redirect('/ueditor/nodejs/config.json');
}
}));

Nota: Di atas hanya mengendalikan muat naik imej Untuk muat naik video, anda boleh melihat API tapak web rasmi dan mengikuti perkembangan.

Di atas adalah semua kandungan menyepadukan editor Baidu UE dalam projek nodejs saya harap anda akan menyukainya.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn