Question

我在我的网站（使用 Codeigniter 构建）中集成了summernote，并且对于文本，它工作正常。但是对于图像上传，会出现以下问题。

Summernote将图像读取为base64。现在这对于小图像非常适用，但是一旦图像很大，由于数据库中base64创建的巨大字符串，图像最终无法呈现。

所以我试图将图像保存在我的服务器中，然后使用该图像的链接。

以下是代码： summernote的脚本：

public function upload_image()
{
    if ($_FILES['file']['name']) {
        if (!$_FILES['file']['error']) {
            $name = md5(rand(100, 200));
            $ext = explode('.', $_FILES['file']['name']);
            $filename = $name . '.' . $ext[1];
            $destination = 'http://sitename.com/dist/img/blogimg/' . $filename; //change this directory
            $location = $_FILES["file"]["tmp_name"];
            move_uploaded_file($location, $destination);
            echo 'http://sitename.com/dist/img/blogimg/' . $filename;//change this URL
        }
        else
        {
            echo  $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
        }
    }
}

php upload_image函数：

>Uncaught TypeError: Cannot read property 'nodeType' of undefined

现在，当我在summernote中单击插入图像或拖放图像时，控制台中会显示以下错误的多个实例：

<img src="mysite.com/path_to_image">

这就是我想要达到的目标，注：这个编辑器适用于博客。 1.用户点击插入图像并从他的计算机上传图像。 2.图像显示在编辑器中（但在此步骤中未上载到服务器）。 3.当用户单击提交按钮时，图像应保存为预定义文件夹中的图像文件。 4.当页面呈现时，它应该具有

<img src="data:image/jpeg;base64,/9j/4AAQSkZJR....">)

现在它就像是

[...,(23188,'Bob',1944,'Dentist','Houston'),(44512,'Charlie',1961,'Teacher','Boston'), ...]

请注意，我尝试在回调中使用onImageUpload，但结果实际上没有发生任何事情，图像既没有上传到编辑器也没有上传到服务器中的文件夹。

我哪里出错了？??请帮我解决这个问题......

Answer 1

如果您的夏令时版本在0.7之后

跟着这个

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

Answer 2

好的，虽然我找不到解决问题的方法，但我已经实施了一个交替解决方案，它完美无缺，尽管pt。 3没有照顾，并且图像在较早的步骤中上传到服务器。这也可以用一些js脚本来满足......稍后会这样做......我所做的就是针对summernote id和类，并添加了我的代码代替他们的代码......

我通过以下代码删除了他们的上传图片字段：

<style>
/*to disable the upload image from computer uncomment this css code.*/
	.note-group-select-from-files {
  display: none;
}

</style>

接下来，我以这种方式在我们的插入链接字段下面插入我的HTML：

document.getElementsByClassName('note-group-image-url')[0].insertAdjacentHTML('afterend','<p class="sober"><a href="#" data-toggle="modal" data-target="#imageModal"><p>Click here to upoad image</p></i></a></p>');

接下来，我通过模态处理图像上传，并编写了一个自定义js脚本，将图像网址复制到.note-image-url

另外，我必须使用js自定义summernote的插入图像按钮的javascript，以便用户可以直接点击插入图像。

Summernote图片上传无法在codeigniter中工作

2 个答案: