node.js integrates Baidu UE editor_node.js

Summary:
I am building my own blog recently. I may not have time to blog for a while, but I still have to share the good things with everyone. A blog website must have an editor for editing articles, so I checked some information online. The background of most editors is 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 difficult to adjust, so I finally chose Baidu's ueditor. 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 reference:

First go to the ueditor official website to download the code. I downloaded the development version 1.4.3php utf-8 version. After unzipping, put the file in the public directory. Here I renamed it to ueditor. Then add these three lines

to the header of the page you need

Copy code The code is as follows:

Then call the following code where needed

Copy code The code is as follows:

<script><br> var ue = UE.getEditor('editor');<br> </script>

Backend modification:

The downloaded one is based on php, now let’s change it to one based on node.js. First delete the unused php files, then create a new folder nodejs, and create a new file config.json in this directory with the following content:

Copy code The code is as follows:

/* Configuration related to front-end and back-end communication, only multi-line comments are allowed */
{
/* Upload image configuration items */
"imageActionName": "uploadimage", /* execute the action name to upload the image */
"imageFieldName": "upfile", /* Submitted image form name */
"imageMaxSize": 2048000, /* Upload size limit, unit B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Upload image format display */
"imageCompressEnable": true, /* Whether to compress images, the default is true */
"imageCompressBorder": 1600, /* Image compression longest side limit */
"imageInsertAlign": "none", /* The inserted image floating method */
"imageUrlPrefix": "", /* Image access path prefix */
"imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Upload saving path, you can customize the saving path and file name format* /
/ * {FILENAME} will be replaced with the original file name. Configure this need to pay attention to the Chinese garbled problem * /
/ * {RAND: 6} will be replaced with random numbers. /* {time} will be replaced with a timestamp */
/* {yyyy} will be replaced with a four-digit year */
/* {yy} will be replaced with a two-digit year */
                                                                                                                                                                                                                                                            been been been            been been been been been been. /* {dd} will be replaced with a two-digit date */
/* {hh} will be replaced with two hours */
/* {ii} will be replaced with two-digit minutes */
/* {ss} will be replaced with two digit seconds */
                                                                                      /* Illegal characters: * ? " < > | */
/* Please see the online documentation for details: fex.baidu.com/ueditor/#use-format_upload_filename */
/* Tuya image upload configuration items */
"scrawlActionName": "uploadscrawl", /* The action name for uploading graffiti */
"scrawlFieldName": "upfile", /* Submitted image form name */
"scrawlPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Upload saving path, you can customize the saving path and file name format* /
"scrawlMaxSize": 2048000, /* Upload size limit, unit B */
"scrawlUrlPrefix": "", /* Image access path prefix */
"scrawlInsertAlign": "none",
/* Upload with screenshot tool */
"snapscreenActionName": "uploadimage", /* The action name for uploading screenshots */
"snapscreenPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Upload saving path, you can customize the saving path and file name format* /
"snapscreenUrlPrefix": "", /* Image access path prefix */
"snapscreenInsertAlign": "none", /* Inserted picture floating method */
/* Capture remote image configuration */
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage", /* The action name used to capture remote images */
"catcherFieldName": "source", /* Submitted image list form name */
"catcherPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* Upload saving path, you can customize the saving path and file name format* /
"catcherUrlPrefix": "", /* Image access path prefix */
"catcherMaxSize": 2048000, /* Upload size limit, unit B */
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Capture image format display */
/* Upload video configuration */
"videoActionName": "uploadvideo", /* The action name to execute the upload video */
"videoFieldName": "upfile", /* Submitted video form name */
"videoPathFormat": "/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* Upload saving path, you can customize the saving 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", /* In the controller, the action name for executing the uploaded video */
"fileFieldName": "upfile", /* Submitted file form name */
"filePathFormat": "/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* Upload saving path, you can customize the saving 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 images in the specified directory */
"imageManagerActionName": "listimage", /* Action name to perform image management */
"imageManagerListPath": "/ueditor/php/upload/image/", /* Specify the directory to list images */
"imageManagerListSize": 20, /* Number of files listed each time */
"imageManagerUrlPrefix": "", /* Image access path prefix */
"imageManagerInsertAlign": "none", /* The inserted image is floated */
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* Listed file types */
/* List files in the specified directory */
"fileManagerActionName": "listfile", /* Action name for executing file management */
"fileManagerListPath": "/ueditor/php/upload/file/", /* Specify the directory to list files */
"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"
] /* Listed file types */
}

Then find the file ueditor.config.js, find the following line, and change the following quotes to your own background path.

serverUrl: URL "php/controller.php"

For example:

serverUrl: URL "ueditor"

We need to install the following packages

Copy code The code is as follows:

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

Backend code:

Copy code The code 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 image upload 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 saving 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 images 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 image uploading. For video uploading, you can see the official website API and follow the development.

The above is all the content of integrating Baidu UE editor in nodejs project. I hope you will like it.