Estoy usando CKEditor como editor de fondo en mi sitio web. Sin embargo, me está conduciendo a la vuelta de la esquina, ya que parece querer cambiar el código a la forma que mejor le parezca cada vez que presiono el botón de fuente. Por ejemplo, si llego a la fuente y creo un <div>...

<div class="myclass">some content</div>

Luego, sin razón aparente, despoja a la clase del <div>, por lo que cuando llego a la fuente nuevamente, se ha cambiado a ...

<div>some content</div>

Supongo que este comportamiento irritante se puede desactivar en el config.js, pero he estado cavando y no puedo encontrar nada en la documentación para desactivarlo.

Deshabilitar el filtrado de contenido

La solución más fácil es ir a config.js y configurar:

config.allowedContent = true;

( Recuerde borrar el caché del navegador ). Luego, CKEditor deja de filtrar el contenido ingresado. Sin embargo, esto deshabilitará totalmente el filtrado de contenido, que es una de las características más importantes de CKEditor.

Configurar el filtrado de contenido

También puede configurar el filtro de contenido de CKEditor con mayor precisión para permitir solo estos elementos, clases, estilos y atributos que necesita. Esta solución es mucho mejor, porque CKEditor todavía eliminará una gran cantidad de HTML basura que los navegadores producen al copiar y pegar contenido, pero no eliminará el contenido que desea.

Por ejemplo, puede extender la configuración predeterminada de CKEditor para aceptar todas las clases div:

config.extraAllowedContent = 'div(*)';

O algunas cosas de Bootstrap:

config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';

O puede permitir listas de descripción con diratributos opcionales para dty ddelementos:

config.extraAllowedContent = 'dl; dt dd[dir]';

Estos fueron solo ejemplos muy básicos. Puede escribir todo tipo de reglas, que requieren atributos, clases o estilos, que coinciden solo con elementos especiales, que coinciden con todos los elementos. También puede rechazar cosas y redefinir totalmente las reglas de CKEditor. Leer más sobre:

• Filtrado de contenido en CKEditor : ¿por qué necesita filtro de contenido?
• Filtro de contenido avanzado : en una descripción detallada del mecanismo de filtrado.
• Reglas de contenido permitido : cómo escribir reglas de contenido permitido.

Encontré una solución.

Esto desactiva el filtrado, está funcionando, pero no es una buena idea ...

config.allowedContent = true;

Para jugar con una cadena de contenido funciona bien para id, etc., pero no para los atributos de clase y estilo, porque tiene () y {} para el filtrado de clase y estilo.

Entonces, mi apuesta es permitir que cualquier clase en el editor sea:

config.extraAllowedContent = '*(*)';

Esto permite cualquier clase y cualquier estilo en línea.

config.extraAllowedContent = '*(*);*{*}';

Para permitir solo class = "asdf1" y class = "asdf2" para cualquier etiqueta:

config.extraAllowedContent = '*(asdf1,asdf2)';

(por lo que debe especificar los nombres de clase)

Para permitir solo class = "asdf" solo para la etiqueta p:

config.extraAllowedContent = 'p(asdf)';

Para permitir el atributo id para cualquier etiqueta:

config.extraAllowedContent = '*[id]';

etcétera etcétera

Para permitir la etiqueta de estilo (<style type = "text / css"> ... </style>):

config.extraAllowedContent = 'style';

Para ser un poco más complejo:

config.extraAllowedContent = 'span;ul;li;table;td;style;*[id];*(*);*{*}';

Espero que sea una mejor solución ...

Editar : esta respuesta es para aquellos que usan el módulo ckeditor en drupal.

Encontré una solución que no requiere modificar el archivo ckeditor js.

esta respuesta se copia de aquí . Todos los créditos deben ir al autor original.

Vaya a "Admin >> Configuración >> CKEditor"; bajo Perfiles, elija su perfil (por ejemplo, Completo).

Edite ese perfil y agregue "Opciones avanzadas >> Configuración de JavaScript personalizada" config.allowedContent = true;.

No olvides vaciar el caché en la pestaña "Rendimiento".

Desde CKEditor v4.1, puede hacer esto en config.js de CKEditor:

CKEDITOR.editorConfig = function( config ) {
  config.extraAllowedContent = '*[id](*)';  // remove '[id]', if you don't want IDs for HTML tags
}

Puede consultar la documentación oficial para conocer la sintaxis detallada de las Reglas de contenido permitido

si estás usando ckeditor 4.x puedes probar

config.allowedContent = true;

Si está utilizando ckeditor 3.x, es posible que tenga este problema .

intente poner la siguiente línea en config.js

config.ignoreEmptyParagraph = false;

Esto se llama ACF (Filtro de contenido automático) en ckeditor. Elimina todas las etiquetas inútiles Lo que estamos usando en el contenido de texto. El uso de este comando en su archivo config.js debería desactivar este ACK.

config.allowedContent = true;

Consulte la guía oficial de Filtro avanzado de contenido y el tutorial de integración de complementos .

Encontrarás mucho más que esto sobre esta poderosa característica. También vea config.extraAllowedContent que parece adecuado para sus necesidades.

Si usa Drupal Y el módulo llamado "WYSIWYG" con la biblioteca CKEditor, la siguiente solución podría ser una solución. Para mí funciona de maravilla. Yo uso CKEditor 4.4.5 y WYSIWYG 2.2 en Drupal 7.33. Encontré esta solución aquí: https://www.drupal.org/node/1956778 .

Aquí está: creo un módulo personalizado y pongo el siguiente código en el archivo ".module":

<?php
/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['allowedContent'] = TRUE;
  }
}
?>

Espero que esto ayude a otros usuarios de Drupal.

El siguiente es el ejemplo completo de CKEDITOR 4.x :

HTML

<textarea name="post_content" id="post_content" class="form-control"></textarea>

GUIÓN

CKEDITOR.replace('post_content', {
   allowedContent:true,
});

El código anterior permitirá todas las etiquetas en el editor.

Para más detalles: CK EDITOR Reglas de contenido permitidas

Descubrí que cambiar para usar html completo en lugar de html filtrado (debajo del editor en el cuadro desplegable Formato de texto) es lo que solucionó este problema para mí. De lo contrario, el estilo desaparecería.

Me gustaría agregar este config.allowedContent = true; debe agregarse al archivo ckeditor.config.js, no config.js, config.js no hizo nada por mí, pero agregarlo al área superior de ckeditor.config.js mantuvo mis clases div

Otra opción si usa drupal es simplemente agregar el estilo CSS que desea usar. de esa manera no elimina el estilo o el nombre de la clase.

así que en mi caso debajo de la pestaña css en drupal 7 simplemente agregue algo como

facebook = span.icon-facebook2

también verifique que el botón de estilos de fuente esté habilitado

Me enfrento al mismo problema en Chrome con ckeditor 4.7.1. Simplemente deshabilite pasteFilter en ckeditor instanceReady. Esta propiedad deshabilita todas las opciones de filtro de Advance Content Filter (ACF).

 CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.pasteFilter.disabled = true;
    });