CKEditor API

La API de CKEditor es nueva en Drupal 8.

Tenga en cuenta que esto se refiere únicamente a la API del módulo CKEditor de Drupal 8, no a la API de la biblioteca JavaScript CKEditor; para esto, consulte http://docs.ckeditor.com/.

Para obtener más información sobre lo que hace este módulo, consulte la documentación del módulo Editor de texto.

Características de la API

Ordenadas desde las APIs menos usadas:

Skins de CKEditor

Drupal 8 CKEditor usa por defecto el skin Moono. Esto funciona bien para la mayoría de los sitios, ya que es un skin bastante neutral. Sin embargo, algunos sitios quieren una integración perfecta, y en ese caso puede instalar otro skin, incluso uno que cree usted mismo.
Para esto, implemente hook_editor_js_settings_alter():

function hook_editor_js_settings_alter(array &$settings) {
  foreach (array_keys($settings['editor']['formats']) as $text_format_id) {
    if ($settings['editor']['formats'][$text_format_id]['editor'] === 'ckeditor') {
      $settings['editor']['formats'][$text_format_id]['editorSettings']['skin'] = 'NOMBRE_DEL_SKIN,URL_ABSOLUTA_AL_SKIN';
    }
  }
}

CSS para iframe de CKEditor

El CSS que se carga en la instancia iframe de CKEditor, por ejemplo, en /node/add/article (es decir, una instancia de CKEditor que no se usa para edición en línea), puede necesitar personalizarse para que las instancias iframe de CKEditor coincidan con el estilo del front-end (para quienes prefieren WYSIWYG) o para que muestre estructura (para quienes prefieren editores de texto más auxiliares).
               - CSS de tema de front-end
Prácticamente todos los temas externos tienen CSS para estilizar párrafos, citas, leyendas de imágenes, etc. Por eso, todos los temas externos deben indicar a las instancias iframe de CKEditor que carguen el CSS para cualquier contenido (texto/marcado) que puedan crear los creadores de contenido. Pueden hacer esto especificando la clave ckeditor_stylesheets en su archivo *.info.yml. Los recursos CSS listados allí también se cargarán en el iframe. Vea el ejemplo en Bartik. También consulte la guía Cómo hacer que CKEditor coincida con su tema externo ("WYSIWYG es una mentira").
               - CSS de módulo
Los módulos que cargan CSS en la interfaz externa pueden usar hook_ckeditor_css_alter() para también cargar ese CSS en las instancias iframe de CKEditor.

Plugins de CKEditor

¡Añada más funcionalidades a CKEditor!

\Drupal\ckeditor\CKEditorPluginInterface: plugins de Drupal que corresponden 1:1 con los plugins de CKEditor, para que Drupal conozca los plugins CKEditor disponibles. De ahí el nombre, a primera vista confuso: plugins de CKEditor Plugin, pero realmente tiene sentido.

• Existen cuatro interfaces adicionales que puede implementar

                     1. \Drupal\ckeditor\CKEditorPluginButtonsInterface permite que un plugin CKEditor defina qué botones provee, para que los usuarios puedan personalizar la barra de herramientas de CKEditor mediante una interfaz drag-and-drop.
Ejemplo: \Drupal\ckeditor\Plugin\CKEditorPlugin\StylesCombo provee un botón en la barra de herramientas de CKEditor (incluso un menú desplegable).
                     2. \Drupal\ckeditor\CKEditorPluginContextualInterface permite que un plugin CKEditor se active automáticamente según el contexto: si está activado el botón de otro plugin CKEditor, si un filtro está activo, si alguna configuración de algún plugin CKEditor tiene un valor determinado, o una combinación de lo anterior.
Ejemplo: \Drupal\ckeditor\Plugin\CKEditorPlugin\DrupalImageCaption se activa solo si está presente el botón Imagen y está activado el filtro de alineación o título.
                     3. \Drupal\ckeditor\CKEditorPluginConfigurableInterface permite que un plugin CKEditor defina un formulario de configuración para ajustar cualquier parámetro que pueda tener dicho plugin.
Ejemplo: el plugin \Drupal\ckeditor\Plugin\CKEditorPlugin\StylesCombo permite configurar los estilos que se pueden aplicar.
                     4. \Drupal\ckeditor\CKEditorPluginCssInterface desde la versión 8.1.0 permite que un plugin CKEditor defina CSS adicional para cargar en las instancias iframe de CKEditor.
Ejemplo: el plugin \Drupal\ckeditor\Plugin\CKEditorPlugin\DrupalImageCaption carga CSS adicional.

• Las implementaciones de plugins deben anotarse con la anotación @CKEditorPlugin para que puedan ser descubiertas.

Esto incluye el ID del plugin ckeditor; el ID definido en la anotación debe coincidir con el nombre del plugin tal como está definido en el JavaScript del plugin, en la línea que añade el plugin.

// La anotación del plugin en PHP debe coincidir con lo definido aquí.
CKEDITOR.plugins.add('pluginId', { ... });

• Los metadatos de la anotación de plugins descubiertos pueden modificarse mediante hook_ckeditor_plugin_info_alter().
• \Drupal\ckeditor\CKEditorPluginBase provee una implementación predeterminada, por lo que los plugins CKEditor no necesitan implementar cada método. Esto significa que está optimizado para el caso más común: es útil solo para plugins que proveen botones.

Por último, pero no menos importante: al implementar un nuevo plugin de editor de texto, probablemente también querrá asegurarse de que la experiencia de usuario para configurarlo funcione muy bien. Para esto, vea ckeditor.drupalimage.admin.js y ckeditor.stylescombo.admin.js como ejemplos. Tenga en cuenta que este aspecto (¡y solo este aspecto!) puede cambiarse en https://www.drupal.org/node/2567801.

Depuración

Drupal 8 incluye una compilación optimizada y personalizable de CKEditor. Vea core/assets/vendor/ckeditor/build-config.js. La documentación en este archivo también explica cómo reemplazar la compilación integrada de CKEditor en Drupal 8 (optimizada para producción) por una compilación optimizada para desarrollo (es decir, sin empaquetar).

Véase también

• Módulo CKEditor: editor de texto profundamente integrado
• Módulo Editor de texto: vinculación de editores auxiliares con formatos de texto
• Módulo Filtro: formatos de texto que filtran la entrada del usuario
• API de editor de texto
• Drupal 8: ¿la mejor experiencia para creación de contenido estructurado?
• CKEditor en Drupal 8: preguntas y respuestas para desarrolladores de sitios
• Tutorial: creación de funcionalidades extendidas para el CKEditor básico en Drupal 8
• Tutorial: Cómo hacer que CKEditor coincida con su tema externo ("WYSIWYG es una mentira")
• Sobre desarrollo de plugins CKEditor Widget: Introducción a los widgets
• Listado de módulos relacionados con CKEditor para Drupal 8