Creating style presets for the CKEditor
Permalink
what would be best practise for creating style presets for the CKEditor?
A: in the pagetheme > theme editor classes?
B: in CKEditor style editor > json-file? (where can i find instructions?)
We need to prepare instructions for editors creating content in CKEditor. Is it safe to use already CKEditor before an official version is out for concrete5?
thank you in advance.
blink
A: in the pagetheme > theme editor classes?
B: in CKEditor style editor > json-file? (where can i find instructions?)
We need to prepare instructions for editors creating content in CKEditor. Is it safe to use already CKEditor before an official version is out for concrete5?
thank you in advance.
blink
I believe this article is what you are looking for:http://documentation.concrete5.org/tutorials/adding-redactor-custom...
Hi blinkdesign,
Community CKEditor will read your theme page_theme.php and use the existing custom editor styles in getThemeEditorClasses() as inline or block styles. To use object, custom, and widget styles, you will need to add the styles in JSON format in the CKEditor Styles dashboard page.
Dashboard > System & Settings > Basics > Rich Text Editor > Ckeditor Styles
I will reply to this discussion later with some examples of how to write those styles and other boilerplate styles needed.
CKEditor will replace Redactor in the upcoming concrete5 version 8. When it is released, there will be documentation added tohttp://documentation.concrete5.org/developers... .
For more information on CKEditor styles:
http://docs.ckeditor.com/#!/guide/dev_styles-section-style-types...
Regarding the safety of the Community CKEditor, many are using it in production environments successfully.
More information on the topic is available here:
http://www.concrete5.org/community/forums/5-7-discussion/redactor-i...
Community CKEditor will read your theme page_theme.php and use the existing custom editor styles in getThemeEditorClasses() as inline or block styles. To use object, custom, and widget styles, you will need to add the styles in JSON format in the CKEditor Styles dashboard page.
Dashboard > System & Settings > Basics > Rich Text Editor > Ckeditor Styles
I will reply to this discussion later with some examples of how to write those styles and other boilerplate styles needed.
CKEditor will replace Redactor in the upcoming concrete5 version 8. When it is released, there will be documentation added tohttp://documentation.concrete5.org/developers... .
For more information on CKEditor styles:
http://docs.ckeditor.com/#!/guide/dev_styles-section-style-types...
Regarding the safety of the Community CKEditor, many are using it in production environments successfully.
More information on the topic is available here:
http://www.concrete5.org/community/forums/5-7-discussion/redactor-i...
thanks mrdilkington,
all out presets are now in page_theme.php. since we have many styles i wondered if it would be better (for portable and exchanging styles) to use it in CKEditor.
we look forward to your examples.
blink.
all out presets are now in page_theme.php. since we have many styles i wondered if it would be better (for portable and exchanging styles) to use it in CKEditor.
we look forward to your examples.
blink.
Here is a rough draft of basic CKEditor style documentation:
STYLE TYPES
Block
- Applied to continuous text blocks. These apply to the following elements: address, div, h1, h2, h3, h4, h5, h6, p, and pre.
Inline
- Applied to text selections for style rules using inline elements. An example inline element is the span tag.
Object
- Applied to non-text objects. These apply to the following elements: a, embed, hr, img, li, object, ol, table, td, tr, and ul.
Widget
- Applied to widgets. Widgets are groups of elements which are treated as a single entity inside the editor. An example widget is the Enchanced Image Plugin.
STYLE RULES
Name
- required
- the name of the style displayed in the styles drop-down
Element
- required
- in block and inline styles: the element the selected text, or text block, will use after the style is applied
- in object styles: the type of object to be targeted
Example: inline style
- selected text will be wrapped in a span with the class of "text-highlight"
Example: block style
- the selected paragraph text block will be assigned the class of "job-description"
Example: object style
- the selected img element will be assigned the class "img-circle
Example: object style
- the selected table element will be assigned the class "table-striped-black-header"
* multiple elements can be targeted
- when multiple elements are targeted, the style does not change the element of the selected text or text block
Example:
- this adds the class "article-heading" to h1, h2, and h3 tags only
- "Article Heading" won't be available from the styles drop-down for other elements
Styles
- CSS applied inline to an element
- multiple styles can be used
Example: one style
- the selected paragraph text block will be assigned a style attribute with the color red
Example: multiple styles
- the selected paragraph text block will be assigned a style attribute with the color red, font size 40px, and font weight bold
Attributes
- the available attributes of an element type
- this can also attributes like "data-"
- multiple attributes can be used
Example: one attribute
- the selected text paragraph block will be assigned a class attribute of "link-symbol"
Example: multiple attributes
- the selected img element will be assigned the attribute 'data-launch="1"', the class "special-image", and the id "launch".
Widget specific style rules
- to define a widget style you need to specify two additional properties in your style definition
Type
- required
– must be set to "widget"
Widget
- required
– set to the name of the widget
Example: Enhanced Image plugin
- the Enhanced Image plugin widget name is "image"
Styles and attributes can be combined
Example:
JSON formatting
- CKEditor styles are defined using the JSON format
- names and values are enclosed in double quotes
- no single quotes, use double quotes only
- no trailing commas
Example: formatting of multiple styles for easier reading and management
*** Very Important ***
- whenever possible, avoid using inline styles and instead use classes to style content
- inline styles have a high selector specificity and are very hard to override and manage
STYLE TYPES
Block
- Applied to continuous text blocks. These apply to the following elements: address, div, h1, h2, h3, h4, h5, h6, p, and pre.
Inline
- Applied to text selections for style rules using inline elements. An example inline element is the span tag.
Object
- Applied to non-text objects. These apply to the following elements: a, embed, hr, img, li, object, ol, table, td, tr, and ul.
Widget
- Applied to widgets. Widgets are groups of elements which are treated as a single entity inside the editor. An example widget is the Enchanced Image Plugin.
STYLE RULES
Name
- required
- the name of the style displayed in the styles drop-down
Element
- required
- in block and inline styles: the element the selected text, or text block, will use after the style is applied
- in object styles: the type of object to be targeted
Example: inline style
{"name": "Text Highlight", "element": "span", "attributes": {"class": "text-highlight"}}
- selected text will be wrapped in a span with the class of "text-highlight"
Example: block style
{"name": "Job Description", "element": "p", "attributes": {"class": "job-description"}}
- the selected paragraph text block will be assigned the class of "job-description"
Example: object style
{"name": "Image Circle", "element": "img", "attributes": {"class": "img-circle"}}
- the selected img element will be assigned the class "img-circle
Example: object style
{"name": "Table Striped Black Header", "element": "table", "attributes": {"class": "table-striped-black-header"}}
- the selected table element will be assigned the class "table-striped-black-header"
* multiple elements can be targeted
- when multiple elements are targeted, the style does not change the element of the selected text or text block
Example:
{"name": "Article Heading", "element": ["h1", "h2", "h3"], "attributes": {"class": "article-heading"}}
- this adds the class "article-heading" to h1, h2, and h3 tags only
- "Article Heading" won't be available from the styles drop-down for other elements
Styles
- CSS applied inline to an element
- multiple styles can be used
Example: one style
{"name": "Red", "element": "p", "styles": {"color": "red"}}
- the selected paragraph text block will be assigned a style attribute with the color red
Example: multiple styles
{"name": "Big Bold Red", "element": "p", "styles": {"color": "red", "font-size": "40px", "font-weight": "bold"}}
- the selected paragraph text block will be assigned a style attribute with the color red, font size 40px, and font weight bold
Attributes
- the available attributes of an element type
- this can also attributes like "data-"
- multiple attributes can be used
Example: one attribute
{"name": "Link Symbol", "element": "p", "attributes": {"class": "link-symbol"}}
- the selected text paragraph block will be assigned a class attribute of "link-symbol"
Example: multiple attributes
{"name": "Special Image", "element": "img", "attributes": {"data-launch": "1", "class": "special-image", "id": "launch"}}
- the selected img element will be assigned the attribute 'data-launch="1"', the class "special-image", and the id "launch".
Widget specific style rules
- to define a widget style you need to specify two additional properties in your style definition
Type
- required
– must be set to "widget"
Widget
- required
– set to the name of the widget
Example: Enhanced Image plugin
{"name": "Blue Border", "type": "widget", "widget": "image", "attributes": {"class": "blue-border"}}
- the Enhanced Image plugin widget name is "image"
Styles and attributes can be combined
Example:
{"name": "Product List", "element": "ul", "styles": {"list-style-type": "square"}, "attributes": {"class": "product-list"}}
JSON formatting
- CKEditor styles are defined using the JSON format
- names and values are enclosed in double quotes
- no single quotes, use double quotes only
- no trailing commas
Example: formatting of multiple styles for easier reading and management
[{ "name": "Image Circle", "element": "img", "attributes": { "class": "img-circle" } }, { "name": "Special Image", "element": "img", "attributes": { "data-launch": "1", "class": "special-image", "id": "launch" } }, {
Viewing 15 lines of 40 lines. View entire code block.
*** Very Important ***
- whenever possible, avoid using inline styles and instead use classes to style content
- inline styles have a high selector specificity and are very hard to override and manage
works!
thank you for your extensive instructions. this should go into documentation or tutorials.
regards.
blink.
thank you for your extensive instructions. this should go into documentation or tutorials.
regards.
blink.
