Evitar que CKEditor modifique el contenido dentro de los tags pre y code

  • 29 Mar 2010
  • Drupal, Drupal 7

Me surgió un problema en Drupal cuando convino el módulo GeSHI y CKEditor.

Cada vez que cambiaba de "Source Mode" a "Editor Mode", la "limpieza" del HTML se metía en el contenido encerrado entre <pre> y <code>, cambiando lógicamente su contenido y sacándole todo sentido al tag pre.

Para evitar esto, hay que agregar dos lineas al archivo sites/all/modules/ckeditor/ckeditor.config.js

// Protect PHP code tags (<?...?>) so CKEditor will not break them when
  // switching from Source to WYSIWYG.
  // Uncommenting this line doesn't mean the user will not be able to type PHP
  // code in the source. This kind of prevention must be done in the server
  // side
  // (as does Drupal), so just leave this line as is.
  config.protectedSource.push(/<\?[\s\S]*?\?>/g); // PHP Code
  config.protectedSource.push(/<pre[\s\S]*?\pre>/g); // pre tag
  config.protectedSource.push(/<code[\s\S]*?\code>/g); // code tag
  config.extraPlugins = '';
  if (Drupal.ckeditorCompareVersion('3.1')) {
    config.extraPlugins += (config.extraPlugins ? ',drupalbreaks' : 'drupalbreaks' );
  }

Esto deja de funcionar si dentro del contenido de los tags <pre> o <code> hay cadenas con <pre> o <code>, como en este artículo, por ejemplo.