Summernote 图像上传在 codeigniter 中不起作用

Posted 2023-02-24

【中文标题】Summernote 图像上传在 codeigniter 中不起作用

【英文标题】：Summernote image upload not working in codeigniter

【发布时间】：2017-08-21 05:18:15

【问题描述】：

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

Summernote 将图像读取为 base64。现在这对于小图像效果很好，但是一旦图像很大，由于数据库中 base64 创建的巨大字符串，图像最终不会呈现。

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

以下是代码： Summernote 的脚本：

<script type="text/javascript">
$(document).ready(function() 
  $('#summernote').summernote(
    height: 300,
    onImageUpload: function(files) 
            sendFile(files[0]);
        
  );
  function sendFile(file) 
        data = new FormData();
        data.append("files", file);
        upload_url = "<?php echo base_url(); ?>" + "general/upload_image";
        $.ajax(
            data: data,
            type: "POST",
            url: upload_url,
            cache: false,
            contentType: false,
            processData: false,
            success: function(url) 
                 $(this).summernote("insertImage", url);

            
        );
    
);

php upload_image 函数：

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'];
        
    

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

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

这就是我想要实现的， 注：此编辑器用于博客。 1. 用户点击插入图片并从他的电脑上传一张图片。 2. 图片在编辑器中显示（但在这一步没有上传到服务器）。 3. 当用户点击提交按钮时，图像应保存为预定义文件夹中的图像文件。 4.当页面呈现时它应该有

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

现在是这样的

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

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

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

【问题讨论】：

只是一个建议codeigniter有自己的上传库codeigniter.com/user_guide/libraries/file_uploading.html

您最初的 base 64 大小问题可以通过更改为 LongText 来解决

@wolfgang1983 应该在upload_image() 函数中使用上传库对吗？您能否提供一个示例代码来展示如何使用此上传库处理 POST 数据。 ??我没看清楚……

【参考方案1】：

您可以将其添加到您的存储/更新控制器。 它将在您的编辑器中检测图像，将其转换并保存在您的服务器中。

 $body = $data['content'];
        $doc = new DomDocument;
        libxml_use_internal_errors(true);
        $doc->loadHTML($body);      
        $images =  $doc->getelementsbytagname('img');
        define('UPLOAD_DIR', 'assets/images/announcement_img/');

        foreach($images as $k => $img)
            $datas = $img->getattribute('src');

            if (strpos($datas, 'data:image')!==false)
            list($type, $datas) = explode(';', $datas);
            list($media, $format) = explode('/', $type);
            list(, $datas)      = explode(',', $datas);
            $datas = str_replace(' ', '+', $datas);
            $datas = base64_decode($datas);

            $file= UPLOAD_DIR . time().$k.'.'.$format;
            $success = file_put_contents($file, $datas);
            print $success ? $file : '<br><br>Unable to save the file.<br><br>';

            $img->removeattribute('src');
            $img->setattribute('src',base_url().$file);
            
        

          
        $body = $doc->savehtml();
        $data['content']=$body;

【参考方案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>');

接下来我通过一个modal处理了图片上传，并编写了一个自定义的js脚本，将图片url复制到.note-image-url的字段中

另外我还得用js自定义summernote的插入图片按钮的javascript，这样用户就可以直接点击插入图片了。

【参考方案3】：

如果你的 Summernote 版本在 0.7 之后

按照这个

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