One of my personal project using Pagedown 1 for the markdown editor, so this is a working solutions and not just an example. Perhaps it slightly different with your needs but at least will give some insight on how to create similar solutions in your app.
I use jQuery UI and jQuery.AjaxFileUpload.js. 2
First we creating the image upload dialog and than hook it into the Pagedown and use PHP to upload the image.
The dialog form:
<div id="insertImageDialog" title="Insert Image">
<h4>URL</h4>
<input type="text" placeholder="Enter image URL" />
<h4>Upload</h4>
<form method="post" action="" enctype="multipart/form-data">
<input type="file" name="file" id="file" />
</form>
<style>
#insertImageDialog { display:none; padding: 10px; font-size:12px;}
.wmd-prompt-background {z-index:10!important;}
</style>
</div>
The script:
(function () {
var converter = new Markdown.Converter();
var editor = new Markdown.Editor(converter);
var base_path = 'http://www.example.com';
var $dialog = $('#insertImageDialog').dialog({
autoOpen: false,
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
});
var $url = $('input[type=text]', $dialog);
var $file = $('input[type=file]', $dialog);
editor.hooks.set('insertImageDialog', function(callback) {
var dialogClose = function() {
$url.val('');
$file.val('');
$dialog.dialog('close');
};
$dialog.dialog({
buttons : {
"Insert" : {
text: "Insert",
id: "insert",
click: function(){
callback($url.val().length > 0 ? $url.val(): null);
dialogClose();
}
},
"Cancel" : {
text: "Cancel",
id: "cancel",
click: function(){
dialogClose();
callback(null);
}
}
}
});
var uploadComplete = function(response) {
if (response.error == '0') {
$url.val(base_path + response.path);
$("#insert").trigger('click');
} else {
alert(response.error);
$file.val('');
}
};
$file.ajaxfileupload({
'action': base_path + 'upload.php',
'onComplete': uploadComplete,
});
$dialog.dialog('open');
return true; // tell the editor that we'll take care of getting the image url
});
editor.run();
})();
The upload.php:
<?php
// Set the timezone
date_default_timezone_set('Asia/Jakarta');
$whitelist = array('jpg', 'jpeg', 'png', 'gif');
$name = null;
$dir = 'content/images/';
$error = null;
$timestamp = date('YmdHis');
$path = null;
if (!is_dir($dir)) {
mkdir($dir, 0755, true);
}
if (isset($_FILES)) {
if (isset($_FILES['file'])) {
$tmp_name = $_FILES['file']['tmp_name'];
$name = basename($_FILES['file']['name']);
$error = $_FILES['file']['error'];
$path = $dir . $timestamp . '-' . $name;
$check = getimagesize($tmp_name);
if($check !== false) {
if ($error === UPLOAD_ERR_OK) {
$extension = pathinfo($name, PATHINFO_EXTENSION);
if (!in_array($extension, $whitelist)) {
$error = 'Invalid file type uploaded.';
} else {
move_uploaded_file($tmp_name, $dir . $timestamp . '-' . $name);
}
}
} else {
$error = "File is not an image.";
}
}
}
echo json_encode(array(
'path' => $path,
'name' => $name,
'error' => $error,
));
die();
I implement this solutions for HTMLy.
-
PageDown is the version of Attacklab's Showdown and WMD as used on Stack Overflow and the other Stack Exchange sites. The Pagedown homepage on Google Code. ↩︎
-
jQuery plugin to make file inputs upload via ajax. The Project page on Github. ↩︎