Configurar Caja de texto enriquecido


([N3] pacosatu) #1

Hola.

He estado montando un control Caja de Texto enriquecido y en mi pelea con las barras de herramientas y el estilo inicial del texto, os comparto el resultado que ha quedado bastante satisfactorio.

1º - Controlar la visualización de las barras de herramientas.
En tiempo de diseño poner la propiedad “Barras de herramientas” = Iconos. Aunque pongamos a false todas las barras, siempre aparece la barra de herramientas de Copiar/Pegar/Deshacer… y no se puede ocultar.
Para arreglarlo he usado el siguiente código del API y funciona perfectamente.


var oForm = theRoot.dataView()
var oTextEdit = oForm.control(“ED_OBSERVACIONES”)
with (oTextEdit) {
showFormatToolBar()
showAlignToolBar()
showListToolBar()
showStyleToolBar()
hideAllToolBars()
}

Viendo el código, parece que no es la forma correcta, pero funciona tal como se muestra en la imagen adjunta. He conseguido mostrar todas las barras excepto la de Copiar/Pegar/Deshacer…

2º - Aplicar estilo a las barras de herramientas.
Quiero independizar el estilo aplicado a las barras del control Caja de Texto enriquecido del aplicado al resto de barras de herramientas del marco Autoexec.
Uso el siguiente estilo CSS aplicado a los botones, la propia barra y a los combos del tipo de letra.


/* Botón /
VTextEdit QToolBar {
spacing: 0px;
}
/
Barra de Herramientas /
VTextEdit QToolBar QToolButton {
margin: 0px;
padding: 0px;
font-family: Arial;
font-size: 10px;
font-weight: normal;
}
/
Combos del tipo de letra */
VTextEdit QToolBar QComboBox {
font-family: verdana, sans-serif;
font-size: 11px;
background: GhostWhite;
padding: 2px 4px;
border: 1px solid DarkGray;
border-radius: 3px;
color: black;
min-width: 2em;
}

3º - Establecer un estilo de letra por defecto
Inicializamos el control Caja de Texto enriquecido en el PRE o POS init del formulario con el siguiente código HTML:


If ( #ID = 0 )
Rem ( Iniciamos el HTML del TextEdit para que coja la Fuente por defecto )
Modificar campo ( OBSERVACIONES, “<html> <head> <style>” + ~APP_TEXTEDIT_INICIAR@0PS_Ejercicios_dat.dat + “</style>
</head> <body><p> </p></body> </html>” )

~APP_TEXTEDIT_INICIAR es una constante con el estilo CSS que determina el estilo de letra por defecto:
Por ejem: body {font:12pt Verdana, sans-serif;} p {margin:0;}

Como véis, con la ancestral técnica de la prueba y error (ante la exasperante falta de documentación de Velneo), logramos tener un control Caja de Texto enriquecido un poco más personalizado.

Saludos
Paco Satué


([N3] pacosatu) #2

Los adjuntos




([N1] wikan) #3

@seh muchas gracias por compartir.


([N2] ramiro) #4

Muchas gracias, Paco.

Creo que me vendrá muy bien.
Hace algún tiempo intenté gobernar la letra por defecto y mi paciencia se acabó antes de lograrlo.

Saludos. Ramiro


([N1] roberto) #5

Hola seh, no me funciona el estilo en la constante. Como declaras el contenido en la constante???

Gracias


([N1] OscarBarea) #6

Hola Paco,
Y como podríamos hacer para cambiar el estilo de la letra por defecto de un control Caja de Texto enriquecido, si ya tenemos datos introducidos con otro formato?
Gracias
Oscar B.


([N1] OscarBarea) #7

@Roberto, la constante deberá ir sin comillas


([N1] OscarBarea) #8

Hola,
He estado probando de Establecer un estilo de letra por defecto, pero no funciona
Lo intento, pero no hay manera de darle un estilo propio al campo de texto enriquecido.
Alguna idea?
Oscar B.


([N3] pacosatu) #9

Hola Oscar.

La Caja de Texto enriquecido no contiene mas que código HTML que puedes manipular como cualquier cadena de Texto.
Yo he usado el estilo del Tag body para establecer la fuente por defecto.

Tal como funcionan los estilos CSS, en un campo que ya contiene texto, si cambias la fuente del Tag body deberá cambiar la fuente de todo el texto de la caja, excepto en donde hayas establecido un formato concreto.

En cualquier caso, para tu caso, muestra el contenido de la Caja texto enriquecido en una Caja de texto normal para ver el código HTML completo. Analiza lo que veas y con simples comandos de gestión de cadenas de texto podrás cambiar el formato fácilmente añadiendo o quitando los estilos HTML/CSS necesarios.

Saludos
Paco Satué


([N3] Juanjo) #10

Muchas gracias Paco.


([N1] OscarBarea) #11

Hola,
Estoy intentando iniciar un control “Caja texto enriquecido” con un estilo de letra y tamaño concreto , pero no hay forma (adjunto imágenes)
Inicio el campo con el siguiente código (imagen adjunta):

<!DOCTYPE HTML PUBLIC \c-//W3C//DTD HTML 4.0//EN\c \chttp://www.w3.org/TR/REC-html40/strict.dtd\c>
<html><head><meta name=\cqrichtext\c content=\c1\c /><style type=\ctext/css\c>
p, li { white-space: pre-wrap; }
</style></head><body style=\c font-family:'Arial'; font-size:18px; font-weight:400; font-style:normal;\c>

La caja de Texto no cambia. Cuando escribo texto en la caja, me modifica el código anterior (imagen adjunta)
Alguien ha podido iniciar una caja de texto enriquecido con una tipografía y tamaño concretos.
Gracias
Oscar B.




([N3] pacosatu) #12

Hola Oscar.

Al comienzo de este hilo ya puse el código HTML para fijar la fuente por defecto.
Por favor, sigue las instrucciones al pie de la letra.

Para que coja la fuente por defecto se necesita pulsar la tecla Inicio o Home.
En Velneo no podemos simular la pulsación de teclas, así que tenemos que recurrir a un script externo a al API.

La clase VLineEdit tiene la función home(), pero la clase VTextEdit no la tiene (esta es una de las muchas cosas que me saca de quicio de Velneo).

De todas formas, siguiendo con el método de “prueba y error”, la función VTextEdit.selectAll() hace la misma función, no selecciona el texto pero sí que fuerza la fuente correcta.

Prueba a ejecutar VTextEdit.selectAll() después de asignar el contenido inicial.

Saludos
Paco Satué


([N1] OscarBarea) #13

Gracias Paco, pero no entiendo muy bien lo que comentas. de ejecutar VTextEdit.selectAll(), antes no lo habías mencionado.
Adjunto imágenes de los eventos,
La imagen 01 es el evento PRE_INI
La imagen 02 es otro evento JavaScript() con la sentencia VTextEdit.selectAll()
Es correcto?, porque no me funciona.
Disculpa mi ignorancia en Java
Gracias




([N1] OscarBarea) #14

Hola de nuevo,
No hay forma, desisto, pero lo que no funciona bien es el control “Caja texto enriquecido”, detallo:

  • Sin configurar nada de nada para dicho control, cuando entro información, por efecto me aparece la tipografía “MS Shell Dlg 2” cuerpo “8” (en windows). Cuando guardo el registro y vuelvo a entrar, me aparece la tipografía a “Verdana” y sin cuerpo. Al imprimir, el texto sale hipar pequeño, debo seleccionar todo el texto y asignarle un cuerpo.
    Esto me pasa siempre y en todos los sistemas operativos.
    Es desesperante!!!
    No funciona bien.
    Como se puede solucionar? que hago mal?
    Gracias
    Oscar B.

([N3] pacosatu) #15

Hola Oscar.

Lamento que no te funcione, pero si no te estudias el API de Velneo y un poco de Javascript te va a resultar muy duro resolver muchos problemas de tus aplicaciones.
Además ten en cuenta que esto no está documentado por Velneo y mucho menos soportado. En las próximas versiones puede dejar de funcionar y no digamos cuando pasamos a multiplataforma.

Te vuelvo a poner el código javascript que inicializa el texto enriquecido añadiendo la última línea que permite mostrar la fuente seleccionada correctamente.


var oForm = theRoot.dataView()
var oTextEdit = oForm.control(“ED_OBSERVACIONES”)
with (oTextEdit) {
showFormatToolBar()
showAlignToolBar()
showListToolBar()
showStyleToolBar()
hideAllToolBars()
}
// Ejecutando un selectAll() el cursor aparece al principio con la fuente seleccionada
oTextEdit.selectAll()

Ejecuta este código en el evento POS_INI del formulario después de haber rellenado el Texto enriquecido.

Y por supuesto, la culpa de todo esto la tiene solo Velneo, que no es capaz de proporcionarnos un Control Texto enriquecido del siglo XXI.

Saludos
Paco Satué


([N1] OscarBarea) #16

Gracias Paco,
Lo que comentas me funciona, pero yo no quiero quitar la caja de herramientas, lo que quiero es que me aparezca la fuente “Arial” con cuerpo “8” al inicio de cualquier caja de texto enriquecido, y no lo consigo. No hay forma.
He probado con CSS, iniciando control con parte del código html que se genera, pero o hay forma.
Alguien lo ha conseguido?
Tengo un par de clientes que se suben por las nubes. Cuando llenan la caja de texto enriquecido y guardan el formulario, todo lo que han escrito es como si no tuviera formato e impreso se ve super enano. Tiene que entrar, seleccionar todo el contenido y cambiar la tipografía.
Un verdadero dolor de cabeza para una cuestión tan simple.
Saludos,
Oscar B.


([N4] Fischerpro) #17

Hola Oscar no se si te refieres a la fuente que da por default al abrir, si es así yo la determino desde la propiedad del control en fuente. y cada que se abre tendra por default esa fuente.

Anexo imagen


([N4] Fischerpro) #18

Anexo de nuevo la imagen



([N1] OscarBarea) #19

Hola Fischerpro, he probado lo que comentas, pero siempre me sale la fuente del sistema. La verdad es que una cosa tan simple pueda dar tantos quebraderos de cabeza.
Gracias


([N3] pacosatu) #20

Hola Oscar.

Es cierto que el funcionamiento del control Texto Enriquecido de Velneo es un poco errático y tenemos pocas posibilidades de mejorarlo.
Hagas lo que hagas siempre habrá un momento en que el control se desmadra (una chapucilla que debería revisar el equipo de Velneo). Consúltalo a Soporte.

He probado una librería externa javascript (http://ckeditor.com/) para usar el Visor HTML como Editor de Texto Enriquecido y el resultado es bastante bueno. Eso sí, es una librería bastante extensa y necesita su tiempo de aprendizaje, aunque la documentación y soporte es excelente.

En Internet tienes infinidad de librerias javascript más sencillas que podrán sustituir al Control de Texto Enriquecido.

Puedes probarla en el “Editor de código HTML” que he publicado en —> vatp://pruebas:pruebas@v7cloud6.velneo.com:8894/0PS_Varios_iapp

Échale un vistazo.

Saludos
Paco Satué