logo标签列表

Summernote图片上传

javascriptimageuploadsummernote
54

我有一个关于Summernote编辑器的问题。我希望上传图片到服务器上的目录中。 我有一些脚本：

<script type="text/javascript">
  $(function () {
    $(\'.summernote\').summernote({
      height: 200
    });
    $(\'.summernote\').summernote({
     height:300,
     onImageUpload: function(files, editor, welEditable) {
      sendFile(files[0],editor,welEditable);
    }
  });

  });
</script>
<script type="text/javascript">
  function sendFile(file, editor, welEditable) {
    data = new FormData();
    data.append("file", file);
    url = "http://localhost/spichlerz/uploads";
    $.ajax({
      data: data,
      type: "POST",
      url: url,
      cache: false,
      contentType: false,
      processData: false,
      success: function (url) {
        editor.insertImage(welEditable, url);
      }
    });
  }
</script>



<td><textarea class="summernote" rows="10" cols="100" name="tekst"></textarea></td>
当然，我有所有js和CSS文件。我做错了什么？如果我单击图像上传并进入编辑器，图像不会显示在文本区域中。 如果我删除sendFile函数和onImageUpload，则图像将以base64格式保存。 Summernote链接：http://hackerwins.github.io/summernote/
6个回答
63

我测试过这段代码并且有效

Javascript

<script>
$(document).ready(function() {
  $('#summernote').summernote({
    height: 200,
    onImageUpload: function(files, editor, welEditable) {
      sendFile(files[0], editor, welEditable);
    }
  });

  function sendFile(file, editor, welEditable) {
    data = new FormData();
    data.append("file", file);
    $.ajax({
      data: data,
      type: "POST",
      url: "Your URL POST (php)",
      cache: false,
      contentType: false,
      processData: false,
      success: function(url) {
        editor.insertImage(welEditable, url);
      }
    });
  }
});
</script>

PHP

if ($_FILES['file']['name']) {
  if (!$_FILES['file']['error']) {
    $name = md5(rand(100, 200));
    $ext = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);
    $filename = $name.
    '.'.$ext;
    $destination = '/assets/images/'.$filename; //change this directory
    $location = $_FILES["file"]["tmp_name"];
    move_uploaded_file($location, $destination);
    echo 'http://test.yourdomain.al/images/'.$filename; //change this URL
  } else {
    echo $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
  }
}

更新：

在0.7.0之后，onImageUpload应该包含在callbacks选项中，如@tugberk所提到的。

$('#summernote').summernote({
    height: 200,
    callbacks: {
        onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0], editor, welEditable);
        }
    }
});
1
做得很好，干得好 - 注意：确保$destination是绝对路径。 - StudioTime
2
嘿...如果您删除一张图片怎么办？ - Alex
url："您的URL POST（php）"。这里应该放哪个URL？我尝试将CodeIgniter中的php上传函数的URL放入其中，但没有起作用。 - cyberrspiritt
4
这是最受欢迎的答案，但在v0.8.8版本中无法使用，请参见http://summernote.org/deep-dive/#onimageupload。由于我花了几个小时才弄清楚，您可能希望更新您的答案 :s - tugberk
1
在多文件上传的情况下会发生什么？ - Kiran RS
需要吗？我们将不得不创建 upload.php。 - Tariq Ahmed
51

Summernote v0.8.1的图片上传

适用于大图片

$('#summernote').summernote({
    height: ($(window).height() - 300),
    callbacks: {
        onImageUpload: function(image) {
            uploadImage(image[0]);
        }
    }
});

function uploadImage(image) {
    var data = new FormData();
    data.append("image", image);
    $.ajax({
        url: 'Your url to deal with your image',
        cache: false,
        contentType: false,
        processData: false,
        data: data,
        type: "post",
        success: function(url) {
            var image = $('<img>').attr('src', 'http://' + url);
            $('#summernote').summernote("insertNode", image[0]);
        },
        error: function(data) {
            console.log(data);
        }
    });
}
1
我该如何直接从URL上传图片？我想在文件下载到我的服务器后，将插入的图像链接替换为我的服务器路径。 - hakkikonu
26

使用带有进度条的方式上传图片

我想扩展用户3451783的答案，提供一种带有HTML5进度条的上传方式。我发现上传照片时不知道是否有任何反应非常令人恼火。

HTML

<progress></progress>

<div id="summernote"></div>

JS

// initialise editor

$('#summernote').summernote({
        onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0], editor, welEditable);
        }
});

// send the file

function sendFile(file, editor, welEditable) {
        data = new FormData();
        data.append("file", file);
        $.ajax({
            data: data,
            type: 'POST',
            xhr: function() {
                var myXhr = $.ajaxSettings.xhr();
                if (myXhr.upload) myXhr.upload.addEventListener('progress',progressHandlingFunction, false);
                return myXhr;
            },
            url: root + '/assets/scripts/php/app/uploadEditorImages.php',
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                editor.insertImage(welEditable, url);
            }
        });
}

// update progress bar

function progressHandlingFunction(e){
    if(e.lengthComputable){
        $('progress').attr({value:e.loaded, max:e.total});
        // reset progress on complete
        if (e.loaded == e.total) {
            $('progress').attr('value','0.0');
        }
    }
}
进度条在最新版本中无法正常工作，你是否已经在新版本的Summernote中解决了这个问题？ - DPP
2
@star18bit：它应该可以工作 - 我添加的进度条功能与Summernote无关，我只是在文件发送时监听XMLHttpRequest的进度。 - TheCarver
2
最新的Summernote完美运行。这是一个简洁的解决方案。非常感谢。 - Anupam
我认为这不适用于当前版本。两个变量editor和welEditable始终为空。编辑：请参见https://github.com/vsymguysung/ember-cli-summernote/issues/31 - NickG
13

这段代码在新版本（v0.8.12）（2019年5月21日）中运行良好。

$('#summernote').summernote({
        callbacks: {
            onImageUpload: function(files) {
                for(let i=0; i < files.length; i++) {
                    $.upload(files[i]);
                }
            }
        },
        height: 500,
    });

    $.upload = function (file) {
        let out = new FormData();
        out.append('file', file, file.name);

        $.ajax({
            method: 'POST',
            url: 'upload.php',
            contentType: false,
            cache: false,
            processData: false,
            data: out,
            success: function (img) {
                $('#summernote').summernote('insertImage', img);
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error(textStatus + " " + errorThrown);
            }
        });
    };

PHP 代码（upload.php）

if ($_FILES['file']['name']) {
 if (!$_FILES['file']['error']) {
    $name = md5(rand(100, 200));
    $ext = explode('.', $_FILES['file']['name']);
    $filename = $name . '.' . $ext[1];
    $destination = 'images/' . $filename; //change this directory
    $location = $_FILES["file"]["tmp_name"];
    move_uploaded_file($location, $destination);
    echo 'images/' . $filename;//change this URL
 }
 else
 {
  echo  $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
 }
}
谢谢Namal！你有没有找到处理删除和从服务器目录中移除的代码？如果有的话，能否发布一下？谢谢！ - HDer
1
Summernote默认将上传的图像转换为base64编码字符串，您可以处理此字符串，或者像其他人提到的那样，使用onImageUpload回调上传图像。您可以查看我稍微修改了一下以适应laravelcsrf token这里的gist。但是这对我没有用，我没有时间找出原因！相反，我通过基于这篇博客文章的服务器端解决方案解决了它。它获取summernote的输出，然后上传图像并更新最终的markdown HTML。
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

Route::get('/your-route-to-editor', function () {
    return view('your-view');
});

Route::post('/your-route-to-processor', function (Request $request) {

       $this->validate($request, [
           'editordata' => 'required',
       ]);

       $data = $request->input('editordata');

       //loading the html data from the summernote editor and select the img tags from it
       $dom = new \DomDocument();
       $dom->loadHtml($data, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);    
       $images = $dom->getElementsByTagName('img');
       
       foreach($images as $k => $img){
           //for now src attribute contains image encrypted data in a nonsence string
           $data = $img->getAttribute('src');
           //getting the original file name that is in data-filename attribute of img
           $file_name = $img->getAttribute('data-filename');
           //extracting the original file name and extension
           $arr = explode('.', $file_name);
           $upload_base_directory = 'public/';

           $original_file_name='time()'.$k;
           $original_file_extension='png';

           if (sizeof($arr) ==  2) {
                $original_file_name = $arr[0];
                $original_file_extension = $arr[1];
           }
           else
           {
                //the file name contains extra . in itself
                $original_file_name = implode("_",array_slice($arr,0,sizeof($arr)-1));
                $original_file_extension = $arr[sizeof($arr)-1];
           }

           list($type, $data) = explode(';', $data);
           list(, $data)      = explode(',', $data);

           $data = base64_decode($data);

           $path = $upload_base_directory.$original_file_name.'.'.$original_file_extension;

           //uploading the image to an actual file on the server and get the url to it to update the src attribute of images
           Storage::put($path, $data);

           $img->removeAttribute('src');       
           //you can remove the data-filename attribute here too if you want.
           $img->setAttribute('src', Storage::url($path));
           // data base stuff here :
           //saving the attachments path in an array
       }

       //updating the summernote WYSIWYG markdown output.
       $data = $dom->saveHTML();

       // data base stuff here :
       // save the post along with it attachments array
       return view('your-preview-page')->with(['data'=>$data]);

});
1
我所说的无意义字符串是指Base64加密数据。 - sajed zarrinpour
-1

我在这里尝试了几乎所有的答案，但在v0.8.18中没有一个对我有效。

我找到了一个简单的解决方案，认为有人可能需要它。

这是：

打开您的js summernote/summernote-lite.js，找到onImageUpload: null,。

替换为:

onImageUpload: function(files) {
var $editor = $(this);
var data = new FormData();
 data.append('file', files[0]);
 $.ajax({
     url: 'editor-upload.php',
     method: 'POST',
     data: data,
     processData: false,
     contentType: false,
     success: function(response) {
       $editor.summernote('insertImage', response);
     }
 });
},

一个简单的 PHP 示例：editor-upload.php

if(empty($_FILES['file']))
{
    echo "Insert image";
}

$errorImgFile = "img/img_upload_error.jpg";
$destinationFilePath = 'img-uploads/'.$_FILES['file']['name'];
if(!move_uploaded_file($_FILES['file']['tmp_name'], $destinationFilePath)){
    echo $errorImgFile;
}
else{
    echo $destinationFilePath;
}

清除浏览数据并刷新页面，就这样，它就像魔法一样运行。

注意：我不使用压缩版本，所以请小心，并先备份您的文件。

为什么要修改原始源代码？每次发布新版本都必须重新做一遍，而且已经有很多答案展示了该怎么做！ - Phil1970
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接