javascript - editable - wysiwyg editor free

¿Cómo hacer una sección WYSIWYG en una página web?

Question

Quiero saber el principio básico utilizado para las páginas WYSIWYG en la web. Empecé a codificarlo y lo hice usando un área de texto, pero muy pronto me di cuenta de que no puedo agregar ni mostrar imágenes ni ningún HTML en el área de texto. Así que lo hice usando DIV, pero no entendí cómo podría hacerlo editable.

Entonces, en esencia, quiero saber cómo (en principio) hacer una sección de DIV editable en una página web, algo similar a los documentos de Google o FCKEditor o TinyMCE.

Estaría muy agradecido por cualquier información y punteros.

¡Gracias!

Answer 1

Use TinyMCE y apague las barras de herramientas.

En serio, hacer un editor WYSIWYG para la web es mucho más complicado de lo que parece y hay un millón de formas en que puede salir mal. Podría pasar los próximos dos meses batallando con diferentes navegadores y cosas que se rompen sin una buena razón, o puede confiar en las personas que saben más sobre el tema que usted o yo.

TinyMCE es impresionantemente configurable, y puedes ocultar todas las barras de herramientas solo con las opciones de configuración más simples:

tinyMCE.init({
    mode: ''textareas'',
    theme: ''advanced'',
    theme_advanced_buttons1 : '''',
    theme_advanced_buttons2 : '''',
    theme_advanced_buttons3 : '''',
    theme_advanced_statusbar_location : "none",
});

También puede usar CSS normal para hacer

.mceLayout {
    background: none !important;
    border: none !important;
}

No estoy seguro de lo que quiere para el área WYSIWYG, pero es probable que necesite obtener los contenidos en algún momento. Puedes hacer esto con un simple Javascript:

var editor = tinyMCE.get(''editorid'');
var stuff = editor.getContent();

Es gratuito, fácil de usar y confiable para muchos usuarios. No hay una buena razón para reinventar la rueda.

Answer 2

TinyMCE es de código abierto, por lo que puedes echar un vistazo a cómo funciona bajo el capó. :)

De las instrucciones de instalación se desprende que una sección de form HTML (para permitir el envío del formulario al servidor para su almacenamiento) se realiza con un área de textarea dentro del cual se reemplaza con el editor TineMCE.

El origen se hace referencia desde el archivo tiny_mce.js que se hace referencia en el archivo HTML de destino, por lo que podría ser un buen punto de partida para ver cómo funciona.

¡Buena suerte!

Editar:

Aunque no pasé mucho tiempo mirando el origen de TinyMCE, parece indicar que el editor está dentro de un iframe , por lo que puede explicar cómo se pueden mostrar las imágenes en un área "editable".

Si tiene curiosidad, descargue el paquete de desarrollo y eche un vistazo a tiny_mce/jscripts/tiny_mce/classes/Editor.js . Alrededor de la línea 400, parece que están configurando un iframe y agregándolo al DOM del HTML objetivo.

Answer 3

contentEditable indicador contentEditable que se puede agregar a cualquier elemento en una página para hacerlo editable, por ejemplo.

<div contentEditable>I am editable!!!!</div>

Debería funcionar en todos los principales navegadores hoy en día, y cosas como teclas de acceso directo (cmd / ctrl-b, etc.) solo funcionarán.

El envío de formularios se puede hacer sacando innerHTML de la región editable.

Answer 4

Lo que ves es lo que quieres decir que es el camino: no sigas el camino WYSIWYG ya que está lleno de trampas.

WYMeditor es el mejor cuando se trata de generar HTML semántico y limpio.