Question

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:

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:

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:

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:

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.

Comments

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

---

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.

---

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

Answer 1

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!

Answer 2

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!