Este foro usa cookies
Este foro utiliza cookies para almacenar su información de inicio de sesión si está registrado y su última visita si no lo está. Las cookies son pequeños documentos de texto almacenados en su computadora; las cookies establecidas por este foro solo se pueden usar en este sitio web y no representan ningún riesgo de seguridad. Las cookies en este foro también rastrean los temas específicos que ha leído y la última vez que los leyó. Si Ud. continúa navegando, entenderemos que acepta todas las cookies.

Se almacenará una cookie en su navegador, independientemente de la elección, para evitar que se le vuelva a hacer esta pregunta. Podrá cambiar la configuración de sus cookies en cualquier momento utilizando el enlace en el pie de página.

El foro antiguo se encuentra accesible desde https://foro.gambas-es.org en modo de solo lectura.

Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5

Simple Editor visual de HTML
#1

A raíz de otro hilo del foro, he revivido un antiguo proyecto mío que no recuerdo por qué abandoné... creo que por falta de uso al no tener ningún programa en marcha en aquella época que lo utilizase. Es un editor de HTML basado en webview. Utiliza aspell para la revisión ortográfica por lo que si no tenéis instalado aspell o aspell-es (el diccionario) no hará dicha revisión. Es para QT5.

Saludos


Archivos adjuntos
.gz HttpEdit-1.0.2.tar.gz Tamaño: 29.72 KB  Descargas: 6

No podemos regresar
[-] Los siguientes 1 usuarios dice gracias a Shordi por este post:
  • tincho
    ¡Gracias!
#2

Ok Shordi, lo descargue, le voy a echar un vistazo.
Gracias por compartir el código.
Saludos.

Bien estoy estudiando el control, por lo que veo hasta ahora tiene potencial.
De momento veo que usas algo interesante que es javascript dom y que el webview es editable (cosa que no sabia hasta ahora)
Estoy intentando hacer que el control sea neutro desde el punto de vista del UI pero hay una serie de componentes que no lo permiten porque no existe la la versión gtk de estos. por ejemplo:
  • gb.opengl gb.qt5.opengl ¿Para que se usan aquí?
  • Dim hTest As WebHitTest = hWebView.HitTest(Mouse.X, Mouse.Y) ¿Que es esto?
Bueno sigo trabajando pero si me echas una mano con estos puntos creo que avanzare mas de prisa.
Saludos.
    ¡Gracias!
#3

Shordi. ¿Que hace el siguiente código?
GAMBAS
  1. Public Sub hWebView_MouseDown()
  2.  
  3.     Dim hTest As WebHitTest = hWebView.HitTest(Mouse.X, Mouse.Y)
  4.     Dim n As Integer
  5.     Dim s As String
  6.  
  7.     If htest.link Then
  8.         Balloon(hTest.Url, hWebView,, Mouse.X, Mouse.Y)
  9.         Stop Event
  10.     Else If htest.Image Then
  11.         htest.Element.SetFocus()
  12.         bInsertImg.text = ("Actualizar")
  13.         btnInsertImg.value = True
  14.         urlImg.Text = htest.Url
  15.         hWebView.tag = [Mouse.X, Mouse.Y]
  16.         widthImg.Value = htest.Element.Geometry.Width
  17.         HeightImg.Value = htest.Element.Geometry.Height
  18.         s = htest.Element.HTML
  19.         n = InStr(s, "float: ")
  20.         If n > 0 Then
  21.             s = Left(Mid(s, n + 7), InStr(Mid(s, n + 7), ";") - 1)
  22.             alignImg.Index = Split(alignImg.Tag, "|").Find(s)
  23.         Endif
  24.     Endif
  25.  


    ¡Gracias!
#4

Cita:
  • gb.opengl gb.qt5.opengl ¿Para que se usan aquí?
  • Dim hTest As WebHitTest = hWebView.HitTest(Mouse.X, Mouse.Y) ¿Que es esto?

Creo recordar que todo eso se debe a la necesidad de saber qué hay ahí donde haces click. Encontré esa manera... pero no me preguntes mucho más, que no recuerdo casi nada.
Cita:Shordi. ¿Que hace el siguiente código?

Me lo temía.
Pues en dos palabras comprueba sobre Qué hemos hecho click, lo almacena en una variable llamada htest y si es un enlace nos saca un baloon con la url y si es una imagen hace... ejem... lo que dice el código. Está clarísimo... claro. Pues eso.

Un poco de compasión con un jubilado oxidado... Big Grin Big Grin Big Grin

Y eso que lo he escrito yo, joer... qué viejuno estoy.

Ahora en serio. Si no te aclaras pregunta again y lo repaso que así, a bote pronto, no recuerdo.

Vale. Ya lo he mirado. En el formulario de edición verás que hay un panel con los elementos necesarios para editar una imagen, el tamaño, la alineación,etc. Cada vez que haces click, si el elemento sobre el que has pulsado es una imagen, esos valores (la url a la que la imagen apunta, tamaño, alienación y demás) se rellenan por si acaso pulsas el botón de editar. Ahora que lo he revisado y escarbado en la memoria, veo que falta algo en el código. Creo recordar que el botón de Insertar/editar imagen en algún momento lo puse Toggle, es decir, que al pulsarlo quedaba pulsado y en ese modo el panel era visible cada vez que clickeabas una imagen y se ocultaba cuando el click era fuera de una imagen y si no estaba activado no se veía nada (aunque los valores sí los cambiaba en el panel). No sé si me explico.
Buscaré por el viejo disco, a ver si encuentro esa versión que creo recordar haber hecho...

Saludos

Lo he encontrado:
GAMBAS
  1. Public Sub hWebView_MouseDown()
  2.  
  3.     Dim hTest As WebHitTest = hWebView.HitTest(Mouse.X, Mouse.Y)
  4.     Dim n As Integer
  5.     Dim s As String
  6.        
  7.     If htest.link Then
  8.         Balloon(hTest.Url, hWebView,, Mouse.X, Mouse.Y)
  9.         Stop Event
  10.     Else If htest.Image And btnInsertImg.Value Then 'Añadimos condición
  11.         pnImg.Visible = True
  12.         htest.Element.SetFocus()
  13.         bInsertImg.text = ("Actualizar")
  14.         btnInsertImg.value = True
  15.         urlImg.Text = htest.Url
  16.         hWebView.tag = [Mouse.X, Mouse.Y]
  17.         widthImg.Value = htest.Element.Geometry.Width
  18.         HeightImg.Value = htest.Element.Geometry.Height
  19.         s = htest.Element.HTML
  20.         n = InStr(s, "float: ")
  21.         If n > 0 Then
  22.             s = Left(Mid(s, n + 7), InStr(Mid(s, n + 7), ";") - 1)
  23.             alignImg.Index = Split(alignImg.Tag, "|").Find(s)
  24.         Endif
  25.     Else
  26.         pnImg.Visible = False
  27.     Endif
  28.  



y algo más abajo, en la línea 350 o por ahí, comentas la línea que oculta el panel después de insertar la imagen.
GAMBAS
  1. Public Sub bInsertImg_Click()
  2.  
  3.     Dim sHtml, s As String
  4.     Dim hTest As WebHitTest
  5.  
  6.     If Not urlImg.Text Then Return
  7.     If Not alignImg.text Then alignImg.index = 0
  8.     sHtml = "<img style=\""
  9.     If alignImg.text Then sHtml &= "float: &2; "
  10.     If widthImg.Value > 0 Then sHtml &= "width: &4px; "
  11.     If HeightImg.Value > 0 Then sHtml &= "height: &3px; "
  12.     sHtml &= "margin: &5px; \" src=\"&1\">"
  13.     sHtml = Subst(sHtml, urlImg.text, Split(alignImg.Tag, "|")[alignImg.Index], HeightImg.value, widthImg.value, marginImg.Text)
  14.     If bInsertImg.text = ("Actualizar") Then
  15.         hTest = hWebView.HitTest(hWebView.Tag[0], hWebView.Tag[1])
  16.         s = htest.HTML
  17.         hWebView.HTML = Replace(hwebView.HTML, s, sHtml)
  18.         bInsertImg.text = ("Insertar")
  19.     Else
  20.         hWebView.Eval(Subst("document.execCommand('InsertHTML', false,'&1')", sHtml))
  21.     Endif
  22.     urlImg.text = ""
  23.     alignImg.text = ""
  24.     HeightImg.text = ""
  25.     widthImg.text = ""
  26.     marginImg.text = ""
  27.     pnImg.Visible = False    
  28.     'btnInsertImg.value = False   'esta la comentas o eliminas para que el modo de edición no se cancele.
  29.     hWebView.SetFocus()
  30.     hwebView.HTML &= " "
  31.  



Por último, esto es a raíz de un vago recuerdo de lo que pretendí hacer en su momento. Si el comportamiento no te parece correcto o intuitivo, acepto lo que hagas.

Saludos

No podemos regresar
    ¡Gracias!
#5

Tranquilo Shordi, tu código me esta sirviendo de mucho.
Lo que te preguntaba antes era porque el gambas 3.16 en el webview ya no existe la propiedad .HitTest tampoco existe la clase WebHitTest en los componentes gui o tal vez cambio de nombre en 3.16.
Pero creo que podrá salir un editor simple de todo esto.
Como nota general te comento que no me enfoco en los iconos del toolbarr ni ningún icono, solo quiero el limpio el proceso de edición para luego aplicar el concepto en cualquier parte.
Mientras mas simple y menos dependiente de otros componentes mejor.
Saludos.
    ¡Gracias!
#6

Luego:
GAMBAS
  1. WebView1.Eval()


Tampoco existe en 3.16
Saludos.
    ¡Gracias!
#7

con qt el webhitest sí funciona. Eval no lo se.

No podemos regresar
    ¡Gracias!
#8

Bueno, probé con qt5 y con gtl3 pero no cambia el formato del texto
GAMBAS
  1. Public Sub tobColor_Click()
  2.  
  3.   Dim sJscript As String
  4.  
  5.   WebView1.ExecJavascript("document.execCommand('forecolor', false, '#000000')")
  6.   WebView1.ExecJavascript("document.execCommand('bold', false, false)")
  7.   WebView1.Refresh
  8.  


    ¡Gracias!
#9

[Imagen: y0DsHZW.png]

A mí sí...
[Imagen: kl8Zn6D.png]
Estos son los componentes y, claro Gambas 3.16

Settings y mdi no creo que sean necesarios, es lo que pasa cuando re-usas otros viejos proyectos

No podemos regresar
    ¡Gracias!


Posibles temas similares…
Tema / Autor Respuestas Vistas Último mensaje

Salto de foro:


Usuarios navegando en este tema: 1 invitado(s)