Добавление пользовательских стилей в CKEditor

Question

Я недавно добавил CKEditor в свое приложение, и я хотел бы включить свои собственные таблицы стилей CSS в редактор, чтобы я мог выбрать их в редакторе.

Как мне это сделать? Мой код до сих пор выглядит так:

<script type="text/javascript">

    CKEDITOR.replace( 'editor1',{
        uiColor : '#9AB8F3',
    });

</script>

Answer 1

<script type="text/javascript">
  // This code could (may be should) go in your config.js file
  CKEDITOR.stylesSet.add('my_custom_style', [
    { name: 'My Custom Block', element: 'h3', styles: { color: 'blue'} },
    { name: 'My Custom Inline', element: 'span', attributes: {'class': 'mine'} }
  ]);
  // This code is for when you start up a CKEditor instance
  CKEDITOR.replace( 'editor1',{
    uiColor: '#9AB8F3',
    stylesSet: 'my_custom_style'
  });
</script>

Вы также можете прочитать полную документацию синтаксиса stylesSet.add:

• Документация CKEditor 4
• Документация CKEditor 3 , как упоминал Винсент.
• CKEditor 4 Как настроить раскрывающийся список стилей?
• CKEditor 3 Как настроить раскрывающийся список стилей?

Answer 2

Это работает для меня

CKEDITOR.addCss('body{background:blue;}');

Answer 3

Как уже упоминалось, есть страница, объясняющая, как настроить набор пользовательских стилей . Маленькая драгоценность, скрытая на этой странице (и не совсем понятная), заключается в том, что вместо создания именованного набора стилей вы можете определить встроенные стили в своей конфигурации, например:

    stylesSet : [
    {
        name : 'Green Title',
        element : 'h3',
        styles :
        {
            'color' : 'Green'
        }
    } ],

Answer 4

Здесь немного поздно, но стили по умолчанию - _source/plugins/styles/styles/default.js. Вы можете использовать это в качестве конфигурации стиля и добавлять стили, и это будет эффективно добавляться.

Answer 5

Лучше всего использовать этот плагин: http://ckeditor.com/addon/stylesheetparser

Вставьте его в каталог 'ckeditor / plugins', затем включите что-то вроде этого в ваш 'ckeditor / config.js':

config.extraPlugins = 'stylesheetparser';
config.contentsCss = '/css/inline-text-styles.css';
config.stylesSet = [];

Где '/css/inline-text-styles.css' - это путь к вашей собственной папке css в веб-корне вне ckeditor. Это избавляет вас от необходимости смешивать CSS с Javascript.

Answer 6

Пожалуйста, посмотрите на ответ @metavida для лучшего ответа, чем этот

<script type="text/javascript">

    CKEDITOR.replace( 'editor1',{

          uiColor : '#9AB8F3',
          stylesSet.add('default', [
               { name: 'My Custom Block', element: 'h3', styles: { color: 'Blue'} },
               { name: 'My Custom inline style', element: 'q'}
          ]);    
    });

</script>

Хотя, если вы используете это более чем в одном месте, было бы лучше посмотреть, поместив это в файл stylescombo \ styles \ default.js и обновив файл config.js соответствующим образом согласно API.