xheditor图片上传

前端步骤：分为三部，这三部做完之后就能正确显示富文本了

1、下载xheditor文件，并按照如下要求进行引入：

　　<!-- xheditor富文本的文件引入 -->
　　<script type="text/javascript" src="/xheditor/xheditor-1.2.2/jquery/jquery-1.4.4.min.js"></script>
　　<script type="text/javascript" src="/xheditor/xheditor-1.2.2/xheditor-1.2.2.min.js"></script>
　　<script type="text/javascript" src="/xheditor/xheditor-1.2.2/xheditor_lang/zh-cn.js"></script>

 

2、对富文本进行配置：

<script>
　　$('.xheditor').xheditor({
　　　　tools:'full',
　　　　skin:'default',
　　　　upImgUrl:'/article/upload', //这一步尤其重要，添加了之后才会显示本地图片上传按钮，并确认了提交路径为'/article/upload'
　　　　html5Upload: false,
　　　　upMultiple:1
　　});
</script>

 

3、html文件中加入文本域textArea，并将其class设置为xheditor，如下：

<textArea name="content" class="xheditor"> <%- item.content %> </textArea>

 

后台node处理程序：

var multiparty = require('multiparty');  //multiparty对图片进行处理

var fs = require('fs')  //文件读写

 

router.post('/upload', function(req, res, next) {
　　var form = new multiparty.Form();  //获取form实例
　　form.parse(req, function(err, fields, files) { //格式化
　　　　if (err) {
　　　　　　console.log("上传失败", err)
　　　　} else {
　　　　　　console.log('files', files)
　　　　　　var file = files.filedata[0] //获取图片文件对象
　　　　　　var rs = fs.createReadStream(file.path)  //读图片文件对象
　　　　　　var newPath = '/upload/' + file.originalFilename 
　　　　　　var ws = fs.createWriteStream('./public/' + newPath)  //写图片文件对象
　　　　　　rs.pipe(ws)  //管道读写
　　　　　　ws.on('close', function() {  //监听写完成事件
　　　　　　　　console.log('文件上传成功')
　　　　　　　　res.send({  //向前端返回图片上传成功之后的路径msg
　　　　　　　　　　err: '',
　　　　　　　　　　msg: newPath  
　　　　　　　　})
　　　　　　})
　　　　}
　　});
})