nodejs+express+mysql 之简单的在线HTML编辑器

浏览数：17 / 时间：2015年06月12日

1.从原网站下载源码：http://kindeditor.net/demo.php

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" 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