node. js Rich Text Editor

Summary:

Recently in the construction of their own blog, this period of time may not have time to write a blog, but there are good things to share to everyone. Blog site must have editorial editor, so on the Internet to check some information. Most of the background of the editor is based on Java, PHP, ASP, and so on, rarely based on node. js. Originally wanted to use Markdown to write articles, but the style is not good, so the final choice of Baidu Ueditor, its official web site is not based on node. JS code. But luckily I found a similar one on GitHub, so I'll share it with you, if you're going to use node. js to develop your own blog, you can refer to it.

Download references:

First to ueditor official download code, I downloaded the development version of the 1.4.3php Utf-8 version, unzip the file into the public directory, where I renamed it to Ueditor. and add these three lines to the head of the page you need.

<Scripttype= "Text/javascript"CharSet= "Utf-8"src= "/ueditor/ueditor.config.js"></Script><Scripttype= "Text/javascript"CharSet= "Utf-8"src= "/ueditor/ueditor.all.min.js"> </Script><Scripttype= "Text/javascript"CharSet= "Utf-8"src= "/ueditor/lang/zh-cn/zh-cn.js"> </Script>

Then call the following code where needed

<ScriptID= "Editor"type= "Text/plain"style= "width:1000px;height:500px;"></Script><Script>    varUE=Ue.geteditor ('Editor');</Script>

Background modification:

The download is based on PHP, and now we're going to change it to node. js. First remove 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:

/* Front-end communication-related configuration, comments allow only multiline */{/* Upload picture Configuration item */"Imageactionname": "Uploadimage",/* Perform the action name of the upload picture */"Imagefieldna Me ":" Upfile ",/* submitted picture form name */" imagemaxsize ": 2048000,/* Upload size limit, Unit B */" imageallowfiles ": [". png ",". jpg ",". jpeg " , ". gif", ". bmp"],/* Upload picture format display */"imagecompressenable": true,/* whether to compress the picture, the default is True */"Imagecompressborder": 1600,/* Picture compression longest edge limit */"imageinsertalign": "None",/* Insert Picture floating way */"Imageurlprefix": "",/* Image access Path prefix */"Imagepathformat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* Upload save path, you can customize save path and file name format */*                                {filename} will be replaced with the original file name, configure this to pay attention to the Chinese garbled problem */* * {rand:6} will be replaced by random number, the following number is the number of bits of random number */ /* {time} will be replaced with timestamp */* * {YYYY} will be replaced by four-bit year */*                            {yy} will be replaced with a two-digit year */* * {mm} will be replaced with two-digit month */* * * DD} will be replaced by two-bit date */    /* {HH} will be replaced by two-bit hours *///////////////////////////* will replace two-bit seconds */* Illegal characters \: *?  "< > |    */* with body to see the online document: fex.baidu.com/ueditor/#use-format_upload_filename */* Doodle Picture Upload configuration item */ "Scrawlactionname": "Uploadscrawl",/* do upload graffiti action name */"Scrawlfieldname": "Upfile",/* submitted picture form name */"SCRAWLPATHFO Rmat ":"/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6} ",/* Upload save path, you can customize save path and file name format */" Scrawlmaxsize ": 2048000,/* Upload size limit, Unit B */"Scrawlurlprefix": "",/* Image access Path prefix */"scrawlinsertalign": "None",/* Tool upload */"snaps Creenactionname ":" Uploadimage ",/* Perform the uploaded action name */" Snapscreenpathformat ":"/ueditor/php/upload/image/{yyyy}{mm}{  Dd}/{time}{rand:6} ",/* Upload save path, you can customize save path and file name format */" Snapscreenurlprefix ":" ",/* Image access Path prefix */" snapscreeninsertalign ": "None",/* * Insert Picture floating way */* Crawl remote Picture configuration */"Catcherlocaldomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catch Eractionname ":" Catchimage ",/* Perform the action name of the FETCH remote picture */" Catcherfieldname ":" Source ",/* Submit Picture List Form name */" catcherpathfor Mat ":"/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6} ",/* Upload save path, you can customize save path and file name format */" Catcherurlprefix ":" ",/* Image access Path prefix */" catchermaxsize ": 2048000,/* Upload size limit, Unit B */" catcherallowfiles ": [". png ",". jpg ",". jpeg ",". gif ",". bmp "],/* Fetch image format display */* upload video with Set */"Videoactionname": "Uploadvideo",/* Perform the action name of the uploaded video */"Videofieldname": "Upfile",/* submitted video form name */"Videopa Thformat ":"/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6} ",/* Upload save path, you can customize 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 uploaded video */"Filefield Name ":" Upfile ",/* file Form names submitted */" Filepathformat ":"/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6} ",/* Upload save path , you can customize 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 ",". ",". mkv ",". avi ",". Rm ",". rmvb ",". Mpeg ",". mpg ",". Ogg ",". og ". V ",". 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",/* Perform picture management action name */"Imagemanagerlistpath": "/ueditor/php/up load/image/",/* Specify the directory to list pictures */" imagemanagerlistsize ": 20,/* Number of files per list */" Imagemanagerurlprefix ":" ",/* Picture access Path prefix * /"Imagemanagerinsertalign": "None",/* Insert Picture Floating mode */"Imagemanagerallowfiles": [". png", ". jpg", ". jpeg", ". gif", ". B" MP "],/* File types listed */* list files under the specified directory */" Filemanageractionname ":" ListFile ",/* Perform file management action name */" FILEMANAGERLISTP Ath ":"/ueditor/php/upload/file/",/* Specifies the directory to list the files */" Filemanagerurlprefix ":" ",/* File access Path prefix */" filemanagerlistsize ": 20,/* Number of files 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", ".". Tx T ",". MD ",". xml "]/* The file types listed */}

Then find the file Ueditor.config.js, find the following line, change the quotation marks to your own back-end path.

Serverurl:url + "php/controller.php"

Like what:

Serverurl:url + "Ueditor"

We need to install the following packages

"Dependencies": {    "Body-parser": "~1.0.0",    "Express": "~4.2.0",    "Ueditor": "^1.0.0"  }

Background code:

varExpress = require (' Express ');varPath = require (' path ');varApp =Express ();varUeditor = require ("Ueditor");varBodyparser = 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 Customer initiates upload picture request    if(req.query.action = = = ' Uploadimage ')) {        varFoo =Req.ueditor; varImgname =Req.ueditor.filename; varImg_url = '/images/ueditor/'; //you just enter the address you want to save. Save the operation to Ueditor to dores.ue_up (Img_url); }    //client initiated Picture List request    Else if(req.query.action = = = ' ListImage ')) {        varDir_url = '/images/ueditor/'; //the client lists all the pictures in the Dir_url directoryres.ue_list (Dir_url); }    //client initiates other requests    Else{Res.setheader (' Content-type ', ' Application/json '); Res.redirect ('/ueditor/nodejs/config.json '); }}));

Note: The above just processed the image upload, video upload can be crossing Web API, modeled after development.

node. js Rich Text Editor