Geek Answers Handbook

How to add download utility to wmd editor?

Has anyone succeeded in doing this?

+6
upload wmd
source share
3 answers

I accomplished this by replacing Util.prompt with my own jquery.dialog method. The prompt function takes a parameter as a callback, making it easy to create a replacement for a replacement.

if (isImage) { // OLD: util.prompt(imageDialogText, imageDefaultText, makeLinkMarkdown); // WMD_IMAGE_GALLERY_URL loaded from a global settings elsewhere util.imageGallery(WMD_IMAGE_GALLERY_URL, makeLinkMarkdown); } else { util.prompt(linkDialogText, linkDefaultText, makeLinkMarkdown); }

If you're interested, I wrote a blog post about this (with pictures!), In which there are some more code examples, as well as some of the problems / solutions that I encountered when implementing this.

+3
source share

The next hack requires the use of jQuery , jQuery UI, and the Mike Alsup jQuery Form Plugin to load AJAX files. The hack works with related versions (jQ 1.7.2 and jQUI 1.8.20). I can not guarantee compatibility with other versions.

In your <head> you will need to specify the dependencies:

 <script type='text/javascript' src='jquery.min.js'></script> <link href='theme/jquery-ui.css' rel='stylesheet' type='text/css' /> <script type='text/javascript' src='jquery-ui.js'></script> <script type='text/javascript' src='wmd/showdown.js'></script> <script type='text/javascript' src='wmd/wmd.js'></script> <link type='text/css' rel='stylesheet' href='wmd/wmd.css'/> <script type='text/javascript' src='jquery.form.js'></script>

In fact, we need to make one change to wmd.js
Continue and find (ctrl + f) for var form = doc.createElement("form");
Immediately after this line, assign an id form, dialogform will do: form.id = "dialogform";

Now at the front end run:

 $(document).ready(function(){ $("#wmd-image-button").live("click",function(){ setTimeout(function(){ $(".wmd-prompt-dialog").css({"opacity": "0", display: "none"}); }, 100); var $div = $("<div>"); var $form = $("<form>").attr({action: "submit_image.php", method: "post"}) var $file = $("<input/>").attr({type: "file", name: "image"}); var $name = $("<input/>").attr({type: "text", name: "name", placeholder: "Name"}); var $submit = $("<input/>").attr("type", "submit"); $form.append($name, $file, $submit).ajaxForm(function(r) { r = $.parseJSON(r); if(r.success){ $("#dialogform input[type='text']").val(r.filename); $("#dialogform input[value='OK']").trigger("click"); $div.dialog("close"); } }); $div.append($form).dialog({title: "Upload Image"}); }); $("#wmd-link-button").live("click", function(){ setTimeout(function(){ $(".wmd-prompt-dialog").css("opacity", "1"); }, 100); }); });

Remember that the message was written for jQuery 1.7.2, and live() has been deprecated since then. Switch to on() if you are using a newer version of jQuery

And on the server, in submit_image.php :

  $f = $_FILES['image']; $p = $_POST; $allowedTypes = array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF); $detectedType = exif_imagetype($f['tmp_name']); if(in_array($detectedType, $allowedTypes)){ $pi = pathinfo($f['name']); $ext = $pi['extension']; $target = "img/" . strtolower(str_replace(" ", "-", $p['name'])) . "." . $ext; if(move_uploaded_file($f['tmp_name'], $target)){ $returnArr = array( "success" => true, "filename" => site_url($target) ); echo json_encode($returnArr); } else echo json_encode(array("success" => false)); } else echo json_encode(array("success" => false, "msg" => "Invalid File Type."));

Hope this helps you get started. It was written a couple of years ago when my javascript skills were lower! Haha I used to do this on a blog (which is now dead), with step-by-step instructions and explanations; a lot of unnecessary fluff. Thanks @Kamiccolo for bringing this link to my attention. I needed to consult a machine to revive it.

+1
source share

Add a button to the WMD control panel.
Locate the following line to find where to add the buttons: italicButton.XShift
In my version, the function is in the SpritedButtonRow class and is called build.

Ignore setup and textOp attributes. XShift is the position of the button image in the css-sprite that comes with WMD. Instead, give the button a class, and in the class, specify a background image. Then just add the onclick event to the button that will do what you need. But, I do not think that the download button should be inside a text editor, it makes no sense.

0
source share

More articles:


All Articles