¿Cómo hacer un editor HTML/JS WYSIWYG?

He intentado muchas búsquedas de Google diferentes pero no he podido encontrar un tutorial actual (más nuevo que 2006) sobre cómo crear realmente un editor WYSIWYG. Me doy cuenta de que ya hay muchos, pero tengo curiosidad sobre cómo funcionan realmente. Revisé parte del código fuente, pero es mucho para digerir. Me preguntaba si alguien podría describir esencialmente cómo funcionan. Es decir, parece que el texto formateado no puede colocarse en un cuadro de texto, y sin embargo, dan la ilusión de hacer exactamente eso, ¿cómo?¿Cómo hacer un editor HTML/JS WYSIWYG?

Fuente

2010-04-20 LDK

Javascript Los editores WYSIWYG no usan un área de texto (al menos no externamente, es probable que entre bastidores haya un área de texto que contenga el código que compone el contenido WYSIWYG para que se pueda publicar en un formulario)

Más bien, hay dos propiedades que se usan para crear un área editable en una página web: designMode, que se aplica a un documento completo, o contentEditable, que se aplica a un elemento específico. Ambas propiedades fueron originalmente innovaciones de Microsoft, pero han sido adoptadas por todos los principales navegadores (contentEditable ahora es parte de HTML5).

vez que un documento (en términos de editores de texto enriquecido esto generalmente significa la incorporación de un iframe con designMode ajustada en su página) o un elemento se hace editable, el formato se realiza mediante el uso de la execCommand método (para lo cual hay un número de diferentes modos - negrita, cursiva, etc. - que no son necesariamente los mismos en todos los navegadores. Consulte this table para obtener más información).

Para pasar contenido del elemento editable al servidor, generalmente el innerHTML del elemento editable, se carga en un área de texto, que se publica. La composición del HTML generado depende del navegador.

Recursos:

Fuente

2010-04-20 20:28:29

en una nota al margen ... Me encantaría ver una versión en lienzo de un editor WYSWIG similar a [bespin] (https://bespin.mozillalabs.com/) (aquí está [presentación en video] (http : //www.youtube.com/watch? v = Ps6GBLlSGLs)) –

Para los interesados, para hacer un elemento editable haz:

– LDK

Tengo la misma pregunta. Ahora es 2014 y se tiene en cuenta HTML5, ¿esta respuesta sigue siendo válida? ¿Necesitamos utilizar iFrames incluso hoy? cc @DavidMurdoch – NoobDeveloper

Básicamente, ocultan su área de texto y colocan un iframe como campo de edición. Capturan su entrada (texto + formato) y escriben el HTML correspondiente en el iframe. Si envía su formulario, incluido el área de texto original, copian el contenido del iframe en el área de texto y, por lo tanto, se envía el código html.
Bueno, esto es bastante simplificado.

Fuente

2010-04-20 20:16:48

tengo una buena idea tomar este código para hacer un WYSIWYG fresco editor-

Para hacer un buen editor de I ha hecho un código con JavaScript que abrirá una nueva ventana que contiene el resultado-

Vamos a empezar con el Cuerpo-

<body> 
<textarea style="height:400px;width:750px;overflow:auto;"onblur="x=this.value"></textarea> 
<br /> 
<button onclick="ShowResult()">see result!</button> 
</body>

Ahora continuamos con el Javascript-

function ShowResult() 
{ 
    my_window = window.open("about:blank", "mywindow1"); 
//By the above line code we have opened a new window 
    my_window.document.write(x); 
//Here we have added the value of the textarea to the new window 
}

Veamos el código en su conjunto: -

<html> 
<script type="text/javascript"> 
function ShowResult() 
{ 
    my_window = window.open("about:blank", "mywindow1"); 
    my_window.document.write(x); 
} 
</script> 
<body> 
<textarea style="height:400px;width:750px;overflow:auto;" onblur="x=this.value"> 
</textarea><br /> 
<button onclick="ShowResult()">see result!</button> 
</body> 
</html>

Si Puedo ayudarte de cualquier manera. Estoy muy feliz de hacer eso.

Gracias por hacer esta pregunta y por aumentar mi curiosidad hacia JavaScript.

Fuente

2012-06-02 20:33:26 NewUser

-1 para usar
etiqueta, manejo de eventos en línea y estilo en línea! –

+22

Ojalá pudiera -1 por ignorancia. Esto es solo un ejemplo y mostrar las reglas de estilo en línea hace que las cosas sean más fáciles de entender que tener que referirse a un bloque adicional de código css ... –

@AakashGoel +1 para equilibrarlo. – Ced

¿Cómo hacer un editor HTML/JS WYSIWYG?

Respuesta

Cuestiones relacionadas