¿Cómo agregar la utilidad de carga al editor wmd?

¿Alguien ha tenido éxito en hacer esto?¿Cómo agregar la utilidad de carga al editor wmd?

2009-11-05 Mask

¿Podría ser un poco más específico? ¿Estás tratando de agregar una utilidad preconstruida o estás tratando de escribir la tuya propia? –

Ambos pueden hacerlo por mí. – Mask

¿Importa en qué versión de WMD? –

Agregue un botón al panel de control de WMD.
buscar la siguiente cadena para encontrar el lugar en el que se están añadiendo botones: italicButton.XShift
En my version, la función está en la clase SpritedButtonRow y se llama acumulación .

Ignorar la configuración y textOp atributos. XShift es la posición de la imagen del botón en el sprite de css que viene con WMD. En lugar de eso, dale al botón una clase y en la clase especifica la imagen de fondo. A continuación, solo agregue un evento onclick al botón que hará lo que necesite.
Pero, no creo que un botón de carga deba estar dentro de un editor de texto, no tiene sentido.

Fuente

2009-11-13 05:13:37

Lo logré reemplazando Util.prompt con mi propio método jquery.dialog. La función de solicitud toma un parámetro como devolución de llamada, lo que facilita la creación de un reemplazo directo.

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

Si está interesado, me escribió una blog entry al respecto (con fotos!) Que tiene un poco más de código de ejemplo, así como algunos de los problemas/soluciones que encontré en la implementación de este.

Fuente

2009-11-18 22:08:53

puedo obtener el código para ello ... :) – Moon

También estaría muy interesado en ver el código para todo esto, ya que necesito implementar una carga como stackoverflow. – marcusstarnes

El siguiente truco requiere el uso de jQuery, jQuery UI y Mike Alsup's jQuery Form Plugin para realizar cargas de archivos AJAX. El truco funciona con las versiones enlazadas (jQ 1.7.2 y jQUI 1.8.20). No puedo garantizar la compatibilidad con otras versiones.

En su <head>, tendrá que incluir las dependencias:

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

realmente tenemos que hacer un solo cambio a wmd.js.
Ir de allí y buscar (Ctrl + F) para var form = doc.createElement("form");
Inmediatamente después de esta línea, asignar el formulario de un id, dialogform hará: form.id = "dialogform";

Ahora en la parte delantera, ejecute:

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

Recuerde, el puesto ha sido escrito para jQuery 1.7.2, y live() ya ha quedado obsoleto.Por favor, cambie a on() si está utilizando una versión más reciente de jQuery

Y en el backend, en 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."));

Esperemos que va a comenzar. Esto fue escrito hace un par de años, ¡cuando mis habilidades de javascript eran inferiores a las nuestras! Jaja. Anteriormente tuve esto en un blog (que ahora está muerto), con instrucciones paso a paso y explicaciones; mucha pelusa innecesaria. Gracias @Kamiccolo por traer este enlace a mi atención. Tuve que consultar el camino atrás de la máquina para revivirlo.

Fuente

2012-09-18 07:00:55

Podría, por favor, elaborar más, no solo colocar un enlace fuera del sitio? teniendo en cuenta que ese sitio está muerto. Al menos en este momento. – Kamiccolo

gracias @Kamiccolo - corregido. –

¿Cómo agregar la utilidad de carga al editor wmd?

Respuesta

Cuestiones relacionadas