如何使用 PHP vanilla 或 Laravel 从 Summernote 保存和更新图像

Question

如何使用 PHP 保存和更新 Summernote 图像。

Summernote图像是base64的，因此需要解码、上传，然后将summnernote内容的图像src数据修改为图像上传的目录，然后将summnernote内容保存到DB。因为不建议保存图像信息数据库。

当我将上传图像的相同路径目录img/位置保存在数据库中时，当我尝试从数据库编辑summernote内容时，summernote无法显示图像<textarea>{{$dbData->content}}</textarea>

另外，在解码之前，您需要检查img src是否真的是base64图像，因为在编辑已保存的内容时，现有的img src不会是base64图像，除了尚未上传的新图像，因为现有的img src已经解码并上传。

Answer 1

$content = request()->get('content');&nbsp; &nbsp; &nbsp; &nbsp; $dom = new \DomDocument();&nbsp; &nbsp; &nbsp; &nbsp; $dom->loadHtml($content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);&nbsp; &nbsp; &nbsp; &nbsp; $images = $dom->getElementsByTagName('img');&nbsp; &nbsp; &nbsp; &nbsp; foreach ($images as $image) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $imageSrc = $image->getAttribute('src');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (preg_match('/data:image/', $imageSrc)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; preg_match('/data:image\/(?<mime>.*?)\;/', $imageSrc, $mime);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $mimeType = $mime['mime'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $filename = uniqid();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $filePath = "/uploads/$filename.$mimeType";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Image::make($imageSrc)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ->encode($mimeType, 100)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ->save(public_path($filePath));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $newImageSrc = asset($filePath);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $image->removeAttribute('src');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $image->setAttribute('src', $newImageSrc);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; $newMessageBody = $dom->saveHTML();

Answer 2

为了避免错误的 HTML 格式引发错误，请使用LIBXML_NOWARNING |&nbsp;LIBXML_NOERROR检测img src中的 base64 图像的一个简单方法是检测字符串中的data:image 。虽然不是最佳方式，但可以毫无问题地解决。最后，在summernote内容中修改img src前面的正斜杠“&nbsp;/&nbsp;”，即可解决从DB获取结果后summer note内容中图像不显示的问题如果您有任何建议和最佳方法，请发表评论，我将很高兴。谢谢。&nbsp;代码&nbsp;（我的解决方案）&nbsp; &nbsp;//checking if request&nbsp; is set&nbsp; &nbsp; &nbsp; &nbsp;if (isset($request->long_description)) {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $detail=$request->long_description;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; //Prepare HTML & ignore HTML errors&nbsp; &nbsp; &nbsp; &nbsp; $dom = new \domdocument();&nbsp; &nbsp; &nbsp; &nbsp; $dom->loadHtml($detail, LIBXML_NOWARNING | LIBXML_NOERROR);&nbsp; &nbsp; &nbsp; &nbsp; //identify img element&nbsp; &nbsp; &nbsp; &nbsp; $images = $dom->getelementsbytagname('img');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;//loop over img elements, decode their base64 source data (src) and save them to folder,&nbsp; &nbsp; &nbsp; &nbsp; //and then replace base64 src with stored image URL.&nbsp; &nbsp; &nbsp; &nbsp; foreach($images as $k => $img){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //collect img source data&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $data = $img->getattribute('src');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //checking if img source data is image by detecting 'data:image' in string&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (strpos($data, 'data:image')!==false){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list($type, $data) = explode(';', $data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; list(, $data)&nbsp; &nbsp; &nbsp; = explode(',', $data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //decode base64&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $data = base64_decode($data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //naming image file&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $image_name= time().rand(000,999).$k.'.png';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // image path (path) to use upload file to&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $path = 'img/location/'. $image_name;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //image path (path2) to save to DB so that summernote can display image in edit mode (When editing summernote content) NB: the difference btwn path and path2 is the forward slash "/" in path2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $path2 = '/img/location/'. $image_name;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; file_put_contents($path, $data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; modify image source data in summernote content before upload to DB&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $img->removeattribute('src');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $img->setattribute('src', $path2);}&nbsp; &nbsp; &nbsp;else {&nbsp; &nbsp; &nbsp; &nbsp; // not base64 img}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // final variable to store in DB&nbsp; &nbsp; &nbsp; &nbsp; $detail = $dom->savehtml();&nbsp; &nbsp; &nbsp; &nbsp;}