Hacer Pregunta

Conecta

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

0voto

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

preguntó
Web
1449 Vistas
3 Respuestas
abierta

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.

por Jade (800 puntos) en Web
editado por

0voto

carlossevi comentado

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?

por carlossevi (63.580 puntos)

0voto

Jade comentado

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

por Jade (800 puntos)

0voto

Jade comentado

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

por Jade (800 puntos)
editado por

0voto

Peter comentado

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

Saludos.

por Peter (150.460 puntos)

0voto

Jade comentado

No se puede ver las imagenes? pero yo si puedo verlos.

por Jade (800 puntos)

3 Respuestas

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?

por Andhii1293 (2.930 puntos)

0voto

Jade comentado

Esa B es lo que yo puse jajaja mi idea es crear ese botón y guardarlo permanentemente en mi navegador.

por Jade (800 puntos)

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.

por carlossevi (63.580 puntos)

0voto

Jade comentado

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

por Jade (800 puntos)

0voto

carlossevi comentado

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

por carlossevi (63.580 puntos)

0voto

Jade comentado

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

por Jade (800 puntos)

0voto

carlossevi comentado

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.

por carlossevi (63.580 puntos)

0voto

Jade comentado

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?

por Jade (800 puntos)

0voto

white comentado

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);
por white (75.880 puntos)

0voto

Jade comentado

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?

por Jade (800 puntos)

0voto

white comentado

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/

por white (75.880 puntos)

0voto

Jade comentado

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.

por Jade (800 puntos)

0voto

white comentado 

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);
por white (75.880 puntos)

0voto

Jade comentado

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

por Jade (800 puntos)

0voto

white comentado

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.

por white (75.880 puntos)

0voto

Jade comentado

Bueno entonces... gracias.

por Jade (800 puntos)

0voto

Jade comentado

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.

por Jade (800 puntos)
editado por

2votos

Peter comentado

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

Saludos.

por Peter (150.460 puntos)

0voto

carlossevi comentado

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.

por carlossevi (63.580 puntos)

0voto

Jade comentado

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

por Jade (800 puntos)

0voto

Peter comentado

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.

por Peter (150.460 puntos)

0voto

Jade comentado

Los link tampoco se ven?

por Jade (800 puntos)
movido por

0voto

Jade comentado

@carlossevi
@Peter

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

por Jade (800 puntos)
editado por

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

por Jade (800 puntos)

0voto

Jade comentado

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.

por Jade (800 puntos)

0voto

Jade comentado

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

por Jade (800 puntos)

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

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

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

Etiquetas

Categorías

Conecta