bootstrap - wysiwyg editor javascript
¿Cómo hacer un editor HTML/JS WYSIWYG? (3)
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.
He intentado muchas búsquedas diferentes de Google, 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. Parece que el texto formateado no se puede colocar en un cuadro de texto y, sin embargo, dan la ilusión de hacer exactamente eso, ¿cómo?
Los editores Javascript WYSIWYG no usan un área de texto (al menos no externamente, es probable que detrás de las escenas haya un área de texto que se rellene con 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 todo un documento, 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).
Una vez que un documento (en términos de editores de texto enriquecido esto generalmente significa incorporar un iframe con designMode configurado en su página) o el elemento se puede editar, el formateo se realiza mediante el método execCommand (para el cual hay varios modos diferentes - negrita , cursiva, etc., que no son necesariamente los mismos en todos los navegadores. Consulte esta tabla 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 :
Tengo una buena idea tomar este código para hacer un editor WYSIWYG genial-
Para hacer un buen editor, he hecho un código con JavaScript que abrirá una nueva ventana que contiene el resultado-
Comencemos 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-todo:
<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 alguna manera, estoy muy feliz de hacerlo.
Gracias por hacerme esta pregunta y por aumentar mi curiosidad por JavaScript.