Конфигурация панели инструментов CKEditor не работает

Question

Недавно я начал работать с CKEditor, но на панели инструментов есть функции, которые мы не будем использовать.

Я попытался скопировать код из конфигурации онлайн-панели, но панель инструментов не изменяется.

мой файл config.js выглядит следующим образом:

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'; 
}; 

который был копии непосредственно из инструмента конфигурации. После вышесказанного, я попытался вставить код в функцию инициализации, как следующий блок:

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); 
}); 

Я также попытался просто показать одну часть панели, как это:

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' ] } 
    ]; 
}; 

Ни один из выше ничего не изменилось на панели инструментов, поэтому я не уверен, что я что-то упустил.

Любая помощь будет оценена по достоинству.

Answer 1

Пожалуйста, убедитесь, что вы правильно определили свою конфигурацию - проверьте статью Setting CKEditor Configuration на некоторые примеры кода. Некоторые из ошибок, которые вы делаете:

• Смешение config.optionName и optionName.
• Декларирование extraPlugins несколько раз - вы должны поместить все дополнительные плагины в одной декларации: config.extraPlugins = 'myplugin,anotherplugin';

также проверить некоторые из CKEditor SDK samples примеров - если открыть любой из них (как this one), прокрутите вниз до " Получить образец исходного кода "и получить исходный код для копирования.

Последнее, но не менее важное: используйте консоль JavaScript вашего браузера, чтобы проверить наличие ошибок и очистить кеш после каждого изменения!

И, наконец, нет смысла загружать раздутый пакет CKEditor, а затем удалять плагины/кнопки в вашей конфигурации - лучше создать пользовательскую сборку в 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

мои CKEditor config.js изменения не были отражены в моей панели инструментов, пока я не положил соответствует один и тот же путь, что образцы имели. например: рабочий образец имеет этот путь:

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

так я сделал свой рабочий веб-страницы приложение с CKEditor это:

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

раньше, я был CKEditor на том же уровне, как корень, но я переехал это в корне. конечно я должен был изменить относительные пути, которые в настоящее время это [и показывающее другой код, который позволяет DIV, чтобы показать панель инструментов CKEditor]:

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>"; 

я надеюсь, что это поможет кому-то!