upload - ¿Cómo agregar la utilidad de carga al editor wmd?
(3)
¿Alguien ha tenido éxito en hacer esto?
Agregue un botón al panel de control de WMD.
Busque la siguiente cadena para encontrar el lugar donde se agregan los botones: italicButton.XShift
En mi versión , la función está en la clase SpritedButtonRow y se llama compilación .
Ignore los atributos setup y textOp . 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. Luego, simplemente agregue un evento onclick al botón que hará lo que necesita hacer.
Pero, no creo que un botón de carga deba estar dentro de un editor de texto, no tiene sentido.
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ás interesado, escribí una entrada en el blog sobre ella (¡con imágenes!) Que tiene un código de muestra más, así como algunos de los problemas / soluciones que encontré al implementar esto.
El siguiente hack requiere el uso de jQuery , jQuery UI y jQuery Form Plugin de Mike Alsup 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> , deberá 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>
De hecho, necesitamos hacer un único cambio en wmd.js
var form = doc.createElement("form"); y busca (ctrl + f) para var form = doc.createElement("form");
Inmediatamente después de esta línea, asigne al formulario una identificación, la forma de diálogo lo hará: form.id = "dialogform";
Ahora en el frente, ejecuta:
$(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, la publicación fue escrita para jQuery 1.7.2, y live() ha sido desaprobada. Cambie a on() si está usando una versión más reciente de jQuery
Y en el back-end, 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."));
Espero que eso te ayude a empezar. 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.