TinyMce: сохранение img как пути вместо Base64 в базе данных

Я пишу статьи на своем сайте, используя 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:

$(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");
}

Спасибо за помощь

0

Решение

Взгляните на эту страницу из документации TinyMCE:

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

Основной процесс заключается в том, что TinyMCE создаст отдельный HTTP POST для каждого изображения, которое вы вставляете в редактор. Это изображение будет отправлено на URL по вашему выбору (через HTTP POST) в зависимости от настройки images_upload_url вариант в вашей конфигурации TinyMCE.

Обработчик изображения по URL, указанному в images_upload_url (который вы должны создать) должен делать все, что нужно, чтобы «сохранить» изображение в вашем приложении. Это может означать что-то вроде:

  • Сохраните элемент в папке на вашем веб-сервере
  • Сохранить предмет в базе данных
  • Сохраните товар в системе управления активами

…независимо от того, где вы решили сохранить изображение, ваш обработчик изображений должен возвращать одну строку JSON, сообщающую TinyMCE новое местоположение изображения. Как указано в документации TinyMCE, это может выглядеть так:

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

TinyMCE обновит изображение src приписать значение, которое вы возвращаете. Если вы используете images_upload_base_path установка в init, которая будет добавлена ​​к возвращенному местоположению.

Суть в том, что TinyMCE знает, когда в вашем контенте существует встроенное изображение, но он не может знать, что делать с этим изображением в контексте вашего приложения, так что задание («обработчик изображения») — это то, что вы должны создать.

1

Другие решения

Других решений пока нет …

По вопросам рекламы ammmcru@yandex.ru
Adblock
detector