...
Excerpt |
---|
You may need to upload files like images and other files together with TinyMCE in some cases. In that case, you need to 1) include 'image media' in plugins, and file_picker_callback, 2) add a hidden button for uploading files, 3) create an additional php code(upload.php) on the server. |
Code Block |
---|
|
<!DOCTYPE html>
<html>
<head>
<script src='http://kurapa.com/js/tinymce/tinymce.min.js' type='text/javascript'></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
tinymce.init({
selector: 'textarea',
content_style: 'body { font-size: 10pt; font-family: 맑은 고딕체,Calibri,Arial,Sans-serif; }',
themes: 'modern',
plugins: "image media",
file_picker_callback: function(callback, value, meta)
{
// File type
if (meta.filetype =="media" || meta.filetype =="image")
{
// Trigger click on file element
jQuery("#fileupload").trigger("click");
$("#fileupload").unbind('change');
// File selection
jQuery("#fileupload").on("change", function()
{
var file = this.files[0];
var reader = new FileReader();
// FormData
var fd = new FormData();
var files = file;
fd.append("file",files);
fd.append('filetype',meta.filetype);
var filename = "";
// AJAX
jQuery.ajax({
url: "upload.php",
type: "post",
data: fd,
contentType: false,
processData: false,
async: false,
success: function(response)
{
filename = response;
}
});
reader.onload = function(e)
{
callback("upload/"+filename);
};
reader.readAsDataURL(file);
}
);
}
}
});
</script>
</head>
<body>
<form method=post action="output.php">
Title<br>
<input type=hidden name="cid" value="<?=$cid?>">
<input type=text name="title" value="" size=80><br>
<textarea cols=80 rows=40 name="body"></textarea>
<input type='file' name='fileupload' id='fileupload' style='display: none;'>
<input type=submit>
</form>
</body>
</html> |
In addition, you need to create upload.php which can save files on the server and return its filename in real-time.
Code Block |
---|
language | php |
---|
title | upload.php |
---|
|
<?php
// Getting file name
$filename = $_FILES['file']['name'];
// file type
$filetype = $_POST['filetype'];
// Valid extension
if($filetype == 'image'){
$valid_ext = array('png','jpeg','jpg');
}else if($filetype == 'media'){
$valid_ext = array('mp4','mp3');
}
// Location
$location = "upload/".$filename;
// file extension
$file_extension = pathinfo($location, PATHINFO_EXTENSION);
$file_extension = strtolower($file_extension);
$return_filename = "";
// Check extension
if(in_array($file_extension,$valid_ext)){
// Upload file
if(move_uploaded_file($_FILES['file']['tmp_name'],$location)){
$return_filename = $filename;
}
}
echo $return_filename;
?> |
...