1/** 2 * Copyright (c) 2003-2020, 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 18CKEDITOR.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] ); 137