สรุป:
ฉันกำลังสร้างบล็อกของตัวเองเมื่อเร็ว ๆ นี้ ฉันอาจไม่มีเวลาเขียนบล็อกในช่วงเวลานี้ แต่ฉันยังต้องแบ่งปันกับทุกคนถ้าฉันมีสิ่งที่ดี เว็บไซต์บล็อกต้องมีตัวแก้ไขสำหรับการแก้ไขบทความดังนั้นฉันจึงตรวจสอบข้อมูลออนไลน์ ภูมิหลังของบรรณาธิการส่วนใหญ่ขึ้นอยู่กับ Java, PHP, ASP และอื่น ๆ ตอนแรกฉันต้องการใช้ Markdown เพื่อเขียนบทความ แต่สไตล์นั้นไม่ง่ายที่จะปรับดังนั้นในที่สุดฉันก็เลือก Ueditor ของ Baidu และไม่มีรหัสที่ใช้ Node.js บนเว็บไซต์ทางการ แต่โชคดีที่ฉันพบสิ่งที่คล้ายกันใน GitHub ดังนั้นฉันจะแบ่งปันกับคุณ หากคุณวางแผนที่จะใช้ node.js เพื่อพัฒนาบล็อกของคุณเองคุณสามารถอ้างถึงได้
ดาวน์โหลดใบเสนอราคา:
ก่อนอื่นฉันดาวน์โหลดรหัสบนเว็บไซต์ทางการของ Ueditor ฉันดาวน์โหลดเวอร์ชันการพัฒนาเวอร์ชัน 1.4.3php UTF-8 หลังจากการบีบอัดให้วางไฟล์ในไดเรกทอรีสาธารณะ ที่นี่ฉันเปลี่ยนชื่อเป็น Ueditor จากนั้นเพิ่มสามบรรทัดเหล่านี้ลงในหัวของหน้าเว็บที่คุณต้องการ
การคัดลอกรหัสมีดังนี้:
<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>
<script>
var ue = ue.getEditor ('editor');
</script>
การดัดแปลงแบ็กเอนด์:
อันที่ดาวน์โหลดมาจาก PHP และตอนนี้เราจะเปลี่ยนเป็น node.js ตาม ก่อนอื่นให้ลบไฟล์ PHP ที่ไม่จำเป็นจากนั้นสร้างโฟลเดอร์ใหม่ nodeJs และสร้างไฟล์ config.json ใหม่ในไดเรกทอรีนี้เนื้อหามีดังนี้:
การคัดลอกรหัสมีดังนี้:
/* สำหรับการกำหนดค่าที่เกี่ยวข้องกับการสื่อสารส่วนหน้าความคิดเห็นอนุญาตให้ใช้วิธีการหลายบรรทัดเท่านั้น*/
-
/* อัปโหลดรายการการกำหนดค่ารูปภาพ*/
"imageactionName": "UploadImage", /* ชื่อการกระทำของอัพโหลดอิมเมจ* / /
"ImageFieldName": "UpFile", /* ชื่อฟอร์มภาพที่ส่งมา* / /
"ImageMaxSize": 2048000, / * ขีด จำกัด ขนาดอัปโหลด, หน่วย B * /
"ImageLlowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* อัปโหลดรูปแบบภาพเพื่อแสดง* /
"ImageCompressenable": จริง / * ไม่ว่าจะบีบอัดภาพค่าเริ่มต้นเป็นจริง * / /
"ImageCompressBorder": 1600, /* ขีด จำกัด ขอบสูงสุดสำหรับการบีบอัดภาพ* / /
"ImageInserTalign": "ไม่มี", /* แทรกภาพรูปภาพลอยตัว* / /
"ImageUrlprefix": "", /* คำนำหน้าการเข้าถึงภาพ* / /
"imagepathformat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{เวลา} {rand: 6}",/* อัปโหลดเส้นทางบันทึกคุณสามารถปรับแต่งรูปแบบเส้นทางบันทึกและชื่อไฟล์*//////
/* {ชื่อไฟล์} จะถูกแทนที่ด้วยชื่อไฟล์ต้นฉบับ คุณต้องให้ความสนใจกับปัญหาของรหัสภาษาจีนที่อ่านไม่ออกในการกำหนดค่านี้*/
/* {rand: 6} จะถูกแทนที่ด้วยหมายเลขสุ่มและหมายเลขต่อไปนี้คือจำนวนบิตของหมายเลขสุ่ม*/
/* {เวลา} จะถูกแทนที่ด้วยการประทับเวลา*/
/* {yyyy} จะถูกแทนที่ด้วยสี่หลักปี*//
/* {yy} จะถูกแทนที่ด้วยสองหลักของปี*/
/* {mm} จะถูกแทนที่ด้วยสองเดือน*/
/* {dd} จะถูกแทนที่ด้วยสองวัน*/
/* {hh} จะถูกแทนที่ด้วยสองชั่วโมง*/
/* {ii} จะถูกแทนที่ด้วยสองหลัก*/
/* {SS} จะถูกแทนที่ด้วยสองหลักของวินาที*//
/ * อักขระที่ผิดกฎหมาย/: *? -
/ * โปรดดูเอกสารออนไลน์สำหรับรายละเอียด: fex.baidu.com/ueditor/#use-format_upload_filename */
/* รายการกราฟฟิตีอัพโหลดรายการกำหนดค่า*//
"ScrawlactionName": "UploadScrawl", /* ชื่อการกระทำของกราฟฟิตีที่อัปโหลด* / /
"ScrawlfieldName": "upfile", /* ชื่อฟอร์มภาพที่ส่งมา* / /
"ScrawlPathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{เวลา} {rand: 6}",/* อัปโหลดเส้นทางบันทึกคุณสามารถปรับแต่งรูปแบบเส้นทางบันทึกและชื่อไฟล์*///////
"Scrawlmaxsize": 2048000, / * ขีด จำกัด ขนาดอัปโหลด, หน่วย B * /
"ScrawlUrlprefix": "", /* คำนำหน้าการเข้าถึงรูปภาพ PATH PATH* / /
"Scrawlinsertalign": "ไม่มี"
/* อัปโหลดเครื่องมือสกรีนช็อต*//
"snapscreenactionName": "UploadImage", /* ชื่อการกระทำของภาพหน้าจออัปโหลด* / /
"snapscreenpathformat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{เวลา} {rand: 6}",/* อัปโหลดเส้นทางบันทึก
"snapscreenurlprefix": "", /* คำนำหน้าเส้นทางการเข้าถึงรูปภาพ* / /
"snapscreeninsertalign": "ไม่มี", /* แทรกรูปภาพลอย* / /
/* การกำหนดค่าการกำหนดค่ารูปภาพระยะไกล*//
"catcherlocaldomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage", /* ชื่อการกระทำของภาพระยะไกลถูกเรียกใช้* / /
"catcherfieldname": "แหล่งที่มา", /* ชื่อรายการรูปภาพที่ส่งมาชื่อ* / /
"catcherPathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{เวลา} {rand: 6}",/* อัปโหลดเส้นทางบันทึกคุณสามารถปรับแต่งรูปแบบเส้นทางบันทึกและชื่อไฟล์*///////
"catcherurlprefix": "", /* คำนำหน้าการเข้าถึงรูปภาพ* / /
"catchermaxsize": 2048000, / * ขีด จำกัด ขนาดอัปโหลด, หน่วย B * /
"catcherallowfiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* รูปแบบภาพการรวบรวมข้อมูลแสดงผล* / /
/* อัปโหลดการกำหนดค่าวิดีโอ*/
"VideoactionName": "UploadVideo", /* ชื่อการกระทำของวิดีโอที่อัปโหลด* / /
"videofieldName": "upfile", /* ชื่อฟอร์มวิดีโอที่ส่ง* / /
"videopathformat": "/ueditor/php/upload/video/{yyyy} {mm} {dd}/{เวลา} {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}/{เวลา} {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": "ไม่มี", /* แทรกภาพที่ลอยอยู่ในภาพ* / /
"imageManagerallowfiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* ประเภทไฟล์ที่แสดงรายการ* / /
/* รายการไฟล์ในไดเรกทอรีที่ระบุ*/
"fileManagerActionName": "ListFile", /* ชื่อการดำเนินการของการจัดการไฟล์การดำเนินการ* / /
"FileManagerListPath": "/ueditor/php/upload/file/",/* ระบุไดเรกทอรีที่ไฟล์ที่จะแสดงรายการ*/
"fileManagerUrlprefix": "", /* คำนำหน้าการเข้าถึงไฟล์ PATH PATH* / /
"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"
"Express": "~ 4.2.0"
"Ueditor": "^1.0.0"
-
รหัสพื้นหลัง:
การคัดลอกรหัสมีดังนี้:
var express = ต้องการ ('express'); var path = ต้องการ ('path');
var app = express ();
var ueditor = ต้องการ ("ueditor");
var bodyparser = ต้องการ ('body-parser');
app.use (bodyparser.urlencoded ({
ขยาย: จริง
-
app.use (bodyparser.json ());
app.use ("/ueditor/ueditor", ueditor (path.join (__ dirname, 'สาธารณะ'), ฟังก์ชั่น (req, res, ถัดไป) {
// ไคลเอนต์ 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);
-
// ลูกค้าเริ่มคำขอรายการรูปภาพ
อื่นถ้า (req.query.action === 'listimage') {
var dir_url = '/images/ueditor/';
// ไคลเอนต์จะแสดงรายการรูปภาพทั้งหมดในไดเรกทอรี dir_url
res.ue_list (dir_url);
-
// ลูกค้าเริ่มคำขออื่น ๆ
อื่น {
Res.SetheAder ('เนื้อหาประเภท', 'Application/JSON');
res.redirect ('/ueditor/nodejs/config.json');
-
-
หมายเหตุ: ข้างต้นจัดการการอัปโหลดรูปภาพเท่านั้น สำหรับการอัปโหลดวิดีโอคุณสามารถดูเว็บไซต์อย่างเป็นทางการ API และเลียนแบบพวกเขา
ข้างต้นเป็นเนื้อหาทั้งหมดของการรวมตัวแก้ไข Baidu UE ในโครงการ NodeJS ฉันหวังว่าทุกคนจะชอบมัน