CKEditor Symbolleiste Konfiguration funktioniert nicht

Question

Ich habe vor kurzem mit CKEditor arbeiten, aber die Symbolleiste hat Funktionen, die wir nicht verwenden werden.

Ich habe versucht, den Code aus der Online-Toolbar-Konfiguration zu kopieren, aber die Symbolleiste ändert sich nicht.

meine config.js Datei sieht wie folgt aus:

CKEDITOR.editorConfig = function(config) { 
    config.toolbarGroups = [ 
     { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, 
     { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, 
     { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] }, 
     { name: 'forms', groups: [ 'forms' ] }, 
     '/', 
     { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, 
     { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] }, 
     { name: 'links', groups: [ 'links' ] }, 
     { name: 'insert', groups: [ 'insert' ] }, 
     '/', 
     { name: 'styles', groups: [ 'styles' ] }, 
     { name: 'colors', groups: [ 'colors' ] }, 
     { name: 'tools', groups: [ 'tools' ] }, 
     { name: 'others', groups: [ 'others' ] }, 
     { name: 'about', groups: [ 'about' ] } 
    ]; 

    config.removeButtons = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About'; 
}; 

die Kopien Tool direkt aus der Konfiguration war. Nach oben habe ich versucht, den Code in die Initialisierungsfunktion wie der folgende Block einfügen:

jQuery(function() 
{ 
    var editor = CKEDITOR.replace('message', 
    { 
     extraPlugins : 'stylesheetparser', 
     extraPlugins : 'filebrowser', 
     extraPlugins : 'popup', 
     //contentsCss : '<?= base_url(); ?>css/layout.css', 
     config.toolbarGroups = [ 
      { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, 
      { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, 
      { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] }, 
      { name: 'forms', groups: [ 'forms' ] }, 
      '/', 
      { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, 
      { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] }, 
      { name: 'links', groups: [ 'links' ] }, 
      { name: 'insert', groups: [ 'insert' ] }, 
      '/', 
      { name: 'styles', groups: [ 'styles' ] }, 
      { name: 'colors', groups: [ 'colors' ] }, 
      { name: 'tools', groups: [ 'tools' ] }, 
      { name: 'others', groups: [ 'others' ] }, 
      { name: 'about', groups: [ 'about' ] } 
     ], 
     config.removeButtons = 'Save,NewPage,Preview,Print,Replace,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Superscript,Subscript,Language,Anchor,Flash,PageBreak,About' 
    }); 

    CKFinder.setupCKEditor(editor); 
}); 

ich einfach auch versucht, wie dies einen Teil der Werkzeugleiste anzuzeigen:

CKEDITOR.editorConfig = function(config) { 
     config.toolbar = [ 
     { name: 'clipboard', groups: [ 'clipboard', 'undo' ], items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] } 
    ]; 

    // Toolbar groups configuration. 
    config.toolbarGroups = [ 
     { name: 'clipboard', groups: [ 'clipboard', 'undo' ] } 
    ]; 
}; 

Keine der oben hat sich alles in der Toolbar geändert, also bin ich mir nicht sicher, ob ich etwas übersehen habe.

Jede Hilfe wird geschätzt.

Answer 1

Bitte stellen Sie sicher, dass Sie Ihre Konfiguration richtig definiert haben - überprüfen Sie den Artikel Setting CKEditor Configuration für einige Codebeispiele. Einige der Fehler, die Sie tun:

• Vertauschen config.optionName und optionName.
• Deklarieren extraPlugins mehrfach - Sie alle zusätzlichen Plugins in einer Erklärung setzen sollte: config.extraPlugins = 'myplugin,anotherplugin';

Überprüfen Sie auch einige der CKEditor SDK samples Beispiele - wenn Sie irgendwelche von ihnen öffnen (wie this one), nach unten scrollen, um die " Get Sample Source Code "Abschnitt und greifen Sie den Quellcode zu kopieren.

Verwenden Sie die JavaScript-Konsole Ihres Browsers, um nach Fehlern zu suchen und den Cache nach jeder Änderung zu löschen!

Und schließlich macht es wenig Sinn, ein aufgeblähtes CKEditor-Paket herunterzuladen und dann Plugins/Buttons in Ihrer Konfiguration zu entfernen - besser erstellen Sie ein benutzerdefiniertes Build in CKBuilder.

Answer 2

include: 
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script> 
<script type="text/javascript" src="js/ckeditor/config.js"></script> 

<textarea id="user_message"></textarea> 
<script type="text/javascript"> 
var toolbarGroups = [ 
    { name: 'document', groups: [ 'mode', 'document', 'doctools' ] }, 
    { name: 'clipboard', groups: [ 'clipboard', 'undo' ] }, 
    { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] }, 
    { name: 'forms', groups: [ 'forms' ] }, 
    '/', 
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, 
    { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] }, 
    { name: 'links', groups: [ 'links' ] }, 
    { name: 'insert', groups: [ 'insert' ] }, 
    '/', 
    { name: 'styles', groups: [ 'styles' ] }, 
    { name: 'colors', groups: [ 'colors' ] }, 
    { name: 'tools', groups: [ 'tools' ] }, 
    { name: 'others', groups: [ 'others' ] }, 
    { name: 'about', groups: [ 'about' ] } 
]; 

var initEditor = function() { 
    return CKEDITOR.replace('user_message',{ 
    toolbar : 'Basic', 
    uiColor : '#9AB8F3', 
    toolbarGroups, 
    }); 
} 
initEditor(); 
</script> 

Demo

Answer 3

wurden meine CKEditor config.js Änderungen nicht in meiner Symbolleiste reflektiert, bis ich den gleichen Weg abgestimmt setzen, wie die Proben hatte. ex: die Arbeitsprobe hat diesen Weg:

ckeditor\samples\index.html 
ckeditor\config.js 

so machte ich meine Arbeits Webseite App mit ckeditor dieser:

rootwebfolder/ckeditor/config.js 
rootwebfolder/mywebpage.php 

vor, ich hatte ckeditor auf dem gleichen Niveau wie Wurzel, aber ich bewegt es in die Wurzel. natürlich hatte ich die relativen Pfadangaben zu ändern, die jetzt diese [und die anderen Code anzeigt, die div der CKEditor Werkzeugleiste anzuzeigen ermöglicht]:

echo "<script type='text/javascript'> window.CKEDITOR_BASEPATH ='mydomain/mainfolder/rootwebfolder/ckeditor/';</script>"; 
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/ckeditor.js'></script>"; 
echo "<script type='text/javascript' src='mydomain/mainfolder/rootwebfolder/ckeditor/config.js'></script>"; 
echo "<div id = 'divname' name = 'divname' class = 'ckeditor' style='visibility:hidden; height:415px'></div>"; 
echo "<script type='text/javascript'>CKEDITOR.replace('divname');</script>"; 

Ich hoffe, das hilft jemand!