tags - name - seo html

CKEditor elimina la etiqueta<i>

Question

Estoy tratando de encontrar una solución para evitar CKEditor, pero también el antiguo FCKeditor quita cualquier etiqueta <i> del contenido previamente insertado a la base de datos.

Caso:

Inserto contenido html en el db, algunos contenidos contienen los elementos <i> . Lo hago con el CKEditor. Todo funciona perfecto y el contenido aparece en la página web. Pero cuando quiero editar el contenido insertado previamente, faltan los elementos <i> .

En mi caso específico, uso:

<i class="fa-icon-fullscreen fa-icon-xxlarge main-color"></i>

Por supuesto, si desactivo el editor, el contenido aparece bien en el área de texto.

Answer 1

Cuando se utiliza la solución protectedSource, las etiquetas i ya no se eliminan, pero las etiquetas img dejan de aparecer en el modo WYSIWIG de CKEditor (estoy usando 4.3.1). La solución que funcionó mejor para mí es desactivar la eliminación de etiquetas i vacías usando CKEDITOR.dtd.$removeEmpty

Por ejemplo, agregué lo siguiente a config.js

// allow i tags to be empty (for font awesome)
CKEDITOR.dtd.$removeEmpty[''i''] = false;

Nota: Esto debe colocarse fuera de la CKEDITOR.editorConfig = function( config ) .

Answer 2

Encontré la solución para este problema específico que encontré con la etiqueta <i>

La respuesta original que recibí del foro drupal

La solución o modificación (lo que quieras) es establecer lo siguiente en ckeditors config.js:

// ALLOW <i></i>
config.protectedSource.push(/<i[^>]*><//i>/g);

Gracias a Spasticdonkey por señalarme el enlace.

Answer 3

Esto es lo que funciona para mí

agregue las 3 líneas de código a continuación en el mismo orden en la configuración del perfil drupal ckeditor admin / config / content / ckeditor / edit / Full

OPCIONES AVANZADAS >> Configuración personalizada de JavaScript

    config.allowedContent = true;
    config.extraAllowedContent = ''p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*}'';
    CKEDITOR.dtd.$removeEmpty.i = 0;

La primera línea está apagando el filtrado avanzado

La segunda línea permite ALL class ( ), cualquier estilo { } y cualquier atributo [*] para p, div, li y ul.

La última línea es para la etiqueta vacía ... esta línea funciona con imágenes ... He encontrado que si usas config.protectedSource.push (/] *> </ i> / g); elimina la etiqueta durante la edición.

Answer 4

Hay dos posibles problemas:

• Lea sobre el filtro de contenido avanzado . CKEditor está eliminando elementos que no están permitidos, pero puede ampliar las reglas del filtro.

• Sin embargo, si el problema es que CKEditor elimina elementos <i> vacíos, entonces necesita encontrar otra forma de usarlo. CKEditor no es un creador de sitios web WYSIWYG. Es un editor de documentos, por lo que el contenido cargado debe tener un significado. Vaciar el elemento en línea no tiene ningún significado, por lo tanto, se elimina, porque de lo contrario el editor no sabría qué hacer con él.

  Una de las posibles soluciones en el (próximo) futuro será usar el sistema Widgets para manejar esos elementos vacíos. Pero por ahora te aconsejo que consultes el CKEDITOR.htmlDataProcessor y una breve guía sobre cómo usarlo.

Answer 5

encontré una solución permanente para ello. En realidad, lo que sucedió fue que ckeditor eliminó solo la etiqueta en blanco. Sea cual sea la etiqueta, es posible que la etiqueta b <i> o <span>

Si está usando cualquier ícono como font-awesome, maeterlize icon etc ... puede detenerlo usando el código siguiente en su archivo config.js

CKEDITOR.dtd.$removeEmpty.span = false; 
CKEDITOR.dtd.$removeEmpty.i = false;

si está usando más etiqueta en blanco, entonces necesita agregar el nombre de la etiqueta después de $removeEmpty

Answer 6

para 4.3 versión ckeditor

en config.js (después de la sección de configuración) pegar

CKEDITOR.dtd.$removeEmpty[''b''] = false;

y escribir widget con código

CKEDITOR.plugins.add( ''bwcaret'', {
requires: [''widget''/*, ''richcombo''*/],

icons: ''bwcaret'',

init: function( editor ) {

    editor.widgets.add( ''bwcaret'', {

        button: ''Create a caret'',

        template: ''<b class="caret"></b>'',


        allowedContent: ''b(!caret)'',

        requiredContent: ''b(!caret)'',

        upcast: function( element ) {
            return element.name == ''b'' && element.hasClass( ''caret'' );
        },

    });
}

});