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

Paste is for source code and general debugging text.

Login or Register to edit, delete and keep track of your pastes and more.

Raw Paste

Login or Register to edit or fork this paste. It's free.