Estoy tratando de añadir diferentes estilos dentro de un área de texto por ejemplo, negrita, diferentes colores, etc.¿Cómo se pueden mostrar los estilos en un área de texto HTML
editores WYSIWYG (por ejemplo TinyMCE) se utilizarán en páginas web suelen hacer esto, pero estoy teniendo problemas resolviendo cómo lo hacen.
No se puede hacer esto:
alt text http://www.yart.com.au/test/html.gif
Entonces, ¿cómo lo logran?
Owen tiene la idea correcta. Esas bibliotecas reemplazan el área de texto con un iframe y luego colocan el documento del iframe en el modo designMode o contentEditable. Esto literalmente le permite editar el documento html en el iframe mientras el navegador maneja el cursor y todas las pulsaciones del teclado para usted y le da una API que se puede llamar para realizar cambios de estilo (negrita, cursiva, etc.). Luego, cuando el usuario envía el formulario, copia el innerHTML del iframe en el área de texto original. Para obtener más detalles sobre cómo habilitar este modo y qué puede hacer con él, consulte: https://developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla
Sin embargo, le sugiero que utilice una de las bibliotecas de control de texto enriquecido existentes si desea esta capacidad en su sitio. Ya construí uno y descubrí que gastará mucho tiempo tratando con las incoherencias del navegador para obtener algo que funcione bien. Más allá de las diferencias en cómo habilita las funciones de edición, también querrá normalizar el html que se crea. Por ejemplo, IE crea elementos <br> cuando el usuario presiona enter y FF crea etiquetas <p>. Para cambios de estilo, IE utiliza <b>, <i>, etc. mientras que FF utiliza tramos con atributos de estilo.
Normalmente superpondrán el área de texto con su propio componente de pantalla como un div. A medida que el usuario escribe, javascript tomará el contenido escrito y aplicará los estilos en el área de visualización. El valor de textarea es el texto con las etiquetas html necesarias para representarlo en el estilo especificado. De manera visible, el usuario ve el texto con estilo.
Esta es una explicación simplificada, por supuesto.
Creo que tinymce utiliza específicamente una tabla/iframe para fines de visualización (que se sustituye en lugar del área de texto existente). Una vez que esté listo para guardarlo, copiará toda la información en el área de texto para su procesamiento.
Esto tiene sentido, pero ¿cómo verías el cursor si hubiera un div encima de él? – Petras
En realidad, el cursor se coloca en la pantalla y es administrado por javascript. El usuario en realidad no interactúa con el área de texto. –