entre Desarrolladores

Question

Hola, esta es mi duda:

En una página web puedo comentar con negrita sin embargo el botón para activar negrita no está:
enter image description here

Lo que me gustaría hacer es crear un botón "B" en el cuadro de comentarios de esa página web:
enter image description here

Y que al darle clic me salga esto en el cuadro de texto:
enter image description here

Uhm no sé si les sirva pero aquí les dejo el código de dicha página:

<div clss="markItUpHeader">
<ul>
<li class="markItUpButton markItUpButton1 mark-youtube">
<a href="" title="Insertar video (Ctrl+Y)">Insertar video (Ctrl+Y)</a>
</li>
<li class="markItUpButton markItUpButton2 mark-image">
<a href="" title="Agregar Imagen">Agregar Imagen</a>
</li>
<li class="markItUpButtonmarkItUpButton3 mark-emoji">
<a href="" title="Insertar Emoticon">Insertar Emoticon</a>
</li>
</ul>
</div>

O si lo prefieren pueden ver una captura:
enter image description here

El código es solo de los 3 Botones (Video, Imagen Emoticon), no quiero hacer un hackeo ni nada por el estilo, es simplemente para que se vea en mi navegador y me sea más cómodo usar dicha web.

Gracias.

Como bien dices, en el código sólo pones los 3 botones de vídeo, imagen y emoticono, supongo que el resto son generados dinámicamente por algún plugin que tenga la misma página o están en otra parte del código que no has puesto. ¿Puedes aclararlo?

De todas formas, ¿Cómo vas a hacer que esa modificación se te muestre al usar dicha web? ¿Vas a utilizar algún plugin del navegador?
Eso es lo que quiero saber, por decirlo así, modifico el cuadro de comentarios con inspeccionar elemento y logro crear un botón más que vendría a ser el de negrita pero al recargar la página eso se pierde y lo que yo quiero hacer es guardar esop permanentemente (solo en mi pc).,
Me explicaré de otra forma, en esta imagen vemos solo tres botones, Video, Imagen, Emoticon, al darles click nos aparece un cuadro adicional en que debemos poner el link y en el cuadro de texto nos saldrá el link + el código:

Video= [video]link[/video]
Imagen= [img=link]

Ahora lo que yo quiero hacer es agregar un nuevo botón a ese cuadro pero no sé qué código poner (este es solo un ejemplo):

Y otra cosa es que cuando recargo la página eso se pierde, lo que yo quiero es que sea permanente pero solo en mi PC.

No quiero el cuadro adicional, quiero simplemente que al darle click me salga automáticamente este código en el cuadro de texto [b][/b]:

Sorry si no se me entiende pero no sé mucho de programación.
PD: La página web no es mía.

Gracias.
Todo tu comentario esta mal, por favor edítalo con imágenes que se puedan ver.

Saludos.

Answer 1

3 Respuestas

Answer 2 · 2015-09-23T07:44:44+0000

0voto

Andhii1293 Puntos2930

La parte del código que tu pusiste son solo link sin referencias, para hacer lo que deseas seria usando Javascript que es una opción, pero necesitas el código de la pagina completa para modificar la estructura tanto en HTML de los botones, como el diseño CSS y la funcionalidad...

por cierto veo una "B", ¿No has revisado si es el botón de negritas?

respondido por Andhii1293 (2.930 puntos) Sep 23, 2015

Jade · Answer 3 · 2015-09-23T11:58:13+0000

0voto

carlossevi Puntos63580

Échale un vistazo al complemento Greasemonkey para Firefox, que hace precisamente lo que buscas.

Permite que en determinadas páginas se ejecuten scripts de JS almacenados en tu equipo, mediante los cuales puedes modificar el HTML que quieres cambiar.

respondido por carlossevi (63.580 puntos) Sep 23, 2015

0voto

Jade comentado Sep 23, 2015

Exacto!!!! si encontré esa data pero cuál es el lenguaje?

comentado por Jade (800 puntos) Sep 23, 2015

0voto

carlossevi comentado Sep 23, 2015

El lenguaje es Javascript. El proyecto de Greasemonkey tiene una Wiki con documentación en la que explica cómo construir Scripts de usuario.

comentado por carlossevi (63.580 puntos) Sep 23, 2015

0voto

Jade comentado Sep 23, 2015

Me explicaré de otra forma, en esta imagen vemos solo tres botones, Video, Imagen, Emoticon, al darles click nos aparece un cuadro adicional en que debemos poner el link y en el cuadro de texto nos saldrá el link + el código:

Video= [video]link[/video]
Imagen= [img=link]
enter image description here

Ahora lo que yo quiero hacer es agregar un nuevo botón a ese cuadro pero no sé qué código poner (este es solo un ejemplo):

enter image description here

Y otra cosa es que cuando recargo la página eso se pierde, lo que yo quiero es que sea permanente pero solo en mi PC.

No quiero el cuadro adicional, quiero simplemente que al darle click me salga automáticamente este código en el cuadro de texto [b][/b]:
enter image description here

Sorry si no se me entiende pero no sé mucho de programación.
PD: La página web no es mía.

Gracias.

comentado por Jade (800 puntos) Sep 23, 2015

0voto

carlossevi comentado Sep 23, 2015

Sí se entiende.

Para lo que pides se puede utilizar la extensión del navegador que te he puesto, que ejecuta código en una web concreta de forma local, es decir, sólo en tu navegador.

En esa extensión tienes dos opciones: instalar scripts que haya hecho alguien o hacer tus propios scripts. Como tu necesidad parece un tanto especial tendrás que desarrollar el script.

Aquí tienes un pequeño manual de iniciación a Greasemonkey y otro por aquí.

De todas formas, necesitas conocimientos de Javascript y de programación web para poder hacer la adaptación.

comentado por carlossevi (63.580 puntos) Sep 23, 2015

0voto

Jade comentado Sep 23, 2015

Por ahí me dieron este código ¿alguna idea de cómo usarlo?

    $(document).ready(function(){
        $("#ButtonID").click(function(){
            var textbox = $("input:text").val();
            $("input:text").val(textbox + " <b> </b>")       
        })
    })

Y no tienes por ahí algún manual pero en español?

comentado por Jade (800 puntos) Sep 23, 2015

0voto

white comentado Sep 23, 2015

En Taringa ( de donde sacaste la imagen ) usan una version de markitup un plugin para jquery. se me ocurre que modifiques el textarea y revises la documentación

por ejemplo, intenta ejecutar este código en ese sitio y en tu consola:

var settingsComment = {
    nameSpace: 'markitcomment',
    resizeHandle: false,
    markupSet: [
        {name:lang['Insertar video de YouTube'], beforeInsert: markButtons.youtube, className: "mark-youtube"},
        {name:lang['Insertar Imagen'], beforeInsert: markButtons.image, className: "mark-image"},
        {name:lang['Insertar Emoticon'], beforeInsert: markButtons.emoji, className: "mark-emoji"},
        {name:lang['Insertar Link'], beforeInsert: markButtons.link}
    ]
};

var clone = $('#body_comm').clone();
$('#body_comm')
    .parents('.markitcomment')
    .replaceWith(clone);

$('#body_comm').markItUp(settingsComment);

comentado por white (75.880 puntos) Sep 23, 2015

0voto

Jade comentado Sep 23, 2015

Lo hice pero al recargar la página el botón desaparece, y además al darle clic no sale el código de negrita, mi idea es usar greasemonkey pero como lo configuro?

comentado por Jade (800 puntos) Sep 23, 2015

0voto

white comentado Sep 23, 2015

esto es por que solo modificaste el dom, veamos tal como dice @carlossevi usar greasemonkey se reduce a saber javascript, tutoriales hay varios, ya te di una idea de como tienes que modificar el DOM, intenta instalar greasemonkey y crear un script.

https://addons.mozilla.org/es/firefox/addon/greasemonkey/
http://www.masquewordpress.com/como-crear-un-script-para-greasemonkey-con-jquery/
http://hayageek.com/greasemonkey-tutorial/

comentado por white (75.880 puntos) Sep 23, 2015

0voto

Jade comentado Sep 23, 2015

ya lo tenía instalado.

Pero como te dije antes el Botón "B" no tira el código de Negrita...

Solo dame ese código please, ya me leeré todo sobre Gresemonkey de hecho si lo he usado con otros comandos pero no en este tipo de cosas.
Solo dame ese código please.

comentado por Jade (800 puntos) Sep 23, 2015

0voto

white comentado Sep 23, 2015

settingsComment.markupSet.push({
  action: 'bold',
  name: lang['Negrita'],
  key: 'B',
  openWith: '[b]',
  closeWith: '[/b]',
  className: 'mark-bold'
});
var clone = $('#body_comm').clone();
$('#body_comm')
    .parents('.markitcomment')
    .replaceWith(clone);

$('#body_comm').markItUpRemove().markItUp(settingsComment);

comentado por white (75.880 puntos) Sep 23, 2015

0voto

Jade comentado Sep 23, 2015

Gracias viejo ¿vos eres de Taringa? pienso hacer un pequeño post sobre este botón, si es que lo logro jajaja

comentado por Jade (800 puntos) Sep 23, 2015

0voto

white comentado Sep 23, 2015

No la verdad, casi no visito ese sitio, solo que me familiarizo con el código del front-end por un proyecto linksharing que existió y que murió hace mucho.

suerte con el post.

comentado por white (75.880 puntos) Sep 23, 2015

0voto

Jade comentado Sep 23, 2015

Bueno entonces... gracias.

comentado por Jade (800 puntos) Sep 23, 2015

0voto

Jade comentado Sep 24, 2015

Hola!!! @white Disculpa que te vuelva a molestar pero te cuento que al fin logré poner el botón de negrita y hasta puse un botón de más jaja (el de cursiva).

Captura 1
Cap1
http://i.imgur.com/7BDeNfm.png
http://k30.kn3.net/8/C/5/F/F/C/2D2.png

Pero pasa que hay dos cajas de comentarios y ambas están relacionadas al mismo código excepto por el link, uno es de ‘/post’ y otro es del ‘/mi ‘

Y la caja de comentarios de ‘*/post’ al modificar el código se ve así:

Captura 2
Cap2
http://i.imgur.com/soZDYs9.png
http://k46.kn3.net/1/3/C/0/0/8/247.png

Al parecer me va a tocar crear dos scripts para cada link y agregar al Greasemonkey pero por más que intento ese texto no desaparece de ahí, mi idea es dejarlos con las letras B e I puesto que enlazarlo con un icono externo me parece muy difícil, curiosamente ambas cajas de comentarios cumplen las funciones deseadas pero el diseño de /*post/ cambia ¿podrías ayudarme evitar eso? Please.

Gracias.

comentado por Jade (800 puntos) Sep 24, 2015

editado por Jade Sep 27, 2015

2votos

Peter comentado Sep 25, 2015

@curiosport una vez más no se ven las imágenes.

Saludos.

comentado por Peter (150.480 puntos) Sep 25, 2015

0voto

carlossevi comentado Sep 25, 2015

Siento el off topic @Peter pero seguramente estamos ante un problema de anti-hotlinking. Es posible que @curiosport sí que las vea en el caso de que su navegador las tenga cacheadas por haberlas visitado desde otro dominio.

comentado por carlossevi (63.580 puntos) Sep 25, 2015

0voto

Jade comentado Sep 25, 2015

@Peter en ese caso mejor te dejo los link's a las imagenes:
Captura 1
Captura 2

comentado por Jade (800 puntos) Sep 25, 2015

0voto

Peter comentado Sep 27, 2015

Si @carlossevi es un problema o de hotlinking o que solo @curiosport tiene permisos para ver las imágenes. Lo mismo pasa en sus otras preguntas y seguramente lo solucione.

Saludos.

comentado por Peter (150.480 puntos) Sep 27, 2015

0voto

Jade comentado Sep 27, 2015

Los link tampoco se ven?

comentado por Jade (800 puntos) Sep 27, 2015

movido por Peter Sep 27, 2015

0voto

Jade comentado Sep 27, 2015

@carlossevi
@Peter

Coloqué solo link's, fíjensen en mi anterior respuesta que la edité.

comentado por Jade (800 puntos) Sep 27, 2015

editado por Peter Sep 27, 2015

Answer 4 · 2015-09-30T15:51:18+0000

-1voto

Jade Puntos800

Si estás como comentario no puedo escogerte como mejor respuesta @white
Lo voy a dejar así porque eres el único que supo ayudarme.

respondido por Jade (800 puntos) Sep 30, 2015

0voto

Jade comentado Oct 4, 2015

Hola de nuevo @white ehm te cuento que el código que me diste antes no funcionaban en ciertos link's y me tocó crear otro script, lo hice y cuando lo ejecuto desde la consola el script funciona bien (tanto en firefox como en chrome).

Pero cuando lo guardo en el Greasemonkey de firefox el script no se ejecuta correctamente, lo cual es muy raro porque en el Tampermonkey de chrome si funciona.

Este es el error que me tira:
Cap1

Además de que el icono de emoticons no funciona.

Este es el script que usé:

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)
    .removeClass('emoji-loaded')
    .emoticons();

Gracias.

comentado por Jade (800 puntos) Oct 4, 2015

0voto

Jade comentado Oct 4, 2015

Los link's en cuestión son dos pero te dejaré solo con uno:
http://www.taringa.net/mensajes/redactar

comentado por Jade (800 puntos) Oct 4, 2015

Pregunta

¿Cómo insertar un nuevo botón en cuadro de comentarios?

carlossevi comentado Sep 23, 2015

Jade comentado Sep 23, 2015

Jade comentado Sep 23, 2015

Peter comentado Sep 23, 2015

Jade comentado Sep 23, 2015

Por favor, accede o regístrate para añadir un comentario.

3 Respuestas

Jade comentado Sep 23, 2015

Por favor, accede o regístrate para añadir un comentario.

Jade comentado Sep 23, 2015

carlossevi comentado Sep 23, 2015

Jade comentado Sep 23, 2015

carlossevi comentado Sep 23, 2015

Jade comentado Sep 23, 2015

white comentado Sep 23, 2015

Jade comentado Sep 23, 2015

white comentado Sep 23, 2015

Jade comentado Sep 23, 2015

white comentado Sep 23, 2015

Jade comentado Sep 23, 2015

white comentado Sep 23, 2015

Jade comentado Sep 23, 2015

Jade comentado Sep 24, 2015

Peter comentado Sep 25, 2015

carlossevi comentado Sep 25, 2015

Jade comentado Sep 25, 2015

Peter comentado Sep 27, 2015

Jade comentado Sep 27, 2015

Jade comentado Sep 27, 2015

Por favor, accede o regístrate para añadir un comentario.

Jade comentado Oct 4, 2015

Jade comentado Oct 4, 2015

Por favor, accede o regístrate para añadir un comentario.

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

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Santiago2610 comentó Mar 23

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta