在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
1.summernote富文本编辑器
summernote是一款基于bootstrap的富文本编辑器,是一款十分好用的文本编辑器,还附带有图片和文件上传功能。 那么在我们网站中想吧这个图片上传到服务器指定文件夹中,就要在选择图片是进行ajax移动图片。
1.1了解summernote本身图片保存方式。 summernote默认保存的是图片的base64数据,并没有存储图片文件。
2.进行summernote图片的保存 Html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Summernote</title> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> //这个css和js请到官网进行下载(点击上面的summernote就可以直达官网) <link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.css" rel="stylesheet"> <script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.2/summernote.js"></script> </head> <body> <form action="{:U(upload/upload)}" method="post"> <div id="summernote"><p>Hello Summernote</p></div> <input type="submit" value="提交"> </form> </body> </html>
从Html代码中就可以看出怎么使用这个富文本编辑器 直接<div ><p>Hello Summernote</p></div> 因为下面代码的缘故,这里的id最好用summernote(你也可以改,如果不嫌麻烦,官方都是这么用的)
JS代码: <script type="text/javascript"> //调用富文本编辑 $(document).ready(function() { var $summernote = $('#summernote').summernote({ height: 300, minHeight: null, maxHeight: null, focus: true, //调用图片上传 callbacks: { onImageUpload: function (files) { sendFile($summernote, files[0]); } } }); //ajax上传图片 function sendFile($summernote, file) { var formData = new FormData(); formData.append("file", file); $.ajax({ url: "{:U('Upload/upload_img')}",//路径是你控制器中上传图片的方法,下面controller里面我会写到 data: formData, cache: false, contentType: false, processData: false, type: 'POST', success: function (data) { $summernote.summernote('insertImage', data, function ($image) { $image.attr('src', data); }); } }); } }); </script>
Controller控制器 public function upload_img() { if ($_FILES) { if (!$_FILES['file']['error']) { //生成的文件名(时间戳,精确到毫秒) list($usec, $sec) = explode(" ", microtime()); $name = ((float)$usec + (float)$sec) * 1000; $ext = explode('.', $_FILES['file']['name']); $filename = $name . '.' . $ext[1]; $folder = date("Ymd"); $targetDir = C('UPLOAD_PICTURE_URL') . $folder; 以上就是把用富文本编辑器在选择图片的时候,通过ajax传递数据,controller把图片移动到指定服务器文件夹中,并且在编辑器中显示出来图片。 效果:
3.提交图片,将数据插入到数据库中 上面js和controller配合将图片移动到指定的服务器文件夹中,然后ajax返回图片的完整路径以及保存的图片名,以<img src="Uploads/..../1.jpg">放入编辑文本中,点击提交保存到数据库中。
接下来点击提交按钮,进行文本的提交。 public function upload(){ //将form表单提交的内容存入数据库 } form表单提交的内容都会保存吧!
4.关于java代码 关于使用java的方法,上面的html和js代码基本没啥改动,就是ajax路径不同,其他的很好改的, 这里有篇关于官方的java的demo演示,大家可以参考一下:http://wb-mgrigorov.rhcloud.com/summernote
以上就是完整的summernote富文本编辑器保存图片到服务器指定文件夹,相当完整,99%会解决你的烦恼,如果解决了你的问题,记得帮我点个赞哦!!这是我到国外网站学习到的,很难得,就跟大家一起分享!!!
记得点赞,帮你解决问题,也是对我的肯定!点赞!谢谢!
文本编辑后,我们得到的是带有html标签的内容,那么怎么把这些带有html标签的内容在文章中显示出来呢,请观看续集:http://www.cnblogs.com/jingmin/p/6602658.html
|
2022-08-17
2022-11-06
2022-07-18
2022-08-18
2022-07-29
请发表评论