styles.js 5.9 KB

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