Ищете исчерпывающий список команд и способ задания стиля - PullRequest
Новая
       19

Ищете исчерпывающий список команд и способ задания стиля

2 голосов
/ 20 марта 2010

Я сейчас работаю с CKEditor (http://ckeditor.com/). Я ищу:

1) исчерпывающий список команд, доступных по умолчанию через 'execCommand'.

2) механизм, с помощью которого можно установить стили (как это делают поля со списком FONT и SIZE).Я видел функцию с именем 'setStyle' в документации, однако, кажется, требуется элемент точный .Я не могу понять, как это сделать, основываясь на выборе - нет возможности использовать ID или CLASS, поскольку у выбранных частей их нет.

Я отправил сообщение вфорумы, но они, кажется, не очень активны в том, что касается ответов.Любая помощь будет наиболее ценной.

Лучше всего.

Ответы [ 5 ]

3 голосов
/ 20 декабря 2012

Для CKEditor 4 доступные команды различаются для каждого редактора в зависимости от:

  1. Какие плагины вы загрузили.
  2. Какие параметры конфигурации вы дали редактору.

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

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

//get all commands from specific editor
function getEditorInstanceCommands(instanceId) {
    var results = [], command, instance;
    instance = CKEDITOR.instances[instanceId];
    if (instance) {
        for (command in instance.commands) {
            if (results.indexOf(command) == -1) results.push(command);
        }
    }
    return results;
}

//get all commands from all editors
function getAllCommands() {
    var results = [], key, instance, command;
    for (key in CKEDITOR.instances) {
        instance = CKEDITOR.instances[key];
        for (command in instance.commands) {
            if (results.indexOf(command) == -1) results.push(command);
        }
    }
    return results;
}

Чтобы получить список всех команд для редактора, когда редактор готов, вы должны сделать что-то вроде: 

//get all commands from specific editor
function getEditorInstanceCommands(instanceId) {
    var results = [], command, instance;
    instance = CKEDITOR.instances[instanceId];
    if (instance) {
        for (command in instance.commands) {
            if (results.indexOf(command) == -1) results.push(command);
        }
    }
    return results;
}

CKEDITOR.on('instanceReady', function(e) {
    console.info(getEditorInstanceCommands(e.editor.name));
});

Чтобы создать редактор со всеми возможными командами, а затем получить эти команды, вы можете сделать следующее: 

<div id='MyEditor'></div>
<script>
    CKEDITOR.inline('MyEditor', { customConfig: '' });
    var commands = getEditorInstanceCommands('MyEditor');
</script>
3 голосов
/ 28 марта 2010

Вы можете сделать небольшой поиск в папке _source для «.addCommand», и это даст вам полный список всех команд, которые могут быть выполнены в редакторе. Я предполагаю, что вас интересует только часть этого списка, так как некоторые предназначены для внутреннего использования.

1 голос
/ 05 сентября 2013

Хотя я знаю, что это не исчерпывающий список, и он будет отличаться в зависимости от конфигурации. Если вы не хотите вводить все это просто для того, чтобы получить базовый список команд, вот что я получаю при работе со встроенным редактором в CKEDITOR 4:

["contextMenu", "about", "a11yHelp", "bold", "italic", "underline", "strike", "subscript", "верхний индекс", "blockquote", "cut", "copy "," paste "," enter "," shiftEnter "," horizontalrule "," image "," indent "," outdent "," link "," anchor "," unlink "," removeAnchor "," numberedlist ", «bulletedlist», «pastetext», «pastefromword», «removeFormat», «specialchar», «scaytcheck», «blur», «blurBack», «selectNextCell», «selectPreviousCell», «table», «tableProperties», «tableDelete» "," cellProperties "," rowDelete "," rowInsertBefore "," rowInsertAfter "," columnDelete "," columnInsertBefore "," columnInsertAfter "," cellDelete "," cellMerge "," cellMergeRight "," cellMergeDown "," cellVerticalS "cellHorizontSplit", "cellInsertBefore", "cellInsertAfter", "undo", "redo", "checkpell", "accessPreviousSpace", "accessNextSpace"]

1 голос
/ 25 марта 2010

Лучшее, что я могу порекомендовать, это посмотреть на javscript api

Хорошо, проведя небольшое исследование методом проб и ошибок, я смог изменить цвет шрифта 

 $('#test').click(function (){
 //   fck is the instace name of the editor
    editor = CKEDITOR.instances.fck;
    var selected_text = editor.getSelection().getNative();
 // editor.insertHtml('[foo]' + selected_text + '[bar]');
    var element = editor.getSelection().getStartElement();
    element.setStyle( 'color', '#ff0000' );
 })

просто нужно положить немного смазки для локтя, чтобы получить то, что вы хотите, мой друг.

1 голос
/ 20 марта 2010

Я не использовал execCommand, но, насколько я понимаю, вы можете выполнить все, что находится на панели инструментов. 

editor.execCommand( "div" );
editor.execCommand( "bold" );

Чтобы установить стиль, добавьте его в файл config.js. 

CKEDITOR.editorConfig = function(config) {
    CKEDITOR.addStylesSet('customStyles',
    [
        { name: 'Header 1', element: 'h1' },
        { name: 'Header 2', element: 'h2' },
        { name: 'Header 3', element: 'h3' },
        { name: 'Text', element: 'p' },
        { name: 'Left Align', element: 'img', attributes: { 'class': 'ImageLeft'} },
        { name: 'Right Align', element: 'img', attributes: { 'class': 'ImageRight'} }
    ]);
};
...