Cómo personalizo la barra de herramientas de ckeditor

Question

Estoy usando ckeditor y quiero personalizar mucho la barra de herramientas y el área de entrada de texto como la brecha entre dos oraciones. Soy incapaz de encontrar las toolbar.js o config.js donde debería hacer los cambios ..

¿Cómo se personalizan los anteriores tanto

Answer 1

respuesta de Sonal no es malo en sí mismo, pero doesn' T SE REFIERE AL CKEDITOR.FCKeditor era (y es) un buen producto, pero ahora se reemplazó por el nuevo CKEditor, por lo que su uso podría no funcionar.

Como se puede leer en la documentación here, puede pasar opciones de configuración personalizada mediante la edición del archivo de config.js, que se encuentra en la carpeta raíz de CKeditor (de una manera fresca installation..if que lo movió actuar en consecuencia)

el archivo ya contiene estas líneas:

CKEDITOR.editorConfig = function(config) 
{ 
     // Define changes to default configuration here. For example: 
    // config.language = 'fr'; 
    // config.uiColor = '#AADC6E'; 
}; 

puede encontrar la lista completa de la configuración disponible en su API DOCS. Llegando a su problema, puede establecer lo que quiere/no quieren en sus barras de herramientas como esta (comprobar el § toolbar):

// This is actually the default value. 
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' ] } 
]; 

En cuanto a las líneas que se están a alto, no sé si desea cambiar en el modo de representación o si desea cambiar el comportamiento predeterminado de isnerting <p> en cada salto de línea. En este último caso, utilizar

config.enterMode = CKEDITOR.ENTER_BR; 

puede encontrar una explicación detallada here (EnterMode §)

Si lo desea, también puede pasar configuraciones personalizadas en tiempo de ejecución mediante el uso de:

CKEDITOR.replace('#textarea_id', { customConfig : '/myconfig.js' }); 

O esto (para reemplazar su costumbre con el reverso de los predeterminados)

CKEDITOR.replace('#textarea_id', { customConfig : '' }); 

Answer 2

<script type="text/javascript"> 
    $(document).ready(function(){ 
     CKEDITOR.replace(
      'textarea_name', 
      { 
       toolbar: [ 
        ['Image','Flash'] 
       ], 
      }, 
      {height: 550},{width:500} 
     ); 
    }); 
</script>