nodejs+express+mysql 之 簡單的線上HTML編輯器

標籤：html   編輯器   源碼   nodejs   

1.從原網站下載源碼：http://kindeditor.net/demo.php2.將kindeditor放到項目內，使其能夠完成準系統1).將plugins、themes、lang、kindeditor-min.js放到public/kindeditor/下2).在views下建立檔案editor.ejs，內容為

<script src="/kindeditor/kindeditor-min.js" type="text/javascript"></script> --- 這裡是第一步的檔案路徑，如果不是按照上一步做的，你需要修改此引用路徑<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="取得HTML" />    <input type="button" name="setHtml" onclick="setHtml();" value="設定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', 'italic', 'underline',          'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',          'insertunorderedlist', '|', 'emoticons', 'image', 'link','code','insertfile','clearhtml', 'quickformat','preview']//這裡可自訂顯示的功能      });    });  });  function getHtml(){    console.log(_editor.html());  }</script>

3).在routes/index.js中添加

app.get('/editor',function (req, res){ res.render('editor', { layout:'layout/gray'});//這裡指定顯示的模板，若是預設的話，去掉就行});

4).測試：http://127.0.0.1:3000/editor到目前為止，上傳圖片神馬的應該不能夠使用，上傳圖片檔案下邊會說

3.完成上傳圖片的功能（後台+前台）1).開啟/public/kindeditor/plugins/image/image.js修改第16行

uploadJson = K.undef(self.uploadJson, self.basePath + 'php/upload_json.php'),//將php....該為上傳之後要執行的代碼，我這裡改為了upload

修改第194行

if (formatUploadUrl) {url = K.formatUrl(url, 'absolute');//將這裡改成url = window.location.origin + '/'+url;，因為圖片路徑在同一個檔案夾下}

2).開啟routes/index.js添加

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()) / 1000) + '' + (Math.round(Math.random() * 9999));        switch (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; //其他檔案則預設上傳            else {            _tmp = _name.split('.');            extension_name = _tmp[_tmp.length-1]; break;            }        }        tmp_name = tmp_name + '.' + extension_name,        targetPath = 'public/upload/' + tmp_name,//配置上傳路徑is = fs.createReadStream(tmpPath),os = fs.createWriteStream(targetPath);util.pump(is, os, function() { fs.unlinkSync(tmpPath); console.log('upload success : ',targetPath);res.json({//返回的指error : 0,url : 'upload/' + tmp_name,title : tmp_name,message : tmp_name});});    };});

配置完就可以使用了，如果出現了問題，qq我：328179934
4.完成上傳檔案的功能待更新...


說明：此項目已共用到github上面，上邊說的功能已全部實現，訪問連結為：https://github.com/ymma/blog.git

nodejs+express+mysql 之 簡單的線上HTML編輯器