2012-03-20 9 views
8

Tengo una caja que es exactamente 425px x 100px y quiero que mis usuarios peguen el contenido de estos cuadros con un editor WYSIWYG. Deberían poder usar casi todos los HTML dentro de esta caja.Mejor solución WYSIWYG de JavaScript para una caja fija

No, estoy buscando un editor WYSIWYG adecuado, solía usar TinyMCE para este tipo de problemas, pero creo que es mejor para un texto largo y continuo, pero ahora tengo una caja fija.

Sería estupendo si el editor puede colocar el texto y las imágenes de manera absoluta, de modo que el usuario pueda ubicar sus contenidos donde quiera dentro de este cuadro.

+0

¿Está solicitando una aplicación web que permita a los usuarios colocar elementos html absolutamente dentro de un contenedor fijo? –

+0

sí algún tipo de editor wysiwyg. eso está optimizado para un contenedor fijo. –

Respuesta

6

http://ckeditor.com/

i encontrado CKEditor útil, tienen una rica funcionalidad con respecto a la imagen o texto, permitirá que ambas WYSIWYG y HTML de código fuente métodos de formato, y también tiene fijar tamaño "lienzo", el usuario puede personalizar según las necesidades,

pantalla de impresión de mi uso práctico de él, enter image description here

y aquí está la pantalla de fuente enter image description here y finalmente estoy usando lienzo 800x500 tamaño fijo

enter image description here

+0

También estoy haciendo algo similar con Ckeditor. Cualquier 'posicionamiento' de elementos deseado por el OP que no sea ya compatible con el editor puede incorporarse fácilmente utilizando capacidades de diálogo/plugin personalizados. –

0
+1

este wysiwyg parece estar muy cerca de tinymce y no puedo encontrar una opción para usar un "lienzo" de tamaño fijo que el usuario pueda personalizar. –

+0

La altura y el ancho del lienzo se pueden ajustar como se muestra mediante tariq.Solo querrá apagar el botón que cierra la barra de herramientas porque al cerrar la barra de herramientas se recupera parte del espacio del lienzo (y, por lo tanto, cambia el tamaño del lienzo). –

4

Usted puede hacer esto utilizando tinymce. Para colocar el texto y las imágenes, necesitará un contenido propio CSS (consulte tinymce documentation for the configuration parameter content_css). Incluso puede definir el ancho de los párrafos del contenido de tinymce en este CSS, solucionando el problema de su caja. El CSS (para ser colocado en su propio archivo CSS) para su problema de caja se vería como la siguiente:

p { 
    width: 100px; 
} 

En cuanto a la longitud (o mejor heigth) puede que tenga que poner en práctica un propio plugin y comprobar si la longitud del contenido del editor allí. Si se ha alcanzado esa longitud, ya quita la letra/contenido que el usuario acaba de insertar.

+0

si tiene alguna pregunta sobre este enfoque, no se asuste – Thariama

+0

TinyMCE es el mejor editor WYSIWYG, con muchos complementos disponibles para documentación libre y clara. – Raptor

+0

¿Cómo es TinyMCE mejor que Ckeditor? –

1

Una solución simple pero eficaz sería PageDown. Utiliza Markdown, por lo que permite el formato HTML. Sin embargo, PageDown incluye dos scripts para desinfectar su contenido. Con un poco de retoque puede permitir o restringir etiquetas adicionales.

En cuanto al posicionamiento, como dijo Thariama, eso es fácilmente controlado por su CSS, por lo que no es un problema para los editores WYSIWYG.

0

dependiendo de su necesidad i sugeriría para nicedit. También puedes tenerlo en versión ligera junto con alto y ancho fijo.

Cuestiones relacionadas