Excerpt |
---|
TinyMCE provides an interface You may need to upload files like images , so you can provide better editing environment. |
...
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;
?> |