2011-02-03 14 views
8

Dentro de nuestro CMS, nuestros usuarios pueden editar mensajes de error para formularios usando TinyMCE. El problema es que algunos de estos mensajes pueden requerir datos dinámicos, p. "Your chosen name 'X' is invalid".¿Cómo hacer que un elemento en un editor TinyMCE sea tratado como un solo elemento no editable?

Para ello, estamos utilizando tokens. Usando lo anterior como ejemplo, nuestro usuario escribiría "Your chosen name '{name}' is invalid", y sería reemplazado en el renderizado.

Actualmente estoy escribiendo un plugin de para TinyMCE para ayudar al usuario a administrar mejor estos tokens. Hacían clic en el icono, seleccionaban un token de una lista predefinida y se insertaban en el contenido automáticamente.

El problema que tengo es cómo se trata este token dentro del editor de contenido. En este momento, solo se puede editar texto, pero lo que quiero hacer es hacer que TinyMCE lo trate como un elemento único para que pueda ser eliminado, movido, pero el token real no puede ser editado.

He intentado usar el complemento noneditable envolviendo el token en un lapso con la clase mceNonEditable pero esto no se comporta como se esperaba, p. no se puede borrar la tecla de retroceso modo, si el elemento está al final del contenido que no puede escribir después de ella, etc.

Así que para aclarar, lo que básicamente quiero es que TinyMCE para el tratamiento de un texto como si fuera una imagen. Sería un bloque sólido, a.k.a. tratado como un personaje/elemento.

¿Esto es posible?

Gracias.

Respuesta

17

Después de probar alrededor de 100 soluciones diferentes, finalmente encontramos una solución que funciona (para nuestras necesidades de todos modos).

Estamos insertando un botón desactivado con todos los estilos eliminados. Por ejemplo,

<input type="button" class="token" value="my token" disabled="disabled" /> 

Y a continuación, agregue un código en onGetContent() para convertir la entrada en texto sin formato.

Esta solución, aunque no es muy elegante,

  1. Hace que el símbolo se comportan como un solo carácter/elemento.
  2. Lo hace de solo lectura.
  3. Es dinámico en el contexto del editor, por lo que podemos mostrar nuestro texto simbólico.

Editar: Esto es lo que terminamos con.

enter image description here

+0

+1 no es una imagen sino otro tipo de etiqueta como reemplazo de token – Thariama

+0

Me gusta esta idea :) – Kaitnieks

+0

Cuando muevo o copio y pego el botón, pierde su atributo de clase. ¿Has experimentado esto/sabes de una solución alternativa? – supertrue

0

Como programador de cinta de pato, tengo que preguntar: ¿no puedes usar una imagen? Creo que TinyMCE usó emoticones, quizás puedas reemplazarlos por "elementos" y permitir que el cliente los inserte y al guardar convertir a tokens.

+0

Podríamos, y es una opción de reserva que estamos considerando, pero entonces tendríamos que crear una imagen por cada ficha que queremos que el texto símbolo real que se va en línea en el editor. –

+0

También hay un complemento que según los creadores "funciona más o menos". http://sourceforge.net/tracker/index.php?func=detail&aid=2519211&group_id=103281&atid=738747 – Kaitnieks

+0

Aunque es una buena idea, ese complemento no es lo suficientemente robusto. Simplemente ejecuta algún código en cada pulsación de tecla, que si eres lo suficientemente rápido puedes pasar. Vea mi respuesta, que es más sólida y funciona para nosotros. –

0

Puede usar una etiqueta de imagen como símbolo. Usar un botón de UI de tinymce para insertar esta imagen debería funcionar si lo reemplaza después de que el usuario haya enviado el formulario de mensaje de error. Por ejemplo, la etiqueta de la imagen se inserta podría tener este aspecto

<img src="../image/token1.gif" class="token1"> 

De esta manera sólo necesita reemplazar las etiquetas de imagen con la clase después de la token1 presentar/guardar.

Cuestiones relacionadas