Node. js integrates Baidu UE editor and node. jsue Editor

Node. js integrates Baidu UE editor and node. jsue Editor

Abstract:
I recently set up my own blog. I may not be able to write a blog for a while, but I still want to share some good things with you. Blog websites must have an editor for editing articles, so they checked some information online. The background of most Editors is based on java, php, asp, and so on, and few are based on node. js. Originally, I wanted to use markdown to write articles, but the style was not well tuned. So I finally chose Baidu's ueditor. its official website does not have code based on node. js. Fortunately, 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, 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. decompress the package and place the file in the public directory. Here I rename it as ueditor. Add these three lines to the header of the page you need.

Copy codeThe Code is as follows:
<Script type = "text/javascript" charset = "UTF-8" src = "/ueditor. config. js"> </script>
<Script type = "text/javascript" charset = "UTF-8" src = "/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 as needed.

Copy codeThe Code is as follows:
<Script id = "editor" type = "text/plain" style = "width: 1000px; height: 500px;"> </script>
<Script>
Var ue = UE. getEditor ('editor ');
</Script>

Background modification:

The download is based on php. Now we will change it to based on node. js. Delete unnecessary PHP files, create a folder named nodejs, and create a file named config. json in this directory. The content is as follows:

Copy codeThe Code is as follows:
/* Configurations related to frontend and backend communication. Only the multiline mode is allowed for comments */
{
/* Upload image configuration items */
"ImageActionName": "uploadimage",/* Name of the action for uploading images */
"ImageFieldName": "upfile",/* Name of the submitted image form */
"ImageMaxSize": 2048000,/* upload size limit, unit: B */
"ImageAllowFiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* display uploaded images */
"ImageCompressEnable": true,/* Whether to compress the image. The default value is true */
"ImageCompressBorder": 1600,/* maximum side limit for Image Compression */
"ImageInsertAlign": "none",/* floating mode of the inserted image */
"ImageUrlPrefix": "",/* prefix of the image access path */
"ImagePathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */
/* {Filename} is replaced with the original file name. Chinese garbled characters are required for configuration */
/* {Rand: 6} is replaced with a random number, followed by the number of digits of the random number */
/* {Time} is replaced with the timestamp */
/* {Yyyy} is replaced with a four-digit year */
/* {Yy} is replaced with two years */
/* {Mm} is replaced with two months */
/* {Dd} is replaced with two dates */
/* {Hh} will be replaced with two hours */
/* {Ii} is replaced with two minutes */
/* {Ss} is replaced with two seconds */
/* Invalid character \:*? "<> | */
/* For more information, see the online documentation fex.baidu.com/ueditor/#use-format_upload_filename */
/* Configuration items for uploading graffiti images */
"ScrawlActionName": "uploadscrawl",/* Name of the action for uploading graffiti */
"ScrawlFieldName": "upfile",/* Name of the submitted image form */
"ScrawlPathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */
"ScrawlMaxSize": 2048000,/* upload size limit, unit: B */
"ScrawlUrlPrefix": "",/* prefix of the image access path */
"ScrawlInsertAlign": "none ",
/* Tool upload */
"SnapscreenActionName": "uploadimage",/* Name of the uploaded action */
"SnapscreenPathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */
"SnapscreenUrlPrefix": "",/* prefix of the image access path */
"SnapscreenInsertAlign": "none",/* floating mode of the inserted image */
/* Capture remote image configuration */
"CatcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"CatcherActionName": "catchimage",/* Name of the action for capturing a remote image */
"CatcherFieldName": "source",/* Name of the submitted image list form */
"CatcherPathFormat": "/ueditor/php/upload/image/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */
"CatcherUrlPrefix": "",/* prefix of the image access path */
"CatcherMaxSize": 2048000,/* upload size limit, unit: B */
"CatcherAllowFiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* capture image format display */
/* Upload video configuration */
"VideoActionName": "uploadvideo",/* Name of the action for uploading a video */
"VideoFieldName": "upfile",/* Name of the submitted video form */
"VideoPathFormat": "/ueditor/php/upload/video/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */
"VideoUrlPrefix": "",/* prefix of the video access path */
"VideoMaxSize": 102400000,/* maximum upload size. Unit: B. Default Value: 100 MB */
"VideoAllowFiles ":[
". Flv", ". swf", ". mkv", ". avi", ". rm", ". rmvb", ". mpeg", ". mpg ",
". Ogg ",". ogv ",". mov ",". wmv ",". mp4 ",". webm ",". mp3 ",". wav ",". mid "],/* display the uploaded video format */
/* Upload File configuration */
"FileActionName": "uploadfile",/* in the controller, execute the video upload action name */
"FileFieldName": "upfile",/* Name of the submitted file form */
"FilePathFormat": "/ueditor/php/upload/file/{yyyy} {mm} {dd}/{time} {rand: 6}",/* upload and save path, you can customize the storage path and file name format */
"FileUrlPrefix": "",/* file access path prefix */
"FileMaxSize": 51200000,/* maximum upload size. Unit: B. Default Value: 50 MB */
"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"
],/* Display the uploaded file format */
/* List images in the specified directory */
"ImageManagerActionName": "listimage",/* Name of the action for performing image management */
"ImageManagerListPath": "/ueditor/php/upload/image/",/* specify the directory for listing images */
"ImageManagerListSize": 20,/* Number of files listed each time */
"ImageManagerUrlPrefix": "",/* prefix of the image access path */
"ImageManagerInsertAlign": "none",/* floating mode of the inserted image */
"ImageManagerAllowFiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* file types listed */
/* List objects in the specified directory */
"FileManagerActionName": "listfile",/* Name of the action for executing file management */
"FileManagerListPath": "/ueditor/php/upload/file/",/* specify the directory of 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"
]/* Listed file types */
}

Find the ueditor. config. js file, find the following line, and change the quotation marks to your own background path.

ServerUrl: URL + "php/controller. php"

For example:

ServerUrl: URL + "ueditor"

We need to install the following packages

Copy codeThe Code is as follows:
"Dependencies ":{
"Body-parser ":"~ 1.0.0 ",
"Express ":"~ 4.2.0 ",
"Ueditor": "^ 1.0.0"
}

Background code:

Copy codeThe 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 (path. join (_ dirname, 'public'), function (req, res, next ){
// Ueditor client initiates an Image Upload request
If (req. query. action = 'uploadimage '){
Var foo = req. ueditor;
Var imgname = req. ueditor. filename;
Var img_url = '/images/ueditor /';
// Enter the address to save. Save the operation to ueditor.
Res. ue_up (img_url );
}
// The client initiates an image 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 );
}
// Initiate other requests from the client
Else {
Res. setHeader ('content-type', 'application/json ');
Res. redirect ('/ueditor/nodejs/config. json ');
}
}));

Note: The above only processes image uploads. For video uploads, you can refer to the official website API for development.

The above is all the content of the hundred-degree UE editor integrated in the nodejs project. I hope you will like it.