Javascript — TinyMCE Загрузка изображений

Question

Javascript — TinyMCE Загрузка изображений

Начиная с TinyMCE 4.x, TinyMCE имеет встроенную функцию загрузки изображений, но я не могу заставить ее работать.

Мой код:

tinymce.init({
selector: "textarea",
plugins: [
"image","code","autoresize","media","link","imagetools"],
link_class_list: [
{title: 'None', value: ''},
{title: 'PDF', value: 'pdf'}
],
default_link_target: "_blank",
images_upload_url: "uploadImage.php",
toolbar1: "insertfile undo | redo | styleselect | bold | italic | alignleft | aligncenter | alignright | alignjustify | bullist | numlist | outdent | indent | link | image | media | code",
toolbar2: "",
menubar : false,
statusbar : false,
convert_urls: false,
content_css: 'editor-style.css',
width: 800
});

Строка: «images_upload_url» должна отвечать за загрузку изображения. Прикрепленный к нему php-файл выглядит следующим образом:

 $imageFolder = "../images/tinymce";

reset ($_FILES);
$temp = current($_FILES);
if (is_uploaded_file($temp['tmp_name'])){
if (isset($_SERVER['HTTP_ORIGIN'])) {
header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
}


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


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

$filetowrite = $imageFolder . $temp['name'];
move_uploaded_file($temp['tmp_name'], $filetowrite);

echo json_encode(array('location' => $filetowrite));
} else {
header("HTTP/1.0 500 Server Error");
}

Я что-то пропустил? Где я могу найти кнопку «Загрузить изображение» в редакторе (я ожидаю, что она появится в окне «Вставить / редактировать изображение»). Где-нибудь есть рабочий пример?

1

image-upload javascript php tinymce

Решение

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

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

Источник

Accepted Answer

я использую tinymce 4 вот как я могу загрузить изображение:

Конфигурация Timymce:

file_browser_callback: function(field_name, url, type, win) {
if(type=='image') $('#file_name').click(); $('#field_name').val(field_name);
}

увидеть : https://www.tinymce.com/docs/configure/file-image-upload/

форма:

<form enctype="multipart/form-data" id="form_file" style="width:0px; height:0px; overflow:hidden">
<input id="file_name" name="file" type="file" />
</form>
<input type="hidden" id="field_name" value="" />

я использую скрытое имя поля для отображения ссылки на изображение во всплывающем окне

JavaScript:

$('#file_name').change(function(){
var field_name = $('#field_name').val()
document.getElementById(field_name).value='';
var file = this.files[0];
var name = file.name;
var size = file.size;
var type = file.type;
//Your validation
var field_name = $('#field_name').val()
var type = type.substring(0, 5);
if(type=='image') {

var formData = new FormData($('#form_file')[0]);

$.ajax({
url: "upload/upload.php",
type: "POST",
data: formData,
async: false,
success: function (msg) {
document.getElementById(field_name).value = 'http://www.domain.fr/upload/'+name;
},
cache: false,
contentType: false,
processData: false
});

} else {
alert('Le fichier doit etre une image')
}

});

php:

header('Access-Control-Allow-Origin: *');


if($_FILES['file']['type'] != "") {
$source = $_FILES['file']['name'];
$ext = pathinfo($path, PATHINFO_EXTENSION);
if(move_uploaded_file ($_FILES['file']['tmp_name'], $source)) {
echo $source ;
}
}

2