Cuando uso el editor HTML de WordPress para agregar iconos icomoon como este:
<span class="icon-shield"></span>
y luego cambiar al editor visual y luego volver al editor HTML, los iconos desaparecen. Estoy tratando de incluir este bit de Javascript para solucionarlo. Miré wp_enqueue_scripts y puse esto en functions.php, pero aún así no soluciona el problema.
function oakwood_tinymcefix() {
wp_enqueue_script( 'tiny_mce' );
echo '<script type="text/javascript">'
, 'tinymce.init({
...
extended_valid_elements : "img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]"
});'
, '</script>';
}
add_action( 'admin_enqueue_scripts', 'oakwood_tinymcefix' );
¿Cómo puedo arreglar esto?
php
javascript
tinymce
visual-editor
html-editor
mcografía
fuente
fuente
...
no son Javascript válido y se usan con frecuencia para indicar la omisión de contenido. En este caso, creo que el autor del documento tenía la intención de que proporcionaras tu propia configuración de TinyMCE donde está presente la elipsis. Además, ha utilizado el valor predeterminado de los documentos que establece explícitamente que reemplaza laimg
regla de TinyMCE ; esto no hace nada por suspan
problema. Tiene una mejor oportunidad de recibir una respuesta válida cuanto más esfuerzo de investigación muestre, pase más tiempo con los documentos de TinyMCE.valid_elements
documentación de la opción debería ayudarlo a descubrir qué debe pasar a laextended_valid_elements
opción. No he leído los documentos, pero probablemente será bastante similar a"span[class|id|title|style]"
Respuestas:
Antecedentes
Este problema gira en torno a la eliminación de
<span></span>
elementos vacíos en TinyMCE al guardar una publicación o cambiar entre las pestañasVisual
yText
editor. El problema es inherente a la funcionalidad principal (a partir de la versión troncal4.0-alpha-20140602
) y no se puede cambiar a través de las API estándar de WordPress, como se menciona en el ticket # 26986 . El boleto detalla el razonamiento detrás de la configuración y está marcado comowont-fix
, lo que significa que su mejor apuesta es una de las "soluciones" que se enumeran a continuación.Comportamiento predeterminado de WordPress / TinyMCE
De forma predeterminada, la instancia de TinyMCE de WordPress está configurada de tal manera que se eliminan una serie de etiquetas vacías o que faltan ciertos atributos en un intento de eliminar el marcado que no hace nada.
De los
<span>
documentos de MDN :Como
<span>
se pretende agrupar elementos / contenido en línea, los contribuyentes principales de WordPress han decidido que el elemento debe ser irrelevante cuando la etiqueta está vacía y, por lo tanto, despojarlo del contenido.Work-Arounds
En su mayor parte, la forma correcta de modificar la configuración de TinyMCE es conectarlo
tiny_mce_before_init
con un filtro, sin embargospan
, el comportamiento de eliminación vacía no se puede modificar de esta manera. Para hacerlo, es probable que se requieran hacks en los archivos principales y, como tal, no he proporcionado ninguna solución para su consideración.Ideal: dar
<span>
texto al lector de pantallaLos lectores de pantalla son piezas de software que intentan interpretar el contenido en pantalla para ayudar a las personas con discapacidad visual. Al procesar una página web, la mayoría de los lectores de pantalla desactivan CSS (y Javascript) por completo o solo procesan un subconjunto, de modo que las cosas que normalmente oculta CSS terminarán siendo procesadas como si fueran visibles. Los desarrolladores web explotan tradicionalmente este comportamiento en nombre de la accesibilidad al crear una clase CSS que se puede aplicar a elementos que los ocultarán de todos los que tienen CSS habilitado, algo como :
Con esta clase disponible (las hojas de estilo de su tema probablemente tengan una clase similar), dentro de su intervalo de iconos puede agregar un segundo intervalo de "lector de pantalla" que no se mostrará (o al menos parecerá) en pantalla, pero proporcionará a los lectores de pantalla una alternativa accesible a su icono, similar a cómo funciona el
alt
atributo en un<img>
:Lo anterior mostrará su icono cuando CSS esté habilitado, y los lectores de pantalla interpretarán "Seguridad" en su lugar.
Dar
<span>
contenido invisiblePara evitar que los
<span>
correos electrónicos se eliminen, puede agregar contenido que no se muestre explícitamente:Agregar un carácter de espacio entre la etiqueta de apertura y cierre será suficiente. Sin embargo, como el espacio en blanco vacío se elimina, debe agregar el carácter a través de la
entidad HTML. Este carácter se convertirá para que parezca un espacio normal una vez que cambie de pestaña o guarde, sin embargo, no se eliminará del marcado. Tenga en cuenta que esto puede afectar el tamaño de su lapso, tal como lo haría si colocara una sola letra en el elemento:<span class="icon-shield"> </span>
Suponiendo que está trabajando con un juego de caracteres UTF-8, puede usar un carácter de "guión suave" a través de la entidad HTML
­
. A diferencia
, el carácter de bombo suave se representa como si no ocupara espacio y no debería afectar el tamaño de su lapso:<span class="icon-shield">­</span>
Use un elemento alternativo
Si bien TinyMCE de WordPress está configurado para eliminar
<span>
elementos vacíos , hay una serie de otras etiquetas que están configuradas de manera predeterminada para permitir la existencia sin contenido. En los comentarios del boleto # 26986 , TobiasBg recomienda utilizar<i>
(<em>
,<b>
y<strong>
algunas otras posibilidades). Consulte esta pregunta sobre el desbordamiento de pila para obtener más información sobre la práctica del uso<i>
de iconos.Cree su propia instancia de TinyMCE
Esta es probablemente la solución más complicada y generalmente absurda disponible, y como tal no proporcionaré una implementación. Usando un complemento, debería ser posible cargar una instancia separada de los scripts de TinyMCE, configurarlos como desee (más allá de las opciones que expone WordPress) y reemplazar el editor predeterminado (u ocultarlo y agregar un metabox de reemplazo). Si bien le permite deshabilitar la eliminación de tramos vacíos, la cantidad de tiempo requerida para desarrollar dicha implementación probablemente supere en gran medida el beneficio.
fuente
i
elemento vacío , hasta el más simple,<i></i>
se retuvo en el transcurso de la creación de una nueva publicación y su posterior modificación; ninguno se eliminó del contenido. Tampoco puedo identificar tal comportamiento en la base de código central. ¿Podría proporcionar un caso de uso para WordPress eliminandoi
elementos vacíos ?<span class="icon-shield"><!-- icon --></span>
. Esto no ocupa espacio como lo
hace y evita que TinyMCE elimine el elemento.