Wie Upload-Dienstprogramm zum Wmd-Editor hinzufügen?

Hat es jemand geschafft, dies zu tun?Wie Upload-Dienstprogramm zum Wmd-Editor hinzufügen?

2009-11-05 Mask

Könnten Sie ein bisschen genauer sein? Versuchen Sie, ein vorgefertigtes Dienstprogramm hinzuzufügen oder versuchen Sie, ein eigenes zu schreiben? –

Beide können es für mich tun. – Mask

Spielt es eine Rolle in welcher Version von WMD? –

Hinzufügen einer Schaltfläche zum Bedienfeld von WMD.
Suche nach der folgenden Zeichenfolge, den Ort zu finden, wo Tasten hinzugefügt werden: italicButton.XShift
In my version, die Funktion in der Klasse ist SpritedButtonRow und Build genannt wird.

Ignorieren Sie die Konfiguration und textOp Attribute. XShift ist die Position des Button-Bildes im css-Sprite, das mit WMD ausgeliefert wird. Stattdessen geben Sie der Schaltfläche eine Klasse und in der Klasse das Hintergrundbild an. Dann fügen Sie einfach ein onclick Ereignis zum Knopf hinzu, der tut, was Sie es tun müssen.
Aber ich glaube nicht, dass ein Upload-Button in einem Texteditor sein sollte, macht keinen Sinn.

Quelle

2009-11-13 05:13:37

Ich erreichte dies durch Ersetzen von Util.prompt durch meine eigene jquery.dialog-Methode. Die Eingabeaufforderungsfunktion verwendet einen Parameter als Rückruf, sodass ein Drop-in-Ersatz einfach erstellt werden kann.

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); 
}

Wenn Sie daran interessiert, schrieb ich einen blog entry darüber (mit Bildern!), Die etwas mehr Beispielcode sowie einige der Probleme/Lösungen habe ich diese bei der Umsetzung auftreten.

Quelle

2009-11-18 22:08:53

kann ich den Code dafür bekommen ... :) – Moon

Ich würde auch sehr interessiert sein, den Code für all dies zu sehen, da ich einen Upload wie stackoverflow implementieren muss. – marcusstarnes

Der folgende Hack erfordert die Verwendung von jQuery, jQuery UI und Mike Alsup's jQuery Form Plugin für die Durchführung von AJAX-Datei-Uploads. Der Hack funktioniert mit den verknüpften Versionen (jQ 1.7.2 und jQUI 1.8.20). Ich kann die Kompatibilität mit anderen Versionen nicht garantieren.

In Ihrem <head>, werden Sie die Abhängigkeiten enthalten müssen:

<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>

Wir brauchen eigentlich eine einzige Änderung zu wmd.js machen.
auf Gehen Sie dort hinein und suchen (Strg + F) für var form = doc.createElement("form");
Unmittelbar diese Zeile folgt, weisen Sie dem Formular eine ID, dialogform tun: form.id = "dialogform";

nun am vorderen Ende, laufen:

$(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); 
    }); 
});

Denken Sie daran wurde die Post geschrieben für jQuery 1.7.2 und live() veraltet, da wurde.Bitte wechseln Sie on(), wenn Sie eine neuere Version von jQuery verwenden

Und auf das Backend, 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."));

Hoffentlich die Ihnen beim Einstieg bekommen. Dies wurde vor ein paar Jahren geschrieben, als meine Javascript-Fähigkeiten unterdurchschnittlich waren! Haha. Ich hatte das vorher auf einem Blog (das jetzt tot ist), mit Schritt-für-Schritt-Anleitungen und Erklärungen; viel unnötiger Flaum. Danke @Kamiccolo für diesen Link zu meiner Aufmerksamkeit. Ich musste die Weg-zurück-Maschine konsultieren, um sie wiederzubeleben.

Quelle

2012-09-18 07:00:55

Könnten Sie bitte mehr ausarbeiten und nicht nur einen externen Link löschen? im Sinn, diese Seite tot. Zumindest im Moment. – Kamiccolo

danke @Kamiccolo - behoben. –

Wie Upload-Dienstprogramm zum Wmd-Editor hinzufügen?

Antwort

Verwandte Themen