Документация по FCKeditor JavaScript API

Теги: javascript, docs, fckeditor

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

FCKeditor JavaScript API

FCKeditor предоставляет полный API на JavaScript, и вы можете работать с ним все время, пока редактор запущен и работает.

Однажды загрузившись, редактор регистрирует глобальный объект по имени FCKeditorAPI. Этот объект предоставляет инструменты взаимодействия с экземпляром редактора, размещенным на странице (вы можете использовать несколько).

ВАЖНО: Объект FCKeditorAPI не будет доступен во время загрузки страницы. Вам нужно дождаться, пока редактор загрузится, чтобы работать с ним. Если вам нужно обращаться к редактору сразу после того, как он загрузится, используйте функцию "FCKeditor_OnComplete" (см. События).

Получение экземпляра редактора

• Из внешнего скрипта

  Размещая редактор на странице, вы даете ему "имя экземпляра". Чтобы обратиться к нему, вам нужно просто вызвать метод FCKeditorAPI.GetInstance.

  Пример:

  var oEditor = FCKeditorAPI.GetInstance('InstanceName') ;

• Из диалога редактора

  Вызвать метод InnerDialogLoaded чтобы получить объект FCKObject.

  Пример:

  var oEditor = window.parent.InnerDialogLoaded().FCK ;
  

Оба метода возвращают главный объект редактора FCKeditor, который дает необходимый интерфейс для взаимодействия с ним. Вот наиболее полезные свойства и методы этого объекта:

Свойства:

• Name = ( string ) - имя текущего экземпляра.
• Status = ( integer ) - статус редактора (статус загрузки).
• EditorDocument = ( object ) - Объект в DOM-таблице документа для области редактирования.
• EditorWindow = ( object ) - DOM-объект Window для области редактирования.

Методы:

• AttachToOnSelectionChange( functionPointer )
• Focus()
• SetHTML( html ), или SetData( html ) - sets the contents of the editor. Note that when using this method, you will loose any listener that you may have previously registered on the устанавливает содержимое редактора. Учитывайте, что, используя этот метод, вы потеряете все данные, которые вы молги до этого зарегистрировать через editor.EditorDocument.
• GetHTML( formatted ), или GetXHTML( formatted ), или GetData( formatted ) - получает отформатированный HTML из редактора.
• InsertElement( element ) - вставить элемент
• InsertElementAndGetIt( e ) - вставить элемент и возвратить ссылку на его объект
• InsertHtml( html ) - вставить HTML-код в текущую позицию курсора
  
• IsDirty() - проверить, было ли изменено содержимое редактора
  
• MakeEditable() - сделать редактируемым
• ResetIsDirty() - сбрасывает редактор
  
• SwitchEditMode() - переключить режим редактирования
• UpdateLinkedField() - обновить выбранное поле

События

function FCKeditor_OnComplete( editorInstance )
{
    alert( editorInstance.Name ) ;
}

В отличие от стандартной функции, каждый экземпляр FCKeditor имеет объект "Events", который может быть использован для отслеживания событий.

Пример: следующий код прослушивает на предмет события "OnSelectionChange", чтобы выполнить произвольный код:

function FCKeditor_OnComplete( editorInstance )
{
    editorInstance.Events.AttachEvent( 'OnSelectionChange', DoSomething ) ;
}

var counter = 0 ;

function DoSomething( editorInstance )
{
    // This is a sample function that shows in the title bar the number of times
    // the "OnSelectionChange" event is called.
    window.document.title = editorInstance.Name + ' : ' + ( ++counter ) ;
}

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

Вот список доступных событий:

• OnAfterLinkedFieldUpdate - срабатывает сразу после того, как спрятанное выбранное поле, связанное с редактором, изменяет свое содержимое. Это происходит обычно тогда, когда отправляют форму.
• OnAfterSetHTML - срабатывает, когда HTML-код загружен в редактор (в т.ч. при изменении отображения).
• OnFocus - срабатывает, когда редактор попадает в фокус.
  
• OnPaste - срабатывает, когда что-то вставляют в редактор.
  
• OnStatusChange - срабатывает, когда статус редактора изменяется. Следующие константы также доступны глобально на странице: FCK_STATUS_NOTLOADED, FCK_STATUS_ACTIVE и FCK_STATUS_COMPLETE.
• OnSelectionChange - срабатывает, когда текущее выделение в области редактирования изменяется включая позицию курсора и нажатые клавиши).
  Примечание: В IE, это событие срабатывает не при всех нажатиях клавишь, а только некоторых случайных.
  

Примеры использования

• Вставить HTML-код в позицию курсора:

  oEditor.InsertHtml(HTML);

• Повесить действие на кнопку в панели инструментов / команду:

  oEditor.Commands.GetCommand(commandName).Execute();

• Отключение кнопок панели инструмента:

  oEditor.EditorWindow.parent.FCKToolbarItems.LoadedItems[commandName].Disable();

• Установить значение настройки:

  oEditor.Config['<configVariableName>'] = 'newValue';

• Изменить стиль документа в редакторе во время редактирования:

  oEditor.EditorDocument.body.style.cssText += 'color: #322805; background-color: #F7C928;' ;

• Получить или поместить что-либо в редактор:

  FCKeditorAPI.GetInstance('InstanceName').EditorWindow.parent...

• Добавить функцию динамического сохранения:

  // called on save
  function doSave(){
          alert('Saved.');
          document.getElementById('someElement').innerHTML = 'Saved!';
          return false; //this disables default action (submitting the form)
  }
  // called when FCKeditor is done starting..
  function FCKeditor_OnComplete( editorInstance ){
          editorInstance.LinkedField.form.onsubmit = doSave;
  }
  

• Работа с выделением в редакторе: Используйте объект Selection.

Статьи схожей тематики:

Создание и использование плагинов FCKeditor

Новый плагин для FCKeditor - scaleimages

Подключаем к FCKeditor видео с RuTube

FCKeditor и настройка диалогов

Минималистичный WYSIWYG

Добавить комментарий

RSS сайта

и rss комментариев