TinyMce：将 img 保存为路径而不是 Base64 到数据库

Question

我正在使用 TinyMce 编写我的网站文章，但是 img 源是这样保存在数据库中的：

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

如何保存文件的路径？像这样：

<img src="myproject/images/picture1.jpg"/>

我正在使用此 PHP 代码将文章发送到数据库：

articles.php

if(isset($_POST['btnViagens_país'])) {

$id_país = $_POST['id_país'];
$thumbnail = $_POST['thumbnail'];
$article = $_POST['article'];
$title = $_POST['title'];

$stmt = $mysqli->prepare("INSERT INTO country_page_journeys(countryPage_id, thumbnail, article, title) VALUES(?,?,?,?)");
$stmt->bind_param('isss', $id_país, $thumbnail, $article, $title);
$stmt->execute();

if(!$stmt) {
    echo "Failed to execute: (" . $stmt->errno . ")" . $stmt->error;
}    
$stmt->close();
}

这里是 TinyMce init 的代码：

$(document).ready(function() { 
tinymce.init({   
relative_urls : false, 
images_upload_url: 'postAcceptor.php',
images_upload_base_path: '',
selector: "textarea",
theme: "modern",
height: 500,
width: 800,
paste_data_images: true,
plugins: [
  "advlist autolink lists link image imagetools charmap print preview hr anchor pagebreak",
  "searchreplace wordcount visualblocks visualchars code fullscreen",
  "insertdatetime media nonbreaking save table contextmenu directionality",
  "emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
file_picker_types: 'image',
file_picker_callback: function(cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');

input.onchange = function() {
  var file = this.files[0];

  var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function () {
    // Note: Now we need to register the blob in TinyMCEs image blob
    // registry. In the next release this part hopefully won't be
    // necessary, as we are looking to handle it internally.
    var id = 'blobid' + (new Date()).getTime();
    var blobCache =  tinymce.activeEditor.editorUpload.blobCache;
    var base64 = reader.result.split(',')[1];
    var blobInfo = blobCache.create(id, file, base64);
    blobCache.add(blobInfo);

    // call the callback and populate the Title field with the file name
    cb(blobInfo.blobUri(), { title: file.name });
  };
};
  input.click();
}
  });     
});

和 PHP 处理程序：

<?php
  $accepted_origins = array("http://localhost", "http://192.168.1.1", 
  "http://example.com");


 $imageFolder = "viagens_header_images";

 reset ($_FILES);
 $temp = current($_FILES);
 if (is_uploaded_file($temp['tmp_name'])){
   if (isset($_SERVER['HTTP_ORIGIN'])) {

  if (in_array($_SERVER['HTTP_ORIGIN'], $accepted_origins)) {
    header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
  } else {
    header("HTTP/1.0 403 Origin Denied");
    return;
  }
}

// Sanitize input
if (preg_match("/([^\w\s\d\-_~,;:\[\]\(\).])|([\.]{2,})/", $temp['name'])) {
    header("HTTP/1.0 500 Invalid file name.");
    return;
}

// Verify extension
if (!in_array(strtolower(pathinfo($temp['name'], PATHINFO_EXTENSION)), 
array("gif", "jpg", "png"))) {
    header("HTTP/1.0 500 Invalid extension.");
    return;
}

// Accept upload if there was no origin, or if it is an accepted origin
$filetowrite = $imageFolder . $temp['name'];
move_uploaded_file($temp['tmp_name'], $filetowrite);

// Respond to the successful upload with JSON.
// Use a location key to specify the path to the saved image resource.
// { location : '/your/uploaded/image/file'}
echo json_encode(array('location' => $filetowrite));
} else {
// Notify editor that the upload failed
header("HTTP/1.0 500 Server Error");
}

感谢帮助

Answer 1

查看 TinyMCE 文档中的此页面：

https://www.tinymce.com/docs/advanced/handle-async-image-uploads/

基本过程是 TinyMCE 将为您插入编辑器的每个图像创建一个单独的 HTTP POST。它会根据您的 TinyMCE 配置中 images_upload_url 选项的设置将该图像发送到您选择的 URL（通过 HTTP POST）。

images_upload_url（您必须创建）中引用的 URL 处的图像处理程序必须对应用程序中的图像 "store" 做任何需要做的事情。这可能意味着：

将项目存储在您的网络服务器上的文件夹中
将项目存储在数据库中
将项目存储在资产管理系统中

...无论您选择将图像存储在何处，您的图像处理程序都需要 return 一行 JSON 告诉 TinyMCE 图像的新位置。正如 TinyMCE 文档中所引用的，这可能看起来像：

{ location : '/uploaded/image/path/image.png' }

TinyMCE 随后会将图像的 src 属性更新为您 return 的值。如果您在初始化中使用 images_upload_base_path 设置，它将被添加到 returned 位置。

这里的网络是 TinyMCE 知道您的内容中何时存在嵌入图像，但它不可能知道在您的应用程序的上下文中如何处理该图像以便完成工作（"image handler"）是你必须创造的东西。

TinyMce：将 img 保存为路径而不是 Base64 到数据库

TinyMce: Saving img as path instead of Base64 to database

php

mysql

base64

tinymce