Класс формата CKEditor - PullRequest
Новая
       8

Класс формата CKEditor

4 голосов
/ 06 октября 2011

Я пишу плагин CKEditor для применения определенного класса к элементу.В основном этот класс устанавливает цвет текста на определенный красноватый цвет.

В любом случае, я не понимаю, как определить класс для обернутого текста.

Пожалуйста, посмотрите на мой код плагина: 

CKEDITOR.plugins.add( 'red',
{
    init: function( editor )
    {
        editor.addCommand( 'red',
            {
                exec : function( editor )
                {    
                    var format = {
                        element : 'span'
                    };

                    var style = new CKEDITOR.style(format);
                    style.apply(editor.document);
                }
            });
        editor.ui.addButton( 'red',
        {
            label: 'red',
            command: 'red',
            icon: this.path + 'images/red.png'
        } );
    }
} );

В основном я хочу получить такой вывод: 

<span class="red">This is now a red text</span>

Большое спасибо заранее за помощь.

Источники, которые я использовал для получения этогодалеко: http://docs.cksource.com/CKEditor_3.x/Howto http://docs.cksource.com/CKEditor_3.x/Tutorials/Timestamp_Plugin http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.command.html#exec

Может, я что-то там переоценил, но мне не кажется, что такого рода вещи там упоминаются?Пожалуйста, докажите, что я не прав:)

1 Ответ

5 голосов
/ 07 октября 2011

Вы можете использовать плагин "basicstyles" в качестве шаблона, он создает различные кнопки стиля (жирный, курсив и т. Д.):ckeditor / _source / plugins / basicstyles / plugin.js

Вот код для вашего плагина (на основе плагина basicstyles), это будет содержимое файла plugin.js, расположенного здесь:ckeditor / plugins / red / plugin.js

Значок для кнопки будет расположен здесь:ckeditor / plugins / red / images 

CKEDITOR.plugins.add( 'red',
{
  requires : [ 'styles', 'button' ],

  init : function( editor )
  {
    // This "addButtonCommand" function isn't needed, but
    // would be useful if you want to add multiple buttons
    var addButtonCommand = function( buttonName, buttonLabel, commandName, styleDefiniton )
    {
      var style = new CKEDITOR.style( styleDefiniton );
      editor.attachStyleStateChange( style, function( state )
        {
          !editor.readOnly && editor.getCommand( commandName ).setState( state );
        });

      editor.addCommand( commandName, new CKEDITOR.styleCommand( style ) );
      editor.ui.addButton( buttonName,
        {
          label : buttonLabel,
          command : commandName,
          icon: CKEDITOR.plugins.getPath('red') + 'images/red.png'
        });
    };

    var config = editor.config,
      lang = editor.lang;

    // This version uses the language functionality, as used in "basicstyles"
    // you'll need to add the label to each language definition file
    addButtonCommand( 'Red'   , lang.red    , 'red'   , config.coreStyles_red );

    // This version hard codes the label for the button by replacing `lang.red` with 'Red'
    addButtonCommand( 'Red'   , 'Red'   , 'red'   , config.coreStyles_red );
  }
});

// The basic configuration that you requested
CKEDITOR.config.coreStyles_red = { element : 'span', attributes : {'class': 'red'} };

// You can assign multiple attributes too
CKEDITOR.config.coreStyles_red = { element : 'span', attributes : { 'class': 'red', 'style' : 'background-color: yellow;', 'title' : 'Custom Format Entry' } };

Добавьте стиль для «красного» класса в файл ckeditor contents.css в дополнение к обычной таблице стилей (если вы не загружаете обычный лист как пользовательский cssфайл в ckeditor).

Добавьте новый плагин в свой конфигурационный файл: 

config.extraPlugins = 'red';

И добавьте кнопку на панель инструментов 'Red'

Для метки выможет создать массив с разными метками, назначенными каждому языковому коду, и получить правильную версию на основе активного языкового кода.Используйте editor.langCode для получения активного кода языка.

Если вы не хотите добавлять кнопку, вместо этого вы можете добавить новую запись в селектор «Формат».Это селектор с заголовками.

Будь здоров,Джо

...