如何在 laravel 5 中插入和更新图像 Summernote

Posted 2023-03-22

【中文标题】如何在 laravel 5 中插入和更新图像 Summernote

【英文标题】：how to inserting and update image Summernote in laravel 5

【发布时间】：2019-12-07 00:59:36

【问题描述】：

我在我的网络上使用summernote 作为所见即所得，但我遇到了一个我在google 中找不到的问题（不能解决我的问题），即如何使用summernote 在我的文本区域中输入图像并将它们显示在查看我使用了以下各种方法但仍然出现错误，我希望我能在这个惊人的***中得到答案。

我先尝试了这段代码：

$detail=$request->input('konten');
      $dom = new \DomDocument();
      libxml_use_internal_errors(true);
      $dom->loadhtml($detail, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
      $images = $dom->getElementsByTagName('img');
      foreach($images as $k => $img)

          $data = $img->getAttribute('src');
          list($type, $data) = explode(';', $data);
          list(, $data)      = explode(',', $data);
          $data = base64_decode($data);
          $image_name= "/img/blog" . time().$k. '.png';
          $path = public_path() . $image_name;
          file_put_contents($path, $data);
          $img->removeAttribute('src');
          $img->setAttribute('src', $image_name);
      
      $detail = $dom->saveHTML();

我将它保存到数据库，这项工作总体上没有错误，但问题是，在我的 laravel 目录中，“laravel-5”环境不是默认环境，我为“laravel”和那个文件夹设置了文件夹名称“main” "main" 成为一个公共目录，问题是，$path = "public_path().$image_name" 没有上传到公共名称 "img/blog" 上的正确目录，而是在 MAIN 文件夹上创建一个新目录，所以当我在视图上显示由于目录错误导致图像未显示时，img src 上的结果是 img/blog/namefile.png，必须是 https://somedomain.com/img/blog/namefile.png 才能显示图像。

我尝试了一些库名称Intervention\Image\ImageManagerStatic 这是代码：

$detail=$request->input('konten');
      $dom = new \DomDocument();
      $dom->loadHtml( mb_convert_encoding($detail, 'HTML-ENTITIES', "UTF-8"), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
      $images = $dom->getElementsByTagName('img');
        foreach($images as $img)
            $src = $img->getAttribute('src');
            if(preg_match('/data:image/', $src))
                // get the mimetype
                preg_match('/data:image\/(?<mime>.*?)\;/', $src, $groups);
                $mimetype = $groups['mime'];

                $filename = uniqid();
                $filepath = "/img/blog/$filename.$mimetype"; 

                $image = Image::make($src)
                  ->encode($mimetype, 50)  
                  ->save($filepath);

                $new_src = asset($filepath);
                $img->removeAttribute('src');
                $img->setAttribute('src', $new_src);
            
        
      $detail = $dom->saveHTML();

但是结果是图片无法写入目录，不知道为什么，我试过第一个删除public_path()改成URL，还是一样的错误。

//first trial

$detail=$request->input('konten');
      $dom = new \DomDocument();
      libxml_use_internal_errors(true);
      $dom->loadHtml($detail, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
      $images = $dom->getElementsByTagName('img');
      foreach($images as $k => $img)

          $data = $img->getAttribute('src');
          list($type, $data) = explode(';', $data);
          list(, $data)      = explode(',', $data);
          $data = base64_decode($data);
          $image_name= "/img/blog" . time().$k. '.png';
          $path = public_path() . $image_name;
          file_put_contents($path, $data);
          $img->removeAttribute('src');
          $img->setAttribute('src', $image_name);
      
      $detail = $dom->saveHTML();

//second trial

$detail=$request->input('konten');
      $dom = new \DomDocument();
      $dom->loadHtml( mb_convert_encoding($detail, 'HTML-ENTITIES', "UTF-8"), LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
      $images = $dom->getElementsByTagName('img');
        foreach($images as $img)
            $src = $img->getAttribute('src');
            if(preg_match('/data:image/', $src))
                // get the mimetype
                preg_match('/data:image\/(?<mime>.*?)\;/', $src, $groups);
                $mimetype = $groups['mime'];

                $filename = uniqid();
                $filepath = "/img/blog/$filename.$mimetype"; 

                $image = Image::make($src)
                  ->encode($mimetype, 50)  
                  ->save($filepath);

                $new_src = asset($filepath);
                $img->removeAttribute('src');
                $img->setAttribute('src', $new_src);
            
        
      $detail = $dom->saveHTML();

我希望图片上传到正确的目录并且可以显示在视图中

【参考方案1】：

我正在使用 jquery/ajax 处理这个问题，请参阅下面的代码：

脚本（不要忘记为您的“textarea”名称更改#summernote id）：

<script>
        $(document).ready(function() 
            $('#summernote').summernote(
                callbacks: 
                    onImageUpload: function(files) 
                        for(let i=0; i < files.length; i++) 
                            $.upload(files[i]);
                        
                        console.log('file loading');
                    
                ,
                height: 200,
            );

            $.upload = function (file) 
                let out = new FormData();
                out.append('file', file, file.name);
                $.ajaxSetup(
                    headers: 
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    
                );
                $.ajax(
                    method: 'POST',
                    url: '/admin/summernote_upload',
                    contentType: false,
                    cache: false,
                    processData: false,
                    data: out,
                    success: function (img) 
                        $('#summernote').summernote('insertImage', img);
                    ,
                    error: function (jqXHR, textStatus, errorThrown) 
                        console.error(textStatus + " " + errorThrown);
                    
                );
            ;
        );


    </script>

路由器：（我在管理员组中使用此路由器，如果需要，您可以在 Ajax 调用中修改它的前缀）

#Summernote
Route::post('summernote_upload',['uses'=>'SummerNoteController@upload_image'])->name('summernote_upload_image');

注意：不要忘记将 meta 添加到 head 标签以保护 CSRF

只需将此行添加到标签后

 <meta name="csrf-token" content=" csrf_token() ">

夏日笔记控制器：

use Illuminate\Support\Facades\Storage;
use Illuminate\Http\Request;

class SummerNoteController extends Controller

   public function upload_image(Request $request)
   
       //make validation

       $image = $request->file('file')->store('public/uploads/editor');

       //in this blok you can change the logic.
       //you want I am using default laravel file handling

       return Storage::url($image);
   

【讨论】：

我不知道为什么，但这对我不起作用，可能是因为我的 javascript 不好，所以我不明白逻辑抱歉，但我已经测试过了

它有什么问题？如果您有任何类型的错误，请与我们分享。除了我的回答，我想强调的是，您需要运行“php artisan storage:link”命令才能访问公共存储。您可以在控制台上搜索任何 javascript 错误。