Se simplifica el desplegable de estilos de CKEditor

plugins/redmine_ckeditor/assets/ckeditor/styles.js

@@ -18,6 +18,14 @@
 CKEDITOR.stylesSet.add( 'default', [
 	/* Block styles */
 
+	{ name: 'Normal',           element: 'p',      attributes: { 'class': '' } },
+
+	{ name: 'A !',              element: 'p',      attributes: { 'class': 'note-cyan' } },
+	{ name: 'B !',              element: 'p',      attributes: { 'class': 'note-green' } },
+	{ name: 'C !',              element: 'p',      attributes: { 'class': 'note-yellow' } },
+	{ name: 'D !',              element: 'p',      attributes: { 'class': 'note-orange' } },
+	{ name: 'E !',              element: 'p',      attributes: { 'class': 'note-red' } },
+
 	// These styles are already available in the "Format" drop-down list ("format" plugin),
 	// so they are not needed here by default. You may enable them to avoid
 	// placing the "Format" combo in the toolbar, maintaining the same features.
@@ -31,10 +39,9 @@ CKEDITOR.stylesSet.add( 'default', [
 	{ name: 'Heading 6',		element: 'h6' },
 	{ name: 'Preformatted Text',element: 'pre' },
 	{ name: 'Address',			element: 'address' },
-	*/
 
-	{ name: 'Italic Title',		element: 'h2', styles: { 'font-style': 'italic' } },
+	{ name: 'Italic Title',		element: 'h2',     styles: { 'font-style': 'italic' } },
-	{ name: 'Subtitle',			element: 'h3', styles: { 'color': '#aaa', 'font-style': 'italic' } },
+	{ name: 'Subtitle',			element: 'h3',     styles: { 'color': '#aaa', 'font-style': 'italic' } },
 	{
 		name: 'Special Container',
 		element: 'div',
@@ -43,23 +50,27 @@ CKEDITOR.stylesSet.add( 'default', [
 			background: '#eee',
 			border: '1px solid #ccc'
 		}
-	},
+	}, */
 
 	/* Inline styles */
 
+	{ name: '[code]',           element: 'code' },
+	{ name: '"sample"',         element: 'samp' },
+	{ name: 'Variable',         element: 'var' },
+	{ name: 'Keyboard',         element: 'kbd' }
+
 	// These are core styles available as toolbar buttons. You may opt enabling
 	// some of them in the Styles drop-down list, removing them from the toolbar.
 	// (This requires the "stylescombo" plugin.)
 	/*
 	{ name: 'Strong',			element: 'strong', overrides: 'b' },
-	{ name: 'Emphasis',			element: 'em'	, overrides: 'i' },
+	{ name: 'Emphasis',			element: 'em',     overrides: 'i' },
 	{ name: 'Underline',		element: 'u' },
 	{ name: 'Strikethrough',	element: 'strike' },
 	{ name: 'Subscript',		element: 'sub' },
 	{ name: 'Superscript',		element: 'sup' },
-	*/
 
-	{ name: 'Marker',			element: 'span', attributes: { 'class': 'marker' } },
+	{ name: 'Marker',			element: 'span',   attributes: { 'class': 'marker' } },
 
 	{ name: 'Big',				element: 'big' },
 	{ name: 'Small',			element: 'small' },
@@ -76,11 +87,11 @@ CKEDITOR.stylesSet.add( 'default', [
 	{ name: 'Cited Work',		element: 'cite' },
 	{ name: 'Inline Quotation',	element: 'q' },
 
-	{ name: 'Language: RTL',	element: 'span', attributes: { 'dir': 'rtl' } },
+	{ name: 'Language: RTL',	element: 'span',   attributes: { 'dir': 'rtl' } },
-	{ name: 'Language: LTR',	element: 'span', attributes: { 'dir': 'ltr' } },
+	{ name: 'Language: LTR',	element: 'span',   attributes: { 'dir': 'ltr' } }, */
 
 	/* Object styles */
-
+	/*
 	{
 		name: 'Styled Image (left)',
 		element: 'img',
@@ -108,10 +119,10 @@ CKEDITOR.stylesSet.add( 'default', [
 	},
 
 	{ name: 'Borderless Table',		element: 'table',	styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
-	{ name: 'Square Bulleted List',	element: 'ul',		styles: { 'list-style-type': 'square' } },
+	{ name: 'Square Bulleted List',	element: 'ul',		styles: { 'list-style-type': 'square' } }, */
 
 	/* Widget styles */
-
+	/*
 	{ name: 'Clean Image', type: 'widget', widget: 'image', attributes: { 'class': 'image-clean' } },
 	{ name: 'Grayscale Image', type: 'widget', widget: 'image', attributes: { 'class': 'image-grayscale' } },
 
@@ -131,7 +142,6 @@ CKEDITOR.stylesSet.add( 'default', [
 	{ name: '360p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-360p' }, group: 'size' },
 	{ name: '480p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-480p' }, group: 'size' },
 	{ name: '720p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-720p' }, group: 'size' },
-	{ name: '1080p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-1080p' }, group: 'size' }
+	{ name: '1080p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-1080p' }, group: 'size' } */
-
 ] );
 

public/themes/circlepro/stylesheets/editor.css

@@ -11,6 +11,24 @@ body {
 	text-rendering: optimizeLegibility;
 }
 
+code, kbd, samp, pre {
+	font-family: Menlo,Monaco,Consolas,"Courier New",monospace;
+}
+code, kbd {
+	padding: 2px 4px;
+	font-size: 90%;
+	border-radius: 0;
+}
+code {
+	color: #c7254e;
+	background-color: #f9f2f4;
+}
+kbd {
+	color: #fff;
+	background-color: #333;
+	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.25);
+}
+
 /* Headers */
 h1, h2, h3, h4, h5, h6 {
 	font-family: Lato,HelveticaNeue,"Helvetica Neue",Helvetica,Arial,sans-serif;
@@ -112,6 +130,35 @@ div.youtube-embed-wrapper .responsive-view {
 	height: 100%;
 }
 
+/*
+ * Other styles used in the "Styles" toolbar command.
+ */
+.note-red,
+.note-cyan,
+.note-green,
+.note-orange,
+.note-yellow {
+	color: #222; /*
+	margin: .5em; */
+	padding: .5em;
+}
+.note-red {
+	background-color: Red;
+	color: #fff;
+}
+.note-cyan {
+	background-color: SkyBlue;
+}
+.note-green {
+	background-color: PaleGreen;
+}
+.note-orange {
+	background-color: Coral;
+}
+.note-yellow {
+	background-color: BlanchedAlmond;
+}
+ 
 /* Responsive */
 @media screen and (max-width: 767px) {
 	.wiki p, .wiki li {