alloy editor
  • Docs
  • Updates
  • Develop
    • About
    • Build it
    • Create
    • Create Buttons
    • Create Skins
    • Create Toolbars
    • Create entirely new UI
  • Use
    • Basic use
    • How to use it?
    • Creating a React component
    • How to use CKEditor Plugins?
    • Editor Configuration
    • Toolbar configuration
    • Button configuration
    • Read only mode
    • Skins
  • Features
    • Quote
    • Bold
    • Code
    • Horizontal Line
    • Heading 1
    • Image Alignment - Center
    • Heading 2
    • Image
    • Image Alignment - Left
    • Image Alignment - Right
    • Indent and outdent block content
    • Link
    • Link AutoComplete
    • Italic
    • Text Alignment - Centered
    • Text Alignment - Left
    • Text Alignment - Justified
    • Camera
    • Strike
    • Remove Format
    • Text Alignment - Right
    • Styles
    • Superscript
    • Subscript
    • Table
    • Table - Cells
    • Table - Columns
    • Lists (Numbered)
    • Table - Heading
    • Table - Remove
    • Table - Rows
    • Underline
    • Twitter
    • Lists (Bulleted)

Styles

Use this button to highlight important content.
var editor = AlloyEditor.editable('myContentEditable', {
	toolbars: {
		styles: {
			selections: [
				{
					name: 'text',
					buttons: [{
						name: 'styles',
						cfg: {
							styles: [
								{
									name: 'Head 1',
									style: { element: 'h1' }
								},
								{
									name: 'Head 2',
									style: { element: 'h2' }
								},
								{
									name: 'Big',
									style: { element: 'big' }
								},
								{
									name: 'Small',
									style: { element: 'small' }
								},
								{
									name: 'Code',
									style: { element: 'code' }
								}
							]
						}
					}],
					test: AlloyEditor.SelectionTest.text
				}
			]
		}
	}
});

Liferay.com