ملخص:
أنا أقوم ببناء مدونتي الخاصة مؤخرًا. قد لا يكون لدي وقت لكتابة مدونة خلال هذه الفترة ، لكن لا يزال يتعين علي مشاركتها مع الجميع إذا كان لدي أشياء جيدة. يجب أن تحتوي مواقع المدونات على محرر لتحرير المقالات ، لذلك راجعت بعض المعلومات عبر الإنترنت. تعتمد خلفيات معظم المحررين على Java و PHP و ASP وما إلى ذلك ، ويستند عدد قليل منها على Node.js. أردت في الأصل استخدام Markdown لكتابة المقالات ، ولكن لم يكن من السهل ضبط الأسلوب ، لذلك اخترت أخيرًا ueditor من Baidu ، ولا يوجد رمز يعتمد على Node.js على موقعها الرسمي. لكن لحسن الحظ ، وجدت واحدة مماثلة على جيثب ، لذلك سأشاركها معك. إذا كنت تخطط لاستخدام 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" ، /* submited motor name* /
"ImageMaxSize": 2048000 ، / * حد التحميل ، الوحدة B * /
"ImagealLowFiles": [".png" ، ".jpg" ، ".jpeg" ، ".
"ImageCussionable": True ، / * سواء كان ذلك لضغط الصور ، يكون الافتراضي صحيحًا * /
"ImageCompressBorder": 1600 ، /* الحد الأقصى لضغط الصورة* /
"ImageInsertalign": "لا شيء" ، /* طريقة تعويم الصورة* / /
"ImageUrlprefix": "" ، /* PATH PATH PATH PREFIX* /
"ImagePathformat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}" ،/* تحميل مسار الحفظ ، يمكنك تخصيص تنسيق المسار وحفظ الملف*/
/* {filename} سيتم استبداله باسم الملف الأصلي. تحتاج إلى الانتباه إلى مشكلة الكود المشوهة الصيني في هذا التكوين*/
/* {Rand: 6} سيتم استبداله برقم عشوائي ، والرقم التالي هو عدد أجزاء الرقم العشوائي*/
/* {time} سيتم استبداله بخز الطابع الزمني*/
/* {yyyy} سيتم استبداله بسنة من أربعة أرقام*/
/* {yy} سيتم استبدال رقمين من السنة*/
/* {mm} سيتم استبداله بشهرين*/
/* {dd} سيتم استبدالها بتاريخ اثنين*/
/* {hh} سيتم استبداله بساعتين*/
/* {II} سيتم استبدال رقمين*/
سيتم استبدال/* {ss} برقمين من الثواني*/
/ * شخصيات غير قانونية/: *؟ "<> | */
/ * يرجى الرجوع إلى المستند عبر الإنترنت للحصول على التفاصيل: fex.baidu.com/ueditor/#use-format_upload_filename */
/* Graffiti Picture Upload Configuration عنصر*/
"scrawlactionName":
"ScrawlfieldName": "upfile" ، /* اسم نموذج الصورة الخاضع* /
"scrawlpathformat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}" ،/* تحميل مسار الحفظ ، يمكنك تخصيص تنسيق المسار والملف*/
"ScrawlMaxSize": 2048000 ، / * حد التحميل ، الوحدة B * /
"Scrawlurlprefix": "" ، /* PATH PATH PATH PREFIX* /
"Scrawlinsertalign": "لا شيء" ،
/* تحميل أداة لقطة الشاشة*/
"SnapscreenActionName": "TOPLOADIMAGE" ، /* اسم إجراء لقطة التحميل* /
"SnapscreenPathformat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}" ،/* تحميل مسار حفظ ، يمكنك تخصيص مسار حفظ وملف اسم الملف*/
"Snapscreenurlprefix": "" ، /* PATH PATH PATH PREFIX* /
"SnapscreenInsertalign": "لا شيء" ، /* إدراج صورة تعويم* /
/* زحف تكوين الصورة عن بُعد*/
"Catcherlocaldomain": ["127.0.0.1" ، "LocalHost" ، "img.baidu.com"] ،
"CountactionName": "Catchimage" ، /* يتم تنفيذ اسم الإجراء للصورة عن بُعد* /
"CatcherFieldName": "Source" ، /* submited list form name* /
"CatcherPathformat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}" ،/* تحميل مسار الحفظ ، يمكنك تخصيص تنسيق المسار والملف*/
"catcherurlprefix": "" ، /* PATH PATH PATH PROFIX* /
"CatcherMaxSize": 2048000 ، / * حد التحميل ، الوحدة B * /
"casherallowfiles": [".png" ، ".jpg" ، ".jpeg" ، ".
/* تحميل تكوين الفيديو*/
"VideoActionName": "UploadVideo" ، /* اسم إجراء الفيديو الذي تم تحميله* /
"videofieldName": "upfile" ، /* اسم نموذج الفيديو الخاضع* /
"videopathformat": "/ueditor/php/upload/video/{yyyy} {mm} {dd}/{time} {rand: 6}" ،/* قم بتحميل مسار حفظ ، يمكنك تخصيص تنسيق المسار والملف*/
"videourlprefix": "" ، /* Pideo Access Path Prefix* /
"videomaxSize": 102400000 ، / * حد التحميل ، الوحدة B ، الافتراضي 100 ميجابايت * /
"Videoallowfiles": [
".flv" ، ".swf" ، ".mkv" ، ".avi" ، ".rm" ، ".rmvb" ، ".mpeg" ، ".mpg"
".ogg" ، ".ogv" ، ".mov" ، ".wmv" ، ".mp4" ، ".webm" ، ".mp3" ، ".
/* تحميل تكوين الملف*/
"fileActionName": "UploadFile" ، /* Controller ، اسم إجراء الفيديو الذي تم تحميله* /
"FileFieldName": "upfile" ، /* اسم نموذج الملف المقدم* /
"filepathformat": "/ueditor/php/upload/file/{yyyy} {mm} {dd}/{time} {rand: 6}" ،/* تحميل مسار حفظ ، يمكنك تخصيص تنسيق المسار واسم الملف*/
"FileUrlprefix": "" ، /* ملف الوصول إلى الملف بادئة* /
"FileMaxSize": 51200000 ، / * حد التحميل ، الوحدة B ، الافتراضي 50 ميجابايت * /
"Fileallowfiles": [
".png" ، ".jpg" ، ".jpeg" ، ".gif" ، ".bmp" ،
".flv" ، ".swf" ، ".mkv" ، ".avi" ، ".rm" ، ".rmvb" ، ".mpeg" ، ".mpg"
".ogg" ، ".ogv" ، ".mov" ، ".wmv" ، ".mp4" ، "
".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": "" ، /* PATH PATH PATH PREFIX* /
"ImageManagerInsertalign": "None" ، /* Imaged Image Floating Method* /
"Imagemanagerallowfiles": [".png" ، ".jpg" ، ".jpeg" ، ".
/* قائمة الملفات في الدليل المحدد*/
"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" ، "
".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" ،
"Express": "~ 4.2.0" ،
"Ueditor": "^1.0.0"
}
رمز الخلفية:
نسخة الكود كما يلي:
var express = require ('express') ؛ var path = required ('path') ؛
var app = express () ؛
var ueditor = require ("ueditor") ؛
var bodyparser = يتطلب ('parser body') ؛
app.use (bodyparser.urlencoded ({
ممتد: صحيح
})) ؛
app.use (bodyparser.json ()) ؛
app.use ("/ueditor/ueditor" ، ueditor (path.join (__ dirname ، 'public') ، function (req ، res ، next) {
// ueditor client يبدأ طلب التحميل
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') ؛
}
})) ؛
ملاحظة: ما سبق يتولى فقط تحميل الصور. لتحميل الفيديو ، يمكنك عرض واجهة برمجة تطبيقات الموقع الرسمي وتقليدها.
ما سبق هو المحتوى الكامل لدمج محرر Baidu UE في مشروع NodeJS. أتمنى أن يحبها الجميع.