Summary:
Recently in building their own blog, this time may not have time to write a blog, but have a good thing to share with you. Blog site must have editorial editor of the article, so on the Internet to check some information. Most of the editor's background is based on Java, PHP, ASP, and so on, very few based on Node.js. Originally wanted to use Markdown to write articles, but the style is not good, so eventually chose Baidu's Ueditor, its official online and no based on Node.js code. But luckily I found a similar one on the GitHub, so I'll share it with you, if you're going to use Node.js to develop your blog, you can refer to it.
Download reference:
First to the Ueditor official online download code, I downloaded the development version of the 1.4.3php Utf-8 version, decompression after the file into the public directory, where I rename it to Ueditor. And then add these three lines to the head of the page you need
Copy Code code 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>
And then call the following code where you need it.
Copy Code code 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, and now we're going to change it to node.js based. First delete the unused PHP files, and then create a new folder Nodejs, and in this directory to create a new file Config.json, the contents are as follows:
Copy Code code as follows:
/* Front and back end communication related configuration, note only allowed to use multiple lines * *
{
/* Upload Picture configuration Item * *
"Imageactionname": "Uploadimage",/* Execute the action name of the uploaded image/*
"Imagefieldname": "Upfile", * * submitted picture form name * * *
"Imagemaxsize": 2048000,/* Upload size limit, Unit b * *
"Imageallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* Upload picture format display * *
' Imagecompressenable ': true,///compression of the picture, default is True/*
"Imagecompressborder": 1600,/* picture compression maximum edge limit * *
"Imageinsertalign": "None", * * Insert the picture floating mode * *
"Imageurlprefix": "",/* Image access Path prefix * *
"Imagepathformat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize the save path and file name format * *
/* {filename} will be replaced by the original filename, configure this need to pay attention to the Chinese garbled problem * *
/* {RAND:6} will replace the random number, followed by the number of random number of digits * *
/* {time} will be replaced with a timestamp * *
/* {YYYY} will be replaced by four-bit year * *
/* {YY} will be replaced by two-bit year * *
/* {mm} will be replaced by two-digit month * *
/* {DD} will be replaced with two-digit date.
* * {HH} will be replaced by two-hour/
/* {II} will be replaced by two-bit minutes */
/* {SS} will be replaced by two-bit seconds * *
/* Illegal characters \: *? "< > | */
* * Please look at the online document: fex.baidu.com/ueditor/#use-format_upload_filename * *
* * Graffiti Picture Upload configuration Item * *
"Scrawlactionname": "Uploadscrawl", * * Execute the name of the action to upload graffiti * *
"Scrawlfieldname": "Upfile", * * submitted picture form name * * *
"Scrawlpathformat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload 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",
/* screenshot tool upload/*
"Snapscreenactionname": "Uploadimage", * * Execute upload screenshot of the action name * *
"Snapscreenpathformat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize the save path and file name format * *
"Snapscreenurlprefix": "",/* Image access Path prefix * *
"Snapscreeninsertalign": "None", * * Insert the picture floating mode * *
/* Crawl Remote picture configuration * *
"Catcherlocaldomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"Catcheractionname": "Catchimage",/* Execute the action name of the crawl remote picture * *
"Catcherfieldname": "Source", * * submitted picture List Form name * *
"Catcherpathformat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload 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"],/* Grab picture format Display * *
/* Upload Video Configuration * *
"Videoactionname": "Uploadvideo",/* Execute the action name of the upload video * *
"Videofieldname": "Upfile", * * submitted video form name * * *
"Videopathformat": "/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload 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, execute the action name of the upload video * *
"Filefieldname": "Upfile", * * submitted document form name * *
"Filepathformat": "/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload 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 the pictures under the specified directory * *
"Imagemanageractionname": "ListImage",/* Execute Picture Management action name * *
"Imagemanagerlistpath": "/ueditor/php/upload/image/",/* Specify the directory to which you want to list the pictures * *
"Imagemanagerlistsize": 20,/* The number of documents per list * *
"Imagemanagerurlprefix": "",/* Image access Path prefix * *
"Imagemanagerinsertalign": "None", * * Insert the picture floating mode * *
"Imagemanagerallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". bmp"],/* listed file Types * *
/* List files in the specified directory/*
"Filemanageractionname": "ListFile",/* Execute File Management action name * *
"Filemanagerlistpath": "/ueditor/php/upload/file/",/* Specifies the directory to which you want to list files * *
"Filemanagerurlprefix": "",/* File access Path prefix * *
"Filemanagerlistsize": 20,/* The number of documents per list * *
"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"
]/* The file types listed * *
}
Then find the file Ueditor.config.js, find the line below and change the following quotes to your own background path.
Serverurl:url + "php/controller.php"
Like what:
Serverurl:url + "Ueditor"
We need to install the following packages
Copy Code code as follows:
"Dependencies": {
"Body-parser": "~1.0.0",
"Express": "~4.2.0",
"Ueditor": "^1.0.0"
}
Background code:
Copy Code code 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 upload picture request
if (req.query.action = = ' Uploadimage ') {
var foo = req.ueditor;
var imgname = Req.ueditor.filename;
var img_url = '/images/ueditor/';
You just enter the address you want to save. Save the operation to Ueditor to do
RES.UE_UP (Img_url);
}
Client initiates a picture list request
else if (req.query.action = = ' ListImage ') {
var dir_url = '/images/ueditor/';
The client lists all the pictures in the Dir_url directory
Res.ue_list (Dir_url);
}
Client initiates other request
else {
Res.setheader (' Content-type ', ' Application/json ');
Res.redirect ('/ueditor/nodejs/config.json ');
}
}));
Note: The above only processed pictures uploaded, video upload can reader network API, modeled on the development.
The above is in the NODEJS project integrated Baidu UE editor of the entire content, I hope you can enjoy.
