entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

¿Error en GreaseMonkey o en el Script?

Hola!!! @white Estuve analizando un objeto de comentarios con el inspeccionar elemento y “logré” crear un “script” que no solo me permitía agregar el botón de Negrita sino que también el botón de cursiva, cuando ya hallas el código de Negrita crear el de Cursiva es realmente muy fácil, pero me he topado con TRES PROBLEMAS bastante graves por cierto y por ahora iré solo con el primer problema:

Hay tres cuadros de comentarios:

MP, Shout’s, Post’s (los dos últimos están relacionados y el MP es independiente al resto).

Y por cada cuadro de comentarios hay un problema (lo que da un total de tres problemas).

Primer problema (en los MP):

Normalmente se ve así:

Captura 1:
Cap1
http://i.imgur.com/hKXH5Km.png
http://k30.kn3.net/0/2/0/9/4/A/E29.png

Y cuando ejecuto este código desde la consola:

settingsComment.markupSet.unshift
({name:lang['Negrita'], beforeInsert: markButtons.bold, action: 'bold', key: 'B', openWith: '[b]', closeWith: '[/b]', className: "mark-bold"},
{name:lang['Cursiva'], beforeInsert: markButtons.italic, action: 'italic', key: 'I', openWith: '[i]', closeWith: '[/i]', className: "mark-italic"});
var clone = $('#nbody_fastreply').clone();
$('#nbody_fastreply')
    .parents('.nmarkitfastreply')
    .replaceWith(clone);
$('#nbody_fastreply').markItUp(settingsComment);

Pasamos a verlo así:

Captura 2:
Cap2
http://i.imgur.com/kfsq3Dw.png
http://k30.kn3.net/2/D/3/7/7/A/CFF.png

Y todos los botones funcionan OK, excepto el último, los emoticones.

Se supone que cuando doy clic en ese icono debería salir esto:

Captura 3:
Cap3
http://i.imgur.com/hi2779m.png
http://k46.kn3.net/D/E/1/D/6/2/20A.png

Pero el emoticón no responde y no despega la lista de emoticones.

Ahora, cuando guardo ese código en el GreaseMonkey para que se ejecute automáticamente, sucede esto:

Captura 4:
Cap4
http://i.imgur.com/In0jVMW.png
http://k30.kn3.net/2/1/4/1/A/3/7BE.png

Y el icono de emoticones sigue sin funcionar.

El problema me parece que está en la función clon del código antes mencionado, pero de ahí ya no tenga idea, recalco que… no sé programar en este lenguaje, simplemente usé mi lógica y con un poco de investigación logré llegar acá, pero ya no puedo más :(

PD: Si es necesario, les puedo brindar una cuenta clon de dicha página web.

Gracias.

CHUCHOREA MANDA SALUDOS.

0voto

Leonardo-Tadei comentado

Al acceder a las imágenes aparece un "403 - Forbidden"... supongo que son accesibles para vos mo usuario registrado del lugar en dónde las pusiste, pero no para todos los demás.
Sin ver las imágenes, no podemos ver qué es lo que et está pasando...

0voto

Peter comentado

Al parecer subes tus imágenes a un servidor en donde solo tu tienes permisos de para verlas. Como bien dice @Leonardo-Tadei sale un error 403. Lo mismo que ha pasado en tus otras preguntas.

Por favor edita la pregunta y sube tu imágenes a un lugar que funcionen para todos.

Saludos.

0voto

Jade comentado

@Leonardo-Tadei
@Peter

Ya lo edité y se los dejé solamente con los link's a las imágenes.

Puse link's de dos servidores diferentes.

2 Respuestas

1voto

white Puntos75880

Hola @curiosport, la verdad es que el script que tienes no está pensado para todo el sitio, tendrías que tener un código más flexible, mi sugerencia es que comiences a leer sobre javascript y ya que T! usa jquery como librería, puedes leer sobre esta librería también.

La razón por la que el icono de emoticones no funciona, se debe a que:

  • el textarea tiene la clase 'emoji-loaded'
  • no has llamado al metodo emoticons()

linea 7094:

http://o1.t26.net/js/acciones.js?511

intenta con esto:

;(function () {
  'use strict';

  var rulesToEditors, whereIsLince, boldMarkupSet, italicMarkupSet,
      container, textareaBox, textareaBoxClone;

  boldMarkupSet = {
    name:lang['Negrita'],
    beforeInsert: markButtons.bold,
    action: 'bold',
    key: 'B',
    openWith: '[b]',
    closeWith: '[/b]',
    className: "mark-bold"
  };

  italicMarkupSet = {
    name:lang['Cursiva'],
    beforeInsert: markButtons.italic,
    action: 'italic',
    key: 'I',
    openWith: '[i]',
    closeWith: '[/i]',
    className: "mark-italic"
  };

  rulesToEditors = {

    post: function () {
      var markitcomment, cont_comm, addV6BbcodesCss, addFAIcons;

      cont_comm = $('.myComment-text-box .cont_comm');
      textareaBox = $('#body_comm');
      textareaBoxClone = $('#body_comm').clone();
      addV6BbcodesCss = function () {
        $('<link/>', {
          rel: 'stylesheet',
          href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css'
        }).appendTo('head');

        $('<style>', {
          type: 'text/css'
        }).html(
          '#cont_reply .markItUpHeader a.fa,' +
          '.cont_comm .markItUpHeader a.fa {' +
          '  font-size: 14px;' +
          '  height: 16px;' +
          '  margin-top: 6px;' +
          '  width: 18px;' +
          '  margin-right: 4px;' +
          '}'
        ).appendTo('head');
      };
      addFAIcons = function (container) {
        container
        .find('.markItUpButton.mark-bold > a')
        .html('')
        .addClass('fa fa-bold');

        container
        .find('.markItUpButton.mark-italic > a')
        .html('')
        .addClass('fa fa-italic');
      };

      // customize our comment box options
      settingsComment.markupSet.unshift(
        boldMarkupSet,
        italicMarkupSet
      );

      addV6BbcodesCss();
      textareaBox.parents('.markitcomment').remove();
      cont_comm.append(textareaBoxClone);

      // agregamos el plugin markitup
      //commentBoxClone.markItUpRemove();
      textareaBoxClone.markItUp(settingsComment);

      // add T! smileys feature
      textareaBoxClone.removeClass('emoji-loaded');
      textareaBoxClone.emoticons();

      textareaBoxClone.uberText({
        limit: 5000,
        show: -50,
        autogrow: true,
        lines: 4
      });

      addFAIcons(cont_comm);

      $('.answerCitar > a').on('click', function () {
        addFAIcons($('#cont_reply'));
      });
    },

    pm: function () {      
      container = $('#ffreply');
      textareaBox = $('#nbody_fastreply');
      textareaBoxClone = textareaBox.clone();

      textareaBox.parents('.nmarkitfastreply').remove();
      container.append(textareaBoxClone);

      nmySettings_fastreply.markupSet.unshift(
        boldMarkupSet,
        italicMarkupSet
      );

      textareaBoxClone.markItUp(nmySettings_fastreply);
      textareaBoxClone.removeClass('emoji-loaded');
      textareaBoxClone.emoticons();
    },

    comment_box: function () {
      container = $('.myComment-text-box .cont_comm');
      textareaBox = $('#body_comm');
      textareaBoxClone = textareaBox.clone();

      textareaBox.parents('.markitcomment').remove();
      container.append(textareaBoxClone);

      settingsComment.markupSet.unshift(
        boldMarkupSet,
        italicMarkupSet
      );

      textareaBoxClone.markItUp(settingsComment);
      textareaBoxClone.removeClass('emoji-loaded');
      textareaBoxClone.emoticons();
    }
  };

  whereIsLince = function () {
    if (global_data.postid !== '') {
      return 'post';
    } else if ($('#ffreply').length) {
      return 'pm';
    } else if ($('#tema-container').length ||
               $('#markItUpBody_comm').length) {
      return 'comment_box';
    }

    return null;
  };

  if (whereIsLince()) {
    rulesToEditors[whereIsLince()]();
  } 

})();

saludos!

0voto

Jade comentado

@white !!!!! eres un GENIO el código va perfecto desde la consola, aunque la primera y última línea tuve que borrarlas, no tienen ninguna función por lo que veo, pero... siempre hay un pero, cuando guardo eso como un Script para el GreaseMonkey y cargo la página los cambios no se ven.

¿Qué podría ser?

Dudo que sea un error de tipeo en el GreaseMonkey porque ya he hecho varios script's y sé como funciona ese complemento.

Sin embarego en el TamperMonnkey de Chrome va PERFECTO (lo cuál es muy raro), pienso que podría ser un bug de greaseMonkey pero tú que dices?

PD: Estoy con las últimas versiones.

1voto

white comentado

yo lo probe y no tuve problema en greasemonkey, intenta cargar el script cuando el dom este listo.

aca te dejo el código por si deseas probarlo: t_bbcode_plus_plus.js

0voto

Jade comentado

@white Gracias viejo, si funcionó el script, ESTOY REALMENTE MUY AGRADECIDO CON VOS.

Me despido, si se me surge alguna otra duda vuelvo por acá.

2votos

Leonardo-Tadei Puntos227320

Hola @curiosport,

estás clonando (es decir, haciendo una copia) de la barra y agregándola sin borrar la original.

Con esto, obtenés la original y además la tuya con los agregados de la negrita e itálica. Luego, seguramenet muchas cosas no funcionarán porque te quedan repetidos los ID de los elementos, que debe ser únicos...

Si no estás familiarizado con JavaScript, te sugiero enfáticamente que no uses un framework como JQuery para aprender, ya que se te va a sumar la complegidad del lenguaje con la complejidad del framework, que como tal tiene sus propias reglas y sintaxis.

En vez de clonar la barra entera, te debería ser mucho más simple agregar los dos botones usando la función nativa appendChild() http://www.w3schools.com/jsref/met_node_appendchild.asp

Usando esta función solamente agregás los dos botones y esto no debe alterar el funcionamiento de todo lo demás.

Saludos cordiales!

0voto

Jade comentado

Y con appendchild como quedaría el código?

Olvidé mencionar que si añadía esto a la última línea:
.markItUpRemove(), el comando no funcionaba y con delete me decía función no admitida...

Estuve pensando lo mismo que usted mencionó, simplemente agregar los botones con appendchild sin tener que clonar, pero como yo no sé programar en ese lenguaje no pude hacerlo, podrías decirme como quedaría el código?

0voto

Leonardo-Tadei comentado

Para dar un ejemplo de código, yo necesito ver la porción de HTML que contiene al editor, ya que appendchild() es relativo al elemento del DOM.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta