¿Cómo mostrar estilos en un área de texto HTML?
https://stackoverflow.com/questions/245507
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Estoy tratando de agregar diferentes estilos dentro de un área de texto, por ejemplo, negrita, diferentes colores, etc.
Los editores WYSIWYG (por ejemplo, tinyMCE) que se usan en las páginas web suelen hacer esto, pero tengo problemas para averiguar cómo lo hacen.
No puedes hacer esto:
texto alternativo http://www.yart.com.au/test/html.gif
Entonces, ¿cómo lo logran?
Solución
Owen tiene la idea correcta. Esas bibliotecas reemplazan el área de texto con un iframe y luego ponen el documento del iframe en modo designMode o contentEditable. Literalmente, esto le permite editar el documento html en el iframe mientras el navegador maneja el cursor y todas las pulsaciones de teclas por usted y le brinda 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 acerca de cómo habilitar este modo y qué puede hacer con él, consulte: https: // developer.mozilla.org/En/Rich-Text_Editing_in_Mozilla
Sin embargo, mi sugerencia para usted es utilizar una de las bibliotecas de control de texto enriquecido existentes si desea esta capacidad en su sitio. He creado uno antes y descubrí que pasarás una gran cantidad de tiempo lidiando con las inconsistencias 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 los cambios de estilo, IE usa <b>, <i>, etc., mientras que FF usa tramos con atributos de estilo.
Otros consejos
Por lo general, superponen el área de texto con su propio componente de visualización 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 del área de texto 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 usa 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, copia toda la información nuevamente en el área de texto para su procesamiento.
