|
在项目，给用户提交发送文章的功能，其中，文章中包括图片。下面写了一个DEMO来实现，分享给大家：
1. 下载kindeditor ,官方地址：http://kindeditor.net/down.php 经测试官网下载出错，不能正常下载，在“镜像下载”里，去下载文件 2. 下载后，文件夹的内容很多，那些是必须的呢，那些可以删除呢？ 将plugins、themes、lang、kindeditor-min.js放到public/kindeditor/下 3. 资料有了后，我们就可以写我们HTML代码了，在public下创建一个Demo.html, 然后引用使用kindeditor所需要的文件： <script charset="utf-8" src="/KindEditor/kindeditor-min.js"></script> <script charset="utf-8" src="/KindEditor/lang/zh_CN.js"></script> 4. 初始化kindeditor 图片：kd.png 
此Demo 支持文件上传，配置代码如下： <script type="text/javascript"> var editor; KindEditor.ready(function(K) { editor = K.create('#txtContent', { allowImageUpload : true, //支持图片上传 uploadJson: '/uploadImg.do', //图片上传时向服务提交的地址 items : [ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link'] }); }); </script> html代码如下： <form action="acticle.do" method="post"> 标题：<input type="text" id="txtTitle" name="txtTitle"/> 内容：<textarea id="txtContent" name="txtContent"></textarea> <input type="submit" value="发表"/> </form> 5. 上面4步，就完成了客户端的操作，下面就是服务器的操作了 首先，我们来实现图片上传，要进行图片上传，我们要先进行配置 var express = require('express'); var bodyParser = require('body-parser'); app.use(express.bodyParser({uploadDir:'./public/upload'})); 注：要保证public下upload文件夹，必须存在 然后，接受用户上传图片的请求，并做相应的处理 app.post("/uploadImg.do",function(req,res){ var fname = req.files.imgFile.path.replace("public\\upload\\", "").replace("public/upload/", ""); var info = { "error": 0, "url": "/upload/"+fname }; res.send(info); }) 6. 服务器对于表单的处理 app.post("/acticle.do",function(req,res){ console.log(req.body); }) 将表单数据打印出来，如下图： 图片：data.png
数据，传递过来了，然后，就是将数据，存到数据库中。 要显示，文章内容时，直接从数据库上读取出来，显示在网页中，即可。 参考：http://blog.csdn.net/dongshaoshuai/article/details/38947795 http://blog.csdn.net/u013934914/article/details/44261507 http://www.52jbj.com/jbdq/571675.html |
|
|
公众号
