Nodejs+express+mysql's simple online HTML editor

1. Download the source code from the original website: Http://kindeditor.net/demo.php2. Put Kindeditor in the project so that it can complete basic functions1). Put plugins, themes, Lang, kindeditor-min.js under public/kindeditor/2). Create a file Editor.ejs under views with the contents of

<script src= "/kindeditor/kindeditor-min.js" type= "Text/javascript" ></script>---Here is the file path of the first step, If you do not follow the previous step, you need to modify this reference path <form style= "padding-top:10px;padding-left:5%;" > <textarea name= "Content" style= "Width:90%;height:500px;visibility:hidden;" ></textarea> </form> <p> <input type= "button" Name= "gethtml" onclick= "gethtml ();" Value= "Get HT ML "/> <input type=" button "Name=" sethtml "onclick=" sethtml (); "value=" Set HTML "/> </p><script type="  Text/javascript "> var _editor; $ (function () {Kindeditor.ready (function (K) {_editor = K.create (' textarea[name= "content"] ', {pastetype:2 , items: [' source ', ' | ', ' formatblock ', ' fontname ', ' fontsize ', ' | ', ' forecolor ', ' lineheight ', ' bold ', ' it          Alic ', ' underline ', ' removeformat ', ' | ', ' justifyleft ', ' justifycenter ', ' justifyright ', ' insertorderedlist ', ' Insertunorderedlist ', ' | ', ' emoticons ', ' image ', ' link ', ' Code ', ' InsertFile ', ' clearhtmL ', ' quickformat ', ' preview ']//here can customize the display function});  });  });  function gethtml () {Console.log (_editor.html ()); }</script>

3). Add in Routes/index.js

App.get ('/editor ', function (req, res) {res.render (' editor ', {layout: ' Layout/gray '});//Specify the template shown here, if default, remove the line});

4). Test: Http://127.0.0.1:3000/editorSo far, upload pictures of God horse should not be able to use, upload picture file below will say

3. Ability to upload images (background + foreground)1). Open/public/kindeditor/plugins/image/image.jsModify Line 16th

Uploadjson = K.undef (Self.uploadjson, Self.basepath + ' php/upload_json.php '),//Will PHP .... This is the code to be executed after uploading, I changed here to upload

Modify Line 194th

if (formatuploadurl) {url = k.formaturl (URL, ' absolute ');//change this to URL = window.location.origin + '/' +url; Because the picture path is in the same folder}

2). Open Routes/index.js Add

App.post ('/kindeditor/upload ', function (req,res) {var _files = Req.files.imgFile; if (_files.length < 0) {Console.log (' files.length <= 0 '); return;}    VAR item =_files, _tmp, _name=item.name;  if (_name && item.path) {var tmppath = Item.path, type = item.type, Extension_name = ", Tmp_name =        (Date.parse (New Date ())/+) + ' + (Math.Round (Math.random () * 9999));  Switch (type) {//Determine file type case ' image/pjpeg ': extension_name = ' jpg ';            Break Case ' image/jpeg ': extension_name = ' jpg ';            Break Case ' image/gif ': extension_name = ' gif ';            Break Case ' image/png ': extension_name = ' png ';            Break Case ' image/x-png ': extension_name = ' png ';            Break Case ' image/bmp ': extension_name = ' bmp ';            Break Default:if (_name.indexof ('. ') <=0) return;            Other files are uploaded by default else {_tmp = _name.split ('. '); Extension_name = _tmp[_tmp.length-1];            Break  }        }      Tmp_name = Tmp_name + '. ' + extension_name, TargetPath = ' public/upload/' + tmp_name,//config upload path is = Fs.createre Adstream (tmppath), os = Fs.createwritestream (TargetPath), Util.pump (IS, OS, function () {fs.unlinksync (Tmppath);  Console.log (' Upload success: ', TargetPath); Res.json ({//return = Error:0,url: ' upload/' + tmp_name,title:tmp_name,message    : Tmp_name}); };});

After the configuration can be used, if there is a problem, qq me: 328179934
4. Complete the upload file function to be updated ...


Description: This project has been shared on GitHub above, the above features are fully implemented, the Access link is: https://github.com/ymma/blog.git

Nodejs+express+mysql's simple online HTML editor