js/ckeditor/styles.js

   1 /**\r
   2  * Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights reserved.\r
   3  * For licensing, see LICENSE.md or http://ckeditor.com/license\r
   4  */\r
   5 \r
   6 // This file contains style definitions that can be used by CKEditor plugins.\r
   7 //\r
   8 // The most common use for it is the "stylescombo" plugin which shows the Styles drop-down\r
   9 // list containing all styles in the editor toolbar. Other plugins, like\r
  10 // the "div" plugin, use a subset of the styles for their features.\r
  11 //\r
  12 // If you do not have plugins that depend on this file in your editor build, you can simply\r
  13 // ignore it. Otherwise it is strongly recommended to customize this file to match your\r
  14 // website requirements and design properly.\r
  15 //\r
  16 // For more information refer to: http://docs.ckeditor.com/#!/guide/dev_styles-section-style-rules\r
  17 \r
  18 CKEDITOR.stylesSet.add( 'default', [\r
  19         /* Block styles */\r
  20 \r
  21         // These styles are already available in the "Format" drop-down list ("format" plugin),\r
  22         // so they are not needed here by default. You may enable them to avoid\r
  23         // placing the "Format" combo in the toolbar, maintaining the same features.\r
  24         /*\r
  25         { name: 'Paragraph',            element: 'p' },\r
  26         { name: 'Heading 1',            element: 'h1' },\r
  27         { name: 'Heading 2',            element: 'h2' },\r
  28         { name: 'Heading 3',            element: 'h3' },\r
  29         { name: 'Heading 4',            element: 'h4' },\r
  30         { name: 'Heading 5',            element: 'h5' },\r
  31         { name: 'Heading 6',            element: 'h6' },\r
  32         { name: 'Preformatted Text',element: 'pre' },\r
  33         { name: 'Address',                      element: 'address' },\r
  34         */\r
  35 \r
  36         { name: 'Italic Title',         element: 'h2', styles: { 'font-style': 'italic' } },\r
  37         { name: 'Subtitle',                     element: 'h3', styles: { 'color': '#aaa', 'font-style': 'italic' } },\r
  38         {\r
  39                 name: 'Special Container',\r
  40                 element: 'div',\r
  41                 styles: {\r
  42                         padding: '5px 10px',\r
  43                         background: '#eee',\r
  44                         border: '1px solid #ccc'\r
  45                 }\r
  46         },\r
  47 \r
  48         /* Inline styles */\r
  49 \r
  50         // These are core styles available as toolbar buttons. You may opt enabling\r
  51         // some of them in the Styles drop-down list, removing them from the toolbar.\r
  52         // (This requires the "stylescombo" plugin.)\r
  53         /*\r
  54         { name: 'Strong',                       element: 'strong', overrides: 'b' },\r
  55         { name: 'Emphasis',                     element: 'em'   , overrides: 'i' },\r
  56         { name: 'Underline',            element: 'u' },\r
  57         { name: 'Strikethrough',        element: 'strike' },\r
  58         { name: 'Subscript',            element: 'sub' },\r
  59         { name: 'Superscript',          element: 'sup' },\r
  60         */\r
  61 \r
  62         { name: 'Marker',                       element: 'span', attributes: { 'class': 'marker' } },\r
  63 \r
  64         { name: 'Big',                          element: 'big' },\r
  65         { name: 'Small',                        element: 'small' },\r
  66         { name: 'Typewriter',           element: 'tt' },\r
  67 \r
  68         { name: 'Computer Code',        element: 'code' },\r
  69         { name: 'Keyboard Phrase',      element: 'kbd' },\r
  70         { name: 'Sample Text',          element: 'samp' },\r
  71         { name: 'Variable',                     element: 'var' },\r
  72 \r
  73         { name: 'Deleted Text',         element: 'del' },\r
  74         { name: 'Inserted Text',        element: 'ins' },\r
  75 \r
  76         { name: 'Cited Work',           element: 'cite' },\r
  77         { name: 'Inline Quotation',     element: 'q' },\r
  78 \r
  79         { name: 'Language: RTL',        element: 'span', attributes: { 'dir': 'rtl' } },\r
  80         { name: 'Language: LTR',        element: 'span', attributes: { 'dir': 'ltr' } },\r
  81 \r
  82         /* Object styles */\r
  83 \r
  84         {\r
  85                 name: 'Styled Image (left)',\r
  86                 element: 'img',\r
  87                 attributes: { 'class': 'left' }\r
  88         },\r
  89 \r
  90         {\r
  91                 name: 'Styled Image (right)',\r
  92                 element: 'img',\r
  93                 attributes: { 'class': 'right' }\r
  94         },\r
  95 \r
  96         {\r
  97                 name: 'Compact Table',\r
  98                 element: 'table',\r
  99                 attributes: {\r
 100                         cellpadding: '5',\r
 101                         cellspacing: '0',\r
 102                         border: '1',\r
 103                         bordercolor: '#ccc'\r
 104                 },\r
 105                 styles: {\r
 106                         'border-collapse': 'collapse'\r
 107                 }\r
 108         },\r
 109 \r
 110         { name: 'Borderless Table',             element: 'table',       styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },\r
 111         { name: 'Square Bulleted List', element: 'ul',          styles: { 'list-style-type': 'square' } },\r
 112 \r
 113         /* Widget styles */\r
 114 \r
 115         { name: 'Clean Image', type: 'widget', widget: 'image', attributes: { 'class': 'image-clean' } },\r
 116         { name: 'Grayscale Image', type: 'widget', widget: 'image', attributes: { 'class': 'image-grayscale' } },\r
 117 \r
 118         { name: 'Featured Snippet', type: 'widget', widget: 'codeSnippet', attributes: { 'class': 'code-featured' } },\r
 119 \r
 120         { name: 'Featured Formula', type: 'widget', widget: 'mathjax', attributes: { 'class': 'math-featured' } },\r
 121 \r
 122         { name: '240p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-240p' }, group: 'size' },\r
 123         { name: '360p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-360p' }, group: 'size' },\r
 124         { name: '480p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-480p' }, group: 'size' },\r
 125         { name: '720p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-720p' }, group: 'size' },\r
 126         { name: '1080p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-1080p' }, group: 'size' },\r
 127 \r
 128         // Adding space after the style name is an intended workaround. For now, there\r
 129         // is no option to create two styles with the same name for different widget types. See http://dev.ckeditor.com/ticket/16664.\r
 130         { name: '240p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-240p' }, group: 'size' },\r
 131         { name: '360p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-360p' }, group: 'size' },\r
 132         { name: '480p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-480p' }, group: 'size' },\r
 133         { name: '720p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-720p' }, group: 'size' },\r
 134         { name: '1080p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-1080p' }, group: 'size' }\r
 135 \r
 136 ] );\r
 137 \r