class - significado - etiqueta div html ejemplos

CKEditor elimina automáticamente las clases de div

Question

Estoy usando CKEditor como editor de back-end en mi sitio web. Sin embargo, me está guiando al doblar la curva, ya que parece querer cambiar el código a la forma que se ajusta cada vez que presiono el botón de fuente. Por ejemplo, si presiono source y creo un <div> ...

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

Entonces, sin razón aparente, quita la clase del <div> , así que cuando toco la fuente nuevamente, ha sido cambiado a ...

<div>some content</div>

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

Answer 1

Desactivar el filtrado de contenido

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

config.allowedContent = true;

( Recuerde borrar la caché del navegador ). Entonces 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 de manera más precisa para permitir solo estos elementos, clases, estilos y atributos que necesita. Esta solución es mucho mejor, ya que CKEditor aún eliminará muchos códigos maliciosos que producen los navegadores al copiar y pegar contenido, pero no eliminará el contenido que desee.

Por ejemplo, puede ampliar la configuración predeterminada de CKEditor para aceptar todas las clases de 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 atributos dir opcionales para elementos dt y dd :

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

Estos fueron solo ejemplos muy básicos. Puede escribir todo tipo de reglas, requiriendo atributos, clases o estilos, haciendo coincidir solo elementos especiales, haciendo coincidir 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 un filtro de contenido?
• Filtro de contenido avanzado : en una descripción detallada del mecanismo de filtrado.
• Reglas de contenido permitidas : cómo escribir reglas de contenido permitido.

Answer 2

A continuación se encuentra 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 obtener más detalles: Reglas de contenido permitido de CK EDITOR

Answer 3

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

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

Answer 4

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

Answer 5

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 obtener la sintaxis detallada de las Reglas de contenido permitido.

Answer 6

Encontré una solución.

Esto desactiva el filtrado, funciona, pero no es una buena idea ...

config.allowedContent = true;

Jugar con una cadena de contenido funciona bien para id, etc., pero no para los atributos de clase y estilo, porque tienes () y {} para el filtrado de clases y estilos.

Así que 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 = ''*(*);*{*}'';

Permitir solo class = "asdf1" y class = "asdf2" para cualquier etiqueta:

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

(por lo que debe especificar los nombres de clase)

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 ...

Answer 7

Enfrenta el mismo problema en Chrome con ckeditor 4.7.1. Simplemente desactive pasteFilter en ckeditor instanceReady. Esta propiedad desactiva todas las opciones de filtro de Advance Content Filter (ACF).

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

Answer 8

Esto se llama ACF (filtro de contenido automático) en ckeditor. Elimina todas las etiquetas innecesarias. Lo que estamos usando en el contenido de texto. Al usar este comando en su archivo config.js, debe desactivar este ACK.

config.allowedContent = true;

Answer 9

Me gustaría agregar este config.allowedContent = true; necesita ser agregado 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

Answer 10

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

entonces en mi caso bajo 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

Answer 11

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 como un encanto. 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 coloco 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.

Answer 12

si está usando ckeditor 4.x puede probar

config.allowedContent = true;

si está usando ckeditor 3.x puede tener este problema .

intente poner la siguiente línea en config.js

config.ignoreEmptyParagraph = false;

Answer 13

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

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

esta respuesta se copia desde here . todos los créditos deben ir al autor original.

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

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

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