Summernote 图片上传错误

Question

我使用 codeigniter、twitter bootstrap 和 summernote 作为我的所见即所得编辑器。我在上传图片时遇到了一些问题。每当使用 Summernote 上传图像时，它会将图像序列化为 base64 字符串。该 base64 字符串太长以至于不适合 phpmyadmin 中的文本数据类型。我想要做的是，使用 PHP 上传功能上传图像并将其 url 存储在数据库中，而不是 base64 字符串。我该怎么做？

参考this帖子，代码如下，

$(function() {
  $('.summernote').summernote({
    height: 100,
    onImageUpload: function(files, editor, welEditable) {
            sendFile(files[0], editor, welEditable);
        }
  });
  function sendFile(file, editor, welEditable) {
        data = new FormData();
        data.append("files", file);
        upload_url = "<?php echo base_url(); ?>" + "dashboard/uploader/";
        $.ajax({
            data: data,
            type: "POST",
            url: upload_url,
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                editor.insertImage(welEditable, url);
            }
        });
    }
});

仪表板类中的上传器方法是我的 php 上传代码所在的位置。这是PHP代码，

public function uploader()
{
    $this->load->helper('file');
    if ($_FILES['files']['name']) {
        if (!$_FILES['files']['error']) {
            $name = md5(rand(100, 200));
            $ext = explode('.', $_FILES['files']['name']);
            $filename = $name . '.' . $ext[1];
            $destination = base_url().'uploads/' . $filename; 
            $location = $_FILES["files"]["tmp_name"];
            move_uploaded_file($location, $destination);
            echo base_url() . $filename; 
        }
        else
        {
          echo  $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['files']['error'];
        }
    }
}

每当我上传图片时，它都不会在所见即所得的编辑器中显示。我哪里错了？

现在看起来像这样：

$(function() {
  $('.summernote').summernote({
    height: 100,
    onImageUpload: function(files) {
            sendFile(files[0]);
        }
  });
  function sendFile(file) {
        data = new FormData();
        data.append("files", file);
        upload_url = "<?php echo base_url(); ?>" + "dashboard/uploader/";
        $.ajax({
            data: data,
            type: "POST",
            url: upload_url,
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) {
                 $(this).summernote("insertImage", url);
            }
        });
    }
});

Answer 1

您使用的是哪个版本的 Summernote？最新 (0.6.16) Summernote 调用自定义 OnImageUpload 函数，只有一个参数 - files，没有 editor 和 welEditable。

见： https://github.com/summernote/summernote/blob/v0.6.16/src/js/EventHandler.js#L117

请参考javascript code of django-summernote。

---

Summernote 在 0.6.5 之后改变了处理图像的行为。见changes。