WYSIWYG Elements to Bolt Components
Ideal CKEditor Config
Bolt needs to create an example of CKEditor that can map to web components, and all the related Bolt components need to become web components.
ClassicEditor
.create( document.querySelector( '#editor' ), {
heading: {
options: [
{ model: 'paragraph', view: 'bolt-text', title: 'Paragraph' },
{ model: 'headline1', view: 'bolt-text', title: 'Headline xxxlarge h1', attributes: { headline: true, font-size: 'xxxlarge', tag: 'h1' } },
{ model: 'headline2', view: 'bolt-text', title: 'Headline xxlarge h2', attributes: { headline: true, font-size: 'xxlarge', tag: 'h2' } },
{ model: 'headline3', view: 'bolt-text', title: 'Headline xlarge h3', attributes: { headline: true, font-size: 'xlarge', tag: 'h3' } },
{ model: 'headline4', view: 'bolt-text', title: 'Headline large h4', attributes: { headline: true, font-size: 'large', tag: 'h4' } },
{ model: 'headline5', view: 'bolt-text', title: 'Headline small h5', attributes: { headline: true, font-size: 'small', tag: 'h5' } },
{ model: 'headline6', view: 'bolt-text', title: 'Headline xsmall h6', attributes: { headline: true, font-size: 'xsmall', tag: 'h6' } },
{ model: 'subheadline1', view: 'bolt-text', title: 'Subheadline xxlarge', attributes: { subheadline: true, font-size: 'xxlarge', tag: 'p' } },
{ model: 'subheadline2', view: 'bolt-text', title: 'Subheadline xlarge', attributes: { subheadline: true, font-size: 'xlarge', tag: 'p' } },
{ model: 'subheadline3', view: 'bolt-text', title: 'Subheadline large', attributes: { subheadline: true, font-size: 'large', tag: 'p' } },
{ model: 'eyebrow', view: 'bolt-text', title: 'Eyebrow', attributes: { eyebrow: true, tag: 'p' } },
{ model: 'link', view: 'bolt-text', title: 'Link', attributes: { eyebrow: true, tag: 'a' } },
{ model: 'blockquote', view: 'bolt-blockquote', title: 'Blockquote' },
{ model: 'ordered-list', view: 'bolt-ordered-list', title: 'Ordered list' },
{ model: 'unordered-list', view: 'bolt-unordered-list', title: 'Unordered list' },
{ model: 'code', view: 'bolt-code-snippet', title: 'Code snippet' },
]
}
} )
.then( ... )
.catch( ... );
CKEditor Docs
The docs show that mapping each style option to a specific tag and class is possible, but we need to figure out if it can do attributes as well. Otherwise, we'd have to make sure our web components can work without any attributes.
https://github.com/ckeditor/ckeditor-dev/tree/major/plugins
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_acf.html
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-protectedSource
Headlines
Headline 1 is XXLarge Headline
Headline 2 is XLarge Headline
Headline 3 is Large Headline
Text
Body text is medium sized text.
Italic text is emphasized.
Bold text is strong.
Superscript text is sup.
Subscript text is sub.
Link
Blockquote
Blockquote is blockquote component with default settings.
Ordered List
Unordered List
Code
Code text is the Code Snippet component with default settings.
Table
| Column 1 | Column 2 | Column 3 | |
|---|---|---|---|
| Row 1 | Table is the Table component with default settings. | R1C2 | R1C3 |
| Row 2 | R2C1 | R2C2 | R2C3 |
| Row 3 | R3C1 | R3C2 | R3C3 |
| Footer | FC1 | FC2 | FC3 |