Недавно я добавил CKEditor в свое приложение и хотел бы включить в редактор свои собственные таблицы стилей CSS, чтобы я мог выбирать их в редакторе.
Как мне это сделать? Мой код пока выглядит так:
<script type="text/javascript">
CKEDITOR.replace( 'editor1',{
uiColor : '#9AB8F3',
});
</script>
Пожалуйста, посмотрите ответ @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.
CKEDITOR.stylesSet.add и stylesSet на отдельные вызовы. Я использовал вариант кода в своем ответе на своем собственном веб-сайте.
- person metavida; 24.06.2011
<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.addCss('body{background:blue;}');
Как уже упоминалось, есть страница, объясняющая, как настроить набор пользовательских стилей. Маленькая жемчужина, скрытая на этой странице (и не очень понятная), заключается в том, что вместо создания именованного набора стилей вы можете определить стили, встроенные в вашу конфигурацию, например:
stylesSet : [
{
name : 'Green Title',
element : 'h3',
styles :
{
'color' : 'Green'
}
} ],
Лучше всего использовать этот плагин: 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.
Немного поздно для вечеринки здесь, но стили по умолчанию находятся в _source/plugins/styles/styles/default.js. Вы можете использовать это как свою конфигурацию стиля и добавлять стили, и это будет эффективно добавляться.
