El modo de visualización de Tinymce cambia después del inicio

StackOverflow https://stackoverflow.com//questions/25054335

Pregunta

Mi editor es tinymce4+.Funciona mucho en la mayoría de las partes.

Pero no importa lo que haga, hay algo que simplemente no puedo hacer.- cambiar el modo de editor al instante.-

Tengo una página en la que los usuarios pueden seleccionar datos, editarlos y ver el contenido.Los usuarios hacen clic en un botón llamado "modo de vista", la otra cara es "modo de edición"

Esto lo logré poniendo dos DIVs en el mismo contenedor, lo que hace que uno de ellos sea invisible según la configuración de inicio que los usuarios hayan elegido.Uno DIV tiene el editor tinymce, la etiqueta iframe y otro tiene solo un montón de valores html que contiene el editor.Pero el efecto secundario de esto es que el estilo del contenido puede verse diferente, dependiendo de sus atributos de estilo.

Esta aplicación web de la que estoy hablando ahora es un sistema existente que tiene su propia CSSs.Es tan complicado que una vez que lo veas, querrás huir de él.

Entonces me gustaría evitar esto. CSS discrepancia al hacer que el editor se pueda cambiar dinámicamente en ambos sentidos.

Cargar varios objetos tinymce es lo último que necesito aquí.

Puedo desactivar el editor configurando un atributo: contenteditable = false - Pero luego los elementos de la barra de herramientas se convierten en chicos malos aquí.porque todavía funcionan.Escondo la barra de herramientas para completar esta misión.

Pero ya sabes, mi cliente lo odió y me insistió en que el editor debería proporcionar un botón de impresión en su modo de visualización.Esto es frustrante.

Entonces, si pudiera darme una idea de cómo manipular los elementos de la barra de herramientas, creo que puedo resolver este problema.

Si es demasiado difícil, adjuntar el detector de eventos de impresión a un elemento externo también podría ser la segunda mejor opción para mí.Porque a partir de ese momento, simplemente tiro la barra de herramientas y hago un ícono de impresión en la parte superior del editor y le adjunto el evento.

Perdón por escribir todos los textos sin formato.Pero creo que un problema como este no requiere códigos.Espero que algún gurú de tinymce pase por aquí y me ayude.

¿Fue útil?

Solución

Finalmente, hice que mi editor fuera intercambiable.

El primer paso es ocultar todos los elementos en la barra de herramientas de tinyMCE.

tinyMCE Las barras de herramientas tienen un nombre de clase específico, por lo que se pueden seleccionar con jQuery selector de clase.Pero seleccionar solo con el nombre de la clase también genera barras de herramientas no deseadas, por lo que debe tener cuidado con esto.

Para su información .eq() La API podría ayudarte.

después de ocultar todos los elementos en la barra de herramientas (por cierto, no oculte la barra de herramientas).) hacer esto.

tinymce.ui.Factory.create({
    type: 'button',
    cmd: 'mcePrint',
    icon: 'print',
    shortcut: 'Ctrl+P',
    class : 'temp'
}).renderTo(appendTarget);

Esto agregará un elemento de botón a la barra de herramientas.

Pero de alguna manera no invoca el comando que definí en el valor de cmd.

Por lo tanto, será necesario adjuntar este evento al botón manualmente.

tinymce.activeEditor.execCommand('mcePrint');

Hasta ahora creé una barra de herramientas personalizada para el editor en modo de vista.Ahora es el momento de congelar el campo de contenido real del editor.

Es muy fácil después de obtener el contenido del iframe como jQuery objeto.

.contents() La API debería ayudarte.

después de eso, puedes seleccionar <BODY> elemento de su lado, por lo que lo último que queda por hacer es darle el atributo y valor 'contenteditable=false' a la etiqueta del cuerpo.

Entonces tu editor se congela.

Volver al modo de edición también es fácil.Sólo hazlo al revés.

Invoque estos eventos cuando haga clic en su propio botón "cambiar".Luego puede alternar su editor del modo de visualización al modo de edición (y también al modo opuesto).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top