summary:
I’m building my own blog recently. I may not have time to write a blog during this period, but I still have to share it with everyone if I have good things. Blog websites must have an editor for editing articles, so I checked some information online. Most editors' backgrounds are based on java, php, asp, etc., and few are based on node.js. I originally wanted to use markdown to write articles, but the style was not easy to adjust, so I finally chose Baidu's ueditor, and there is no code based on node.js on its official website. But luckily, I found a similar one on github, so I will share it with you. If you plan to use node.js to develop your own blog, you can refer to it.
Download Quote:
First, I downloaded the code on the official website of ueditor. I downloaded the development version 1.4.3php utf-8 version. After decompressing, put the file in the public directory. Here I rename it to ueditor. Then add these three lines to the head of the page you need
The code copy is as follows:
<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>
Then call the following code where needed
The code copy is as follows:
<script id="editor" type="text/plain"></script>
<script>
var ue = UE.getEditor('editor');
</script>
Backend modification:
The downloaded one is based on php, and now we will change it to node.js based on. First, delete the unnecessary php file, then create a new folder nodejs, and create a new file config.json in this directory, the content is as follows:
The code copy is as follows:
/* For front-end communication related configurations, comments only allow multi-line methods*/
{
/* Upload image configuration item*/
"imageActionName": "uploadimage", /* The action name of the upload image*/
"imageFieldName": "upfile", /* Submited image form name*/
"imageMaxSize": 2048000, /* Upload size limit, unit B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Upload image format to display*/
"imageCompressEnable": true, /* Whether to compress images, the default is true */
"imageCompressBorder": 1600, /* The maximum edge limit for image compression*/
"imageInsertAlign": "none", /* Inserted image float method*/
"imageUrlPrefix": "", /* Image access path prefix*/
"imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Upload the save path, you can customize the save path and file name format*/
/* {filename} will be replaced with the original file name. You need to pay attention to the problem of Chinese garbled code in this configuration*/
/* {rand:6} will be replaced with a random number, and the following number is the number of bits of the random number*/
/* {time} will be replaced with timestamp*/
/* {yyyy} will be replaced with four-digit year*/
/* {yy} will be replaced with two digits of year*/
/* {mm} will be replaced with two months*/
/* {dd} will be replaced with two dates*/
/* {hh} will be replaced with two hours*/
/* {ii} will be replaced with two digits*/
/* {ss} will be replaced with two digits of seconds*/
/* Illegal Characters/ : * ? " < > | */
/* Please refer to the online document for details: fex.baidu.com/ueditor/#use-format_upload_filename */
/* Graffiti picture upload configuration item*/
"scrawlActionName": "uploadscrawl", /* The action name of the uploading graffiti*/
"scrawlFieldName": "upfile", /* Submited image form name*/
"scrawlPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Upload the save path, you can customize the save path and file name format*/
"scrawlMaxSize": 2048000, /* Upload size limit, unit B */
"scrawlUrlPrefix": "", /* Image access path prefix*/
"scrawlInsertAlign": "none",
/* Upload the screenshot tool*/
"snapscreenActionName": "uploadimage", /* The action name of the upload screenshot*/
"snapscreenPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Upload the save path, you can customize the save path and file name format*/
"snapscreenUrlPrefix": "", /* Image access path prefix*/
"snapscreenInsertAlign": "none", /* Inserted picture float*/
/* Crawl remote image configuration*/
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage", /* The action name of the remote image is executed*/
"catcherFieldName": "source", /* Submited image list form name*/
"catcherPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Upload the save path, you can customize the save path and file name format*/
"catcherUrlPrefix": "", /* Image access path prefix*/
"catcherMaxSize": 2048000, /* Upload size limit, unit B */
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Crawl image format display*/
/* Upload video configuration*/
"videoActionName": "uploadvideo", /* The action name of the uploaded video*/
"videoFieldName": "upfile", /* Submited video form name*/
"videoPathFormat": "/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* Upload the save path, you can customize the save path and file name format*/
"videoUrlPrefix": "", /* Video access path prefix*/
"videoMaxSize": 102400000, /* Upload size limit, unit B, default 100MB */
"videoAllowFiles": [
".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* Upload video format display*/
/* Upload file configuration*/
"fileActionName": "uploadfile", /* controller, the action name of the uploaded video*/
"fileFieldName": "upfile", /* Submitted file form name*/
"filePathFormat": "/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* Upload the save path, you can customize the save path and file name format*/
"fileUrlPrefix": "", /* File access path prefix*/
"fileMaxSize": 51200000, /* Upload size limit, 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"
], /* Upload file format display*/
/* List pictures in the specified directory*/
"imageManagerActionName": "listimage", /* The action name of the image management*/
"imageManagerListPath": "/ueditor/php/upload/image/", /* Specify the directory to list the image*/
"imageManagerListSize": 20, /* Number of files listed each time*/
"imageManagerUrlPrefix": "", /* Image access path prefix*/
"imageManagerInsertAlign": "none", /* Inserted image floating method*/
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Listed file types*/
/* List files in the specified directory*/
"fileManagerActionName": "listfile", /* The action name of the execution file management*/
"fileManagerListPath": "/ueditor/php/upload/file/", /* Specify the directory where the file to be listed*/
"fileManagerUrlPrefix": "", /* File access path prefix*/
"fileManagerListSize": 20, /* Number of files listed each time*/
"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"
] /* File types listed*/
}
Then find the file ueditor.config.js, find the line below, and change the quotes afterwards to your own background path.
serverUrl: URL + "php/controller.php"
for example:
serverUrl: URL + "ueditor"
We need to install the following packages
The code copy is as follows:
"dependencies": {
"body-parser": "~1.0.0",
"express": "~4.2.0",
"ueditor": "^1.0.0"
}
Background code:
The code copy is as follows:
var express = require('express');var path = require('path');
var app = express();
var ueditor = require("ueditor");
var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
app.use("/ueditor/ueditor", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
// ueditor client initiates an upload image request
if (req.query.action === 'uploadimage') {
var foo = req.ueditor;
var imgname = req.ueditor.filename;
var img_url = '/images/ueditor/';
//You just need to enter the address you want to save. Leave the save operation to ueditor
res.ue_up(img_url);
}
// The client initiates a picture list request
else if (req.query.action === 'listimage') {
var dir_url = '/images/ueditor/';
// The client will list all pictures in the dir_url directory
res.ue_list(dir_url);
}
// The client initiates other requests
else {
res.setHeader('Content-Type', 'application/json');
res.redirect('/ueditor/nodejs/config.json');
}
}));
Note: The above only handles the upload of pictures. For video uploads, you can view the official website API and imitate them.
The above is the entire content of integrating Baidu UE editor in the nodejs project. I hope everyone likes it.