Comunidad Gambas-es
Simple Editor visual de HTML - Versión para impresión

+- Comunidad Gambas-es (https://gambas-es.org)
+-- Foro: Gambas (https://gambas-es.org/forum-3.html)
+--- Foro: Controles/Librerías/Componentes (https://gambas-es.org/forum-7.html)
+--- Tema: Simple Editor visual de HTML (/thread-475.html)

Simple Editor visual de HTML - Shordi - 22-06-2021

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

RE: Simple Editor visual de HTML - tincho - 22-06-2021

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.

RE: Simple Editor visual de HTML - tincho - 22-06-2021

Shordi. ¿Que hace el siguiente código?
Código:
Public Sub hWebView_MouseDown()

    Dim hTest As WebHitTest = hWebView.HitTest(Mouse.X, Mouse.Y)
    Dim n As Integer
    Dim s As String

    If htest.link Then
        Balloon(hTest.Url, hWebView,, Mouse.X, Mouse.Y)
        Stop Event
    Else If htest.Image Then
        htest.Element.SetFocus()
        bInsertImg.text = ("Actualizar")
        btnInsertImg.value = True
        urlImg.Text = htest.Url
        hWebView.tag = [Mouse.X, Mouse.Y]
        widthImg.Value = htest.Element.Geometry.Width
        HeightImg.Value = htest.Element.Geometry.Height
        s = htest.Element.HTML
        n = InStr(s, "float: ")
        If n > 0 Then
            s = Left(Mid(s, n + 7), InStr(Mid(s, n + 7), ";") - 1)
            alignImg.Index = Split(alignImg.Tag, "|").Find(s)
        Endif
    Endif

End


RE: Simple Editor visual de HTML - Shordi - 22-06-2021

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:
Código:
Public Sub hWebView_MouseDown()

    Dim hTest As WebHitTest = hWebView.HitTest(Mouse.X, Mouse.Y)
    Dim n As Integer
    Dim s As String
       
    If htest.link Then
        Balloon(hTest.Url, hWebView,, Mouse.X, Mouse.Y)
        Stop Event
    Else If htest.Image And btnInsertImg.Value Then 'Añadimos condición
        pnImg.Visible = True
        htest.Element.SetFocus()
        bInsertImg.text = ("Actualizar")
        btnInsertImg.value = True
        urlImg.Text = htest.Url
        hWebView.tag = [Mouse.X, Mouse.Y]
        widthImg.Value = htest.Element.Geometry.Width
        HeightImg.Value = htest.Element.Geometry.Height
        s = htest.Element.HTML
        n = InStr(s, "float: ")
        If n > 0 Then
            s = Left(Mid(s, n + 7), InStr(Mid(s, n + 7), ";") - 1)
            alignImg.Index = Split(alignImg.Tag, "|").Find(s)
        Endif
    Else
        pnImg.Visible = False
    Endif

End

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.
Código:
Public Sub bInsertImg_Click()

    Dim sHtml, s As String
    Dim hTest As WebHitTest

    If Not urlImg.Text Then Return
    If Not alignImg.text Then alignImg.index = 0
    sHtml = "<img style=\""
    If alignImg.text Then sHtml &= "float: &2; "
    If widthImg.Value > 0 Then sHtml &= "width: &4px; "
    If HeightImg.Value > 0 Then sHtml &= "height: &3px; "
    sHtml &= "margin: &5px; \" src=\"&1\">"
    sHtml = Subst(sHtml, urlImg.text, Split(alignImg.Tag, "|")[alignImg.Index], HeightImg.value, widthImg.value, marginImg.Text)
    If bInsertImg.text = ("Actualizar") Then
        hTest = hWebView.HitTest(hWebView.Tag[0], hWebView.Tag[1])
        s = htest.HTML
        hWebView.HTML = Replace(hwebView.HTML, s, sHtml)
        bInsertImg.text = ("Insertar")
    Else
        hWebView.Eval(Subst("document.execCommand('InsertHTML', false,'&1')", sHtml))
    Endif
    urlImg.text = ""
    alignImg.text = ""
    HeightImg.text = ""
    widthImg.text = ""
    marginImg.text = ""
    pnImg.Visible = False    
    'btnInsertImg.value = False   'esta la comentas o eliminas para que el modo de edición no se cancele.
    hWebView.SetFocus()
    hwebView.HTML &= " "

End
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

RE: Simple Editor visual de HTML - tincho - 22-06-2021

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.

RE: Simple Editor visual de HTML - tincho - 22-06-2021

Luego:
[code]
Tampoco existe en 3.16
Saludos.

RE: Simple Editor visual de HTML - Shordi - 22-06-2021

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

RE: Simple Editor visual de HTML - tincho - 22-06-2021

Bueno, probé con qt5 y con gtl3 pero no cambia el formato del texto
Código:
Public Sub tobColor_Click()

  Dim sJscript As String

  WebView1.ExecJavascript("document.execCommand('forecolor', false, '#000000')")
  WebView1.ExecJavascript("document.execCommand('bold', false, false)")
  WebView1.Refresh

End


RE: Simple Editor visual de HTML - Shordi - 22-06-2021

[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