summernote图片上传功能保存到服务器指定文件夹+php代码+java方法

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 id="summernote"><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;
//如果上传的文件夹不存在,则创建之 if ($targetDir) { @mkdir($targetDir); } //文件目录 $targetDir_url = $targetDir . '/article';
//如果上传的文件夹不存在,则创建之 if ($targetDir_url) { @mkdir($targetDir_url); } //图片上传的具体路径就出来了 $destination = $targetDir_url . DIRECTORY_SEPARATOR . $filename; //change this directory $location = $_FILES["file"]["tmp_name"]; //将图片移动到指定的文件夹****核心代码 move_uploaded_file($location, $destination); echo C('UPLOAD_PICTURE') . $folder . '/article' . DIRECTORY_SEPARATOR . $filename;//change this URL } else { echo $message = 'Ooops! Your upload triggered the following error: ' . $_FILES['file']['error']; } } }

  以上就是把用富文本编辑器在选择图片的时候,通过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       

还有官方的源代码:https://github.com/l0rdn1kk0n/wicket-bootstrap/tree/4f97ca783f7279ca43f9e2ee790703161f59fa40/bootstrap-extensions/src/main/java/de/agilecoders/wicket/extensions/markup/html/bootstrap/editor

 

以上就是完整的summernote富文本编辑器保存图片到服务器指定文件夹,相当完整,99%会解决你的烦恼,如果解决了你的问题,记得帮我点个赞哦!!这是我到国外网站学习到的,很难得,就跟大家一起分享!!!

 

记得点赞,帮你解决问题,也是对我的肯定!点赞!谢谢!

 

文本编辑后,我们得到的是带有html标签的内容,那么怎么把这些带有html标签的内容在文章中显示出来呢,请观看续集:http://www.cnblogs.com/jingmin/p/6602658.html

  

  

posted @ 2017-03-20 23:35  小king哥  阅读(16660)  评论(3编辑  收藏  举报