/**\r
- * Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.\r
+ * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r
* For licensing, see LICENSE.md or http://ckeditor.com/license\r
*/\r
\r
// This file contains style definitions that can be used by CKEditor plugins.\r
//\r
-// The most common use for it is the "stylescombo" plugin, which shows a combo\r
-// in the editor toolbar, containing all styles. Other plugins instead, like\r
-// the div plugin, use a subset of the styles on their feature.\r
+// The most common use for it is the "stylescombo" plugin which shows the Styles drop-down\r
+// list containing all styles in the editor toolbar. Other plugins, like\r
+// the "div" plugin, use a subset of the styles for their features.\r
//\r
-// If you don't have plugins that depend on this file, you can simply ignore it.\r
-// Otherwise it is strongly recommended to customize this file to match your\r
+// If you do not have plugins that depend on this file in your editor build, you can simply\r
+// ignore it. Otherwise it is strongly recommended to customize this file to match your\r
// website requirements and design properly.\r
+//\r
+// For more information refer to: http://docs.ckeditor.com/#!/guide/dev_styles-section-style-rules\r
\r
CKEDITOR.stylesSet.add( 'default', [\r
- /* Block Styles */\r
+ /* Block styles */\r
\r
- // These styles are already available in the "Format" combo ("format" plugin),\r
+ // These styles are already available in the "Format" drop-down list ("format" plugin),\r
// so they are not needed here by default. You may enable them to avoid\r
// placing the "Format" combo in the toolbar, maintaining the same features.\r
/*\r
}\r
},\r
\r
- /* Inline Styles */\r
+ /* Inline styles */\r
\r
// These are core styles available as toolbar buttons. You may opt enabling\r
- // some of them in the Styles combo, removing them from the toolbar.\r
- // (This requires the "stylescombo" plugin)\r
+ // some of them in the Styles drop-down list, removing them from the toolbar.\r
+ // (This requires the "stylescombo" plugin.)\r
/*\r
{ name: 'Strong', element: 'strong', overrides: 'b' },\r
{ name: 'Emphasis', element: 'em' , overrides: 'i' },\r
{ name: 'Language: RTL', element: 'span', attributes: { 'dir': 'rtl' } },\r
{ name: 'Language: LTR', element: 'span', attributes: { 'dir': 'ltr' } },\r
\r
- /* Object Styles */\r
+ /* Object styles */\r
\r
{\r
- name: 'Styled image (left)',\r
+ name: 'Styled Image (left)',\r
element: 'img',\r
attributes: { 'class': 'left' }\r
},\r
\r
{\r
- name: 'Styled image (right)',\r
+ name: 'Styled Image (right)',\r
element: 'img',\r
attributes: { 'class': 'right' }\r
},\r
\r
{\r
- name: 'Compact table',\r
+ name: 'Compact Table',\r
element: 'table',\r
attributes: {\r
cellpadding: '5',\r
},\r
\r
{ name: 'Borderless Table', element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },\r
- { name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } }\r
+ { name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } },\r
+\r
+ /* Widget styles */\r
+\r
+ { name: 'Clean Image', type: 'widget', widget: 'image', attributes: { 'class': 'image-clean' } },\r
+ { name: 'Grayscale Image', type: 'widget', widget: 'image', attributes: { 'class': 'image-grayscale' } },\r
+\r
+ { name: 'Featured Snippet', type: 'widget', widget: 'codeSnippet', attributes: { 'class': 'code-featured' } },\r
+\r
+ { name: 'Featured Formula', type: 'widget', widget: 'mathjax', attributes: { 'class': 'math-featured' } },\r
+\r
+ { name: '240p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-240p' }, group: 'size' },\r
+ { name: '360p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-360p' }, group: 'size' },\r
+ { name: '480p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-480p' }, group: 'size' },\r
+ { name: '720p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-720p' }, group: 'size' },\r
+ { name: '1080p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-1080p' }, group: 'size' },\r
+\r
+ // Adding space after the style name is an intended workaround. For now, there\r
+ // is no option to create two styles with the same name for different widget types. See http://dev.ckeditor.com/ticket/16664.\r
+ { name: '240p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-240p' }, group: 'size' },\r
+ { name: '360p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-360p' }, group: 'size' },\r
+ { name: '480p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-480p' }, group: 'size' },\r
+ { name: '720p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-720p' }, group: 'size' },\r
+ { name: '1080p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-1080p' }, group: 'size' }\r
+\r
] );\r
\r