Documentation

3.3 Adding custom styles to editor

Custom styles are needed for content in many cases. They can be easily added to the content editor.

 You need to create an XML file in called Resources/config/contentstyle/contentstyle.xml.

In this XML file you can specify style format options:

title Title as used in the "Formats" dialog in the content editor
block The block element to use for this style when the content is stored
classes Classes to add to the block element for this style
wrapper If true multiple lines will be merged into one style

You can also specify a content_css file. This file will be included in the content editor and is used to display the styles within Integrated, when editing content.

AppBundle/Resources/config/contentstyle/contentstyle.xml:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<styles>
  <option type="style_formats">
    <title>Highlighted</title>
    <block>div</block>
    <classes>frame-highlighted</classes>
    <wrapper>true</wrapper>
  </option>
 
  <option type="style_formats">
    <title>Author</title>
    <block>div</block>
    <classes>frame-author</classes>
    <wrapper>true</wrapper>
  </option>
 
  <option type="style_formats">
    <title>General frame</title>
    <block>div</block>
    <classes>frame-general</classes>
    <wrapper>true</wrapper>
  </option>
 
  <option type="content_css">/bundles/app/css/editor.content.css</option>
</styles>

AppBundle/Resources/public/css/editor.content.css:

1
2
3
4
5
6
7
8
9
.frame-author {
  background-color: grey;
}
.frame-highlighted {
  background-color: grey;
}
.frame-general {
  background-color: grey;
}