Cuadro de texto enriquecido HTML Javascript (IDE)

Question

Espero crear un IDE en javascript que se comporte de manera muy similar a Gmail, excepto que el estilo cambiará automáticamente según lo que escriban a medida que escriben.La lógica de esto no es donde estoy luchando.Así es como Gmail logra la capacidad de editar en un formato de edición enriquecido en html.Hasta donde yo sé, el control de área de texto no funciona de esta manera, entonces, ¿cómo falsifican esta funcionalidad?

Answer 1

Google de "contenido editable" Trate de presionar F7 en la página HTML de edición final de Firefox directamente :) Gmail utiliza marco dentro de una página con contenteditable = "true".

Ver también Google Web Toolkit: http://code.google.com/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=DevGuideWidgetGallery Hay widget de RichTextArea.

Answer 2

No estoy muy seguro de si esto es lo que quieres decir, pero ¿Está buscando un editor WYSIWYG en línea?

En ese caso me permite recomiendo CKeditor , es bastante rápido, moderno y robusto.

Puede encontrar una lista más amplia en el entrada de Wikipedia correspondiente .

Es probable que tenga que personalizar cualquiera de los editores para poder editar E-Mails (Usted no sería capaz de trabajar con cualquier clase CSS predefinidos por ejemplo, por lo que el editor tendría que hacer todo el estilo definiciones directamente en la etiqueta), pero no debería ser un problema.

Answer 3

Descargar uno de los muchos sistemas de código abierto que permite que, y ver cómo lo hicieron.
Básicamente, se están imponiendo los controladores de eventos para el botón que a su vez sabe cómo insertar "cosas" en el lugar que el cursor se encuentra actualmente en el área de texto, o alrededor del área seleccionada en el área de texto.

Answer 4

Mi voto es por 'editarea' que está en la lista de editores basados ​​en web: Otra entrada de Wikipedia.

Pude agregarlo a una página existente con el código más simplista:

<script language="javascript" type="text/javascript" src="edit_area/edit_area_full.js"></script>
<script language="javascript" type="text/javascript" >
editAreaLoader.init({
  id: "my_textarea_id"   // ID of textarea to turn into syntax editor.
  , syntax: "php"
  , start_highlight: true
  , allow_resize: "both"
  , toolbar: "search, go_to_line, |, undo, redo, |, highlight, reset_highlight, word_wrap,|,syntax_selection"
  , min_height:150
  , min_width:400
});
</script>