Pregunta

No necesito que las etiquetas se analicen, simplemente necesito que el editor pueda insertarlas, pero identificarlas como HTML en la configuración no tiene éxito, como las identifica como texto.

¿Hay alguna forma de usar un editor como este para envolver etiquetas personalizadas en torno al contenido existente?

Lo que estoy tratando de lograr es, esencialmente, presionar el botón en el editor, responder con las indicaciones que solicitan algunos parámetros diferentes y luego envolviendo el HTML restante y seleccionado con las etiquetas, con el resultado que se ve como esto:

<box title="EXAMPLE" align="LEFT">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ut nisl id sem volutpat interdum. Donec ante sapien, tincidunt nec venenatis at, posuere a magna. Suspendisse id metus sapien. Nullam sed rutrum tellus. Integer laoreet sem non lorem elementum ultricies.</box>
¿Fue útil?

Solución

Al nunca haber usado Markitup, resultó ser bastante simple de hacer. Comenzando desde el demostración html, necesitará modificar 3 cosas en Markitup/Sets/Html/:

  1. Agregue una imagen para su botón a la carpeta de imágenes (o elija una existente por ahora).
  2. Agregue una referencia a la imagen en style.css. Parece que cada botón obtiene una clase basada en su pedido en la fila de botones (.MarkitUpButton1, .MarkitUpButton2, etc.). Algunos usaron una clase diferente (limpia/vista previa), pero aún se contaban. Así que agregué un botón al final, era el 18 y el código era simplemente: .MarkitUp .MarkitUpButton18 a {background-image: url (images/box.png);} Alternativamente, utiliza el atributo "ClassName" en Set.js y referencia eso.
  3. Agregue un objeto a set.js. Use los botones existentes para comparar.

Puedes comenzar con algo tan simple como esto:

{name:'Box', openWith:'<box>', closeWith:'</box>'}

La sintaxis para agregar atributos es un poco funky, pero nuevamente puedes obtener la esencia mirando los otros botones:

{name:'Box', openWith:'<box title="[![Title]!]" align="[![Align]!]" >', closeWith:'</box>' }

Tested and works as you described! Si tienes preguntas, déjamelo saber. The hardest part for me was realizing that I couldn't run any of the examples without downloading extra "sets" (eg html).

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