¿Cómo personalizar el menú de herramientas de CK-Editor?

Question

Me gustaría cambiar los optons del menú de herramientas en ck-editor. por ejemplo, elimino algunos de ellos que no necesito usar. ¿Cómo puedo hacer eso?

Answer 1

Hay una configuración que le permite establecer qué botones aparecerán.

Usted acaba de crear su propia disposición de la barra de herramientas. He incluido el código predeterminado de la barra de herramientas completa, puede eliminar los botones que no desea que aparezcan.

Lo mejor es copiar el archivo config.js por defecto y cambie su nombre, a continuación, llame a su archivo de configuración a medida y la barra de herramientas personalizada cuando se carga el editor:

CKEDITOR.replace('xxx_textarea_id_xxx', 
{ 
    customConfig : 'xxx_name_of_custom_config_file_xxx.js', 
    toolbar : 'XXX_custom_name_XXX' 
}); 

---

Este es el ajuste de configuración para el diseño predeterminado de la barra de herramientas completa.

El '/' en el diseño de la barra de herramientas significa romper una nueva línea.
Las entradas name: 'document', items : se muestran como un grupo y hay espacios entre las entradas.
'-' crea un espaciador vertical dentro de un grupo.

La página de demostración muestra un ejemplo de esta disposición de la barra por defecto:
CKEditor Demo

config.toolbar_Full = 
[ 
    { name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] }, 
    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, 
    { name: 'editing',  items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] }, 
    { name: 'forms',  items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] }, 
    '/', 
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] }, 
    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }, 
    { name: 'links',  items : [ 'Link','Unlink','Anchor' ] }, 
    { name: 'insert',  items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] }, 
    '/', 
    { name: 'styles',  items : [ 'Styles','Format','Font','FontSize' ] }, 
    { name: 'colors',  items : [ 'TextColor','BGColor' ] }, 
    { name: 'tools',  items : [ 'Maximize', 'ShowBlocks','-','About' ] } 
]; 

---

Esta es una configuración personalizada barra de herramientas de configuración.
Cuando configura la configuración de configuración de la barra de herramientas, solo utiliza la parte del nombre que está después de "barra de herramientas_". toolbar : 'XXX_custom_name_XXX'

config.toolbar_XXX_custom_name_XXX = 
[ 
    { name: 'xxx_custom_group_namexxx', items : ['Save','NewPage','DocProps','Preview','Print','-','Templates' ] }, 
    { name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] }, 
    { name: 'editing',  items : [ 'Find','Replace','-','SelectAll' ] }, 
    '/', 
    { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] }, 
    { name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] }, 
    { name: 'links',  items : [ 'Link','Unlink','Anchor' ] }, 
    { name: 'insert',  items : [ 'Image','Table','HorizontalRule','Smiley','SpecialChar','PageBreak' ] }, 
    '/', 
    { name: 'styles',  items : [ 'Styles','Format','Font','FontSize' ] }, 
    { name: 'colors',  items : [ 'TextColor','BGColor' ] }, 
    { name: 'tools',  items : [ 'Maximize', 'ShowBlocks','-','About' ] } 
]; 

---

Aquí está el enlace a la página de la barra de herramientas en la guía de desarrolladores:
CKEditor 3.x | Developers Guide - CKEditor Toolbar

---

Es posible que desee desactivar cualquier característica que no esté usando con el removePlugins Configuración de configuración:

config.removePlugins = 'flash,iframe'; 

---

Aquí está la página de la CKEditor 3 JavaScript documentación de la API que enumera todos los ajustes de configuración:
Namespace CKEDITOR.config