ALM: User Guide

To configure the styles the editor uses, you can customize it. Consider adding a custom style named "Computer Code 1".

Open for editing (or create) the file at

/var/www/devprom/htdocs/conf/plugins/wrtfckeditor/custom.js

Place the scripts that configure the editor in this file. For example, the contents can be:

CKEDITOR.stylesSet.add( 'default', [
	{ name: 'Italic Title', element: 'h2', styles: { 'font-style': 'italic' } },
	{ name: 'Subtitle', element: 'h3', styles: { 'color': '#aaa', 'font-style': 'italic' } },
	{
		name: 'Special Container',
		element: 'div',
		styles: {
			padding: '5px 10px',
			background: '#eee',
			border: '1px solid #ccc'
		}
	},

	{ name: 'Marker', element: 'span', attributes: { 'class': 'marker' } },

	{ name: 'Big', element: 'big' },
	{ name: 'Small', element: 'small' },
	{ name: 'Typewriter', element: 'tt' },

	{ name: 'Computer Code 1', element: 'code', attributes: {'custom': 'true'} },
	{ name: 'Keyboard Phrase', element: 'kbd' },
	{ name: 'Sample Text', element: 'samp' },
	{ name: 'Variable', element: 'var' },

	{ name: 'Deleted Text', element: 'del' },
	{ name: 'Inserted Text', element: 'ins' },

	{ name: 'Cited Work', element: 'cite' },
	{ name: 'Inline Quotation',	element: 'q' },


	/* Object styles */

	{
		name: 'Styled Image (left)',
		element: 'img',
		attributes: { 'class': 'left' }
	},
	{
		name: 'Styled Image (right)',
		element: 'img',
		attributes: { 'class': 'right' }
	},

	{
		name: 'Compact Table',
		element: 'table',
		attributes: {
			cellpadding: '5',
			cellspacing: '0',
			border: '1',
			bordercolor: '#ccc'
		},
		styles: {
			'border-collapse': 'collapse'
		}
	},

	{ name: 'Borderless Table', element: 'table', styles: { 'border-style': 'hidden', 'background-color': '#E6E6FA' } },
	{ 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' } },

	{ name: 'Featured Snippet', type: 'widget', widget: 'codeSnippet', attributes: { 'class': 'code-featured' } },

	{ name: 'Featured Formula', type: 'widget', widget: 'mathjax', attributes: { 'class': 'math-featured' } },

	{ name: '240p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-240p' }, group: 'size' },
	{ name: '360p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-360p' }, group: 'size' },
	{ name: '480p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-480p' }, group: 'size' },
	{ name: '720p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-720p' }, group: 'size' },
	{ name: '1080p', type: 'widget', widget: 'embedSemantic', attributes: { 'class': 'embed-1080p' }, group: 'size' },

	// Adding space after the style name is an intended workaround. For now, there
	// is no option to create two styles with the same name for different widget types. See https://dev.ckeditor.com/ticket/16664.
	{ name: '240p ', type: 'widget', widget: 'embed', attributes: { 'class': 'embed-240p' }, group: 'size' },
	{ 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' }
] );

In the example above we added a custom style:

{ name: 'Computer Code 1', element: 'code', attributes: {'custom': 'true'} },

the attributes listed in the attributes field are inserted into the HTML markup, which custom style settings can then be bound to.

Formatting text with this style therefore produces the following markup:

To set the style parameters, edit the file:

/var/www/devprom/htdocs/conf/plugins/wrtfckeditor/custom.css

For example, add the following formatting:

code[custom=true]
{
    background-color: black;
    color: white;
}

After the application cache and the browser cache are cleared, the document editor picks up these settings.