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

时间:2017-08-12 23:33:54

标签: php mysql base64 tinymce

我正在使用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");
}

感谢您的帮助

1 个答案:

答案 0 :(得分:2)

从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处的图像处理程序必须执行在应用程序中“存储”图像所需的任何操作。这可能意味着:

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

...无论您选择存储图像的位置,您的图像处理程序都需要返回一行JSON,告诉TinyMCE图像的新位置。如TinyMCE文档中所述,这可能如下所示:

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

然后,TinyMCE会将图像的src属性更新为您返回的值。如果您在init中使用images_upload_base_path设置,该设置将添加到返回的位置。

这里的网络是TinyMCE知道你的内容中是否存在嵌入式图像,但它不可能知道在你的应用程序的上下文中如何处理该图像,这样你的作业(“图像处理程序”)就是你的东西了必须创造。