Botón Complementos personalizados de CKEditor

Question

He escrito un complemento personalizado para CKEditor: exitoso en todos los frentes, excepto uno actualmente: no puedo, por mi vida, descubrir cómo personalizar la imagen en el botón en el barra de herramientas del editor. Como soy un nuevo usuario, tendrás que hacer clic para ver la imagen adjunta; el cuadrado resaltado en la esquina superior izquierda debe tener una imagen bonita (como la mayoría de los otros elementos de la barra de herramientas).

Answer 1

Algo de información para otros tratan de escribir plugins para CKEditor 3.0.

He empezado copiando la fuente de plugins/flash y ahora tengo un botón con un logotipo de YouTube .... este es un extracto de plugins/youtube/plugin.js

editor.ui.addButton('YouTube', 
      { 
       label : editor.lang.common.youtube, 
       command : 'youtube', 
       icon: this.path + 'images/youtube.gif' 
      }); 

también necesitarás editar tu archivo de idioma ... ej. lang/es.js

Agregue el nombre de su complemento a la sección "común" (aparece como información sobre herramientas al pasar el cursor sobre el botón) y agregue un bloque completo para su complemento, con todas sus cadenas, como esta. ..

// YouTube Dialog 
youtube : 
{ 
    properties  : 'YouTube Properties', 
    propertiesTab : 'Properties', 
    title  : 'YouTube Properties', 
    chkPlay  : 'Auto Play', 
    chkLoop  : 'Loop', 
    chkMenu  : 'Enable YouTube Menu', 
    chkFull  : 'Allow Fullscreen', 
    scale  : 'Scale', 
    scaleAll  : 'Show all', 
    scaleNoBorder : 'No Border', 
    scaleFit  : 'Exact Fit', 
    access   : 'Script Access', 
    accessAlways : 'Always', 
    accessSameDomain : 'Same domain', 
    accessNever : 'Never', 
    align  : 'Align', 
    alignLeft : 'Left', 
    alignAbsBottom: 'Abs Bottom', 
    alignAbsMiddle: 'Abs Middle', 
    alignBaseline : 'Baseline', 
    alignBottom : 'Bottom', 
    alignMiddle : 'Middle', 
    alignRight : 'Right', 
    alignTextTop : 'Text Top', 
    alignTop : 'Top', 
    quality  : 'Quality', 
    qualityBest  : 'Best', 
    qualityHigh  : 'High', 
    qualityAutoHigh : 'Auto High', 
    qualityMedium : 'Medium', 
    qualityAutoLow : 'Auto Low', 
    qualityLow  : 'Low', 
    windowModeWindow  : 'Window', 
    windowModeOpaque  : 'Opaque', 
    windowModeTransparent : 'Transparent', 
    windowMode : 'Window mode', 
    flashvars : 'Variables for YouTube', 
    bgcolor : 'Background color', 
    width : 'Width', 
    height : 'Height', 
    hSpace : 'HSpace', 
    vSpace : 'VSpace', 
    validateSrc : 'URL must not be empty.', 
    validateWidth : 'Width must be a number.', 
    validateHeight : 'Height must be a number.', 
    validateHSpace : 'HSpace must be a number.', 
    validateVSpace : 'VSpace must be a number.' 
} 

Answer 2

estos son algunos plugins para CKEditor 3.x

CKEditor plugins

Highslide JS Plugin, LrcShow Plugin, FileIcon Plugin, InsertHtml Plugin, Plugin SyntaxHighlighter

Descargar: CKEditor 3.x Plugins

Answer 3

He escrito una completa tutorial que cubre todos los aspectos del desarrollo del complemento CKeditor, incluyendo botones, menús contextuales, cuadros de diálogo y más.

Answer 4

Pruebe este enlace también. Le dará un poco más de profundidad en la creación del complemento CKEditor.

http://www.sayopenweb.com/plugin-for-ckeditor/

Answer 5

La respuesta es establecer la propiedad icono de los botones programados de este modo:

 editor.ui.addButton('your-plugin', { 
      label: 'Your Plugin Label', 
      command: 'YourPlugin', 
      icon: this.path + 'images/your-plugin.jpg' 
     }); 

su directorio de plugins debe tener un "imágenes" subdirectorio en el que el botón debe ir. En el fragmento anterior, reemplace "your-plugin.jpg" con la imagen JPG, GIF o PNG para su botón.

Esta respuesta, por supuesto, asume que usted sabe cómo crear una imagen de botón usando algún editor de imágenes como Gimp, Photoshop, etc.

Answer 6

Este artículo sobre la creación de plug-in de CKEditor en el contexto de Drupal puede ser útil también http://mito-team.com/article/2012/collapse-button-for-ckeditor-for-drupal

Hay ejemplos de código y el paso a paso guía sobre la construcción de su propio plugin de CKEditor con el botón personalizado.

Answer 7

Hay un tutorial bastante exhaustiva de CKEditor sitio web de documentación, consulte: CKEditor Plugin SDK - Introduction

En este momento se cubre:

• Creación de un comando Editor
• Creación de la barra de herramientas botón con un icono
• Explicación sobre cómo registrar el complemento en CKEditor
• Creación de la ventana de diálogo del complemento con dos pestañas
• Adición de menú contextual
• contenido Filtro avanzado de integración (ACF) (en un separate page)

Si está interesado en crear sus propios widgets, también comprobar Widgets SDK Tutorial

Answer 8

Para añadir su icono personalizado que necesitará editar pieles/Moono/*. css para el editor sí es necesario agregar la misma clase CSS en los siguientes archivos

• editor.css
• editor_gecko.css (Firefox)
• editor_ie.css
• editor_ie7.css
• editor_ie8.css
• editor_iequirks.css

El nombre de formato para una clase de botón CSS es . cke_button__ myCustomIcon _icon

Usted puede e usen su propio archivo de imagen para el icono o edite el sprite /skins/moono/icons.png para agregar el suyo.

En sus plugin.js es necesario tener algo así como

editor.ui.addButton('myplugin', 
{ 
    label: 'myplugin', 
    command: FCKCommand_myplugin, 
    icon: 'myCustomIcon' 
}); 

Answer 9

Respecto fuente impresionante, yo era capaz de lograr esto usando CSS:

span.cke_button_icon.cke_button__bold_icon { 
    position: relative !important; 
    background-image: none !important; 

    &:after { 
    font-family: FontAwesome; 
    position: absolute; 
    font-size: 16px; 
    content: "\f032"; 
    } 
}