FbIN/htmly
1
0
Fork 0
mirror of https://github.com/danpros/htmly.git synced 2026-04-17 19:26:08 +05:30
Code Issues Projects Releases Packages Wiki Activity

Image Upload Feature

Browse source 
Adding image upload to the markdown editor using
jQuery.AjaxFileUpload.js.
This commit is contained in:
Danang Probo Sayekti 2015-07-10 02:13:18 +07:00
commit 4c6d8c1a31
9 changed files with 568 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

72
system/admin/views/edit-page.html.php
View file

@ -22,9 +22,13 @@ $delete = $p->url . '/delete?destination=' . $destination;
?>
<link rel="stylesheet" type="text/css" href="<?php echo site_url() ?>system/admin/editor/css/editor.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/Markdown.Converter.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/Markdown.Sanitizer.js"></script>
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/Markdown.Editor.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="<?php echo site_url() ?>system/admin/editor/js/jquery.ajaxfileupload.js"></script>
<?php if (isset($error)) { ?>
<div class="error-message"><?php echo $error ?></div>
<?php } ?>
@ -54,13 +58,77 @@ $delete = $p->url . '/delete?destination=' . $destination;
<input type="submit" name="submit" class="submit" value="Save"/> <a href="<?php echo $delete ?>">Delete</a>
</form>
</div>
<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>
<div id="wmd-preview" class="wmd-panel wmd-preview"></div>
<script type="text/javascript">
(function () {
var converter = new Markdown.Converter();
var editor = new Markdown.Editor(converter);
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);
var base = '<?php echo site_url() ?>';
editor.hooks.set('insertImageDialog', function(callback) {
var dialogInsertClick = function() {
callback($url.val().length > 0 ? $url.val(): null);
dialogClose();
};
editor.run();
var dialogCancelClick = function() {
dialogClose();
callback(null);
};
var dialogClose = function() {
$url.val('');
$file.val('');
$dialog.dialog('close');
};
$dialog.dialog( 'option', 'buttons', {
'Insert': dialogInsertClick,
'Cancel': dialogCancelClick
});
var uploadComplete = function(response) {
if (response.error == '0') {
$url.val(base + response.path);
} else {
alert(response.error);
$file.val('');
}
};
$file.ajaxfileupload({
'action': '<?php echo site_url() ?>upload.php',
'onComplete': uploadComplete,
});
$dialog.dialog('open');
return true; // tell the editor that we'll take care of getting the image url
});
editor.run();
})();
</script>