2.將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" οnclick="getHtml();" value="取得HTML" />
<input type="button" name="setHtml" οnclick="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