API documentation ↗
Custom Buttons
<vcf-enhanced-rich-text-editor id="custom-buttons">
<!-- Add custom buttons with HTML -->
<button id="custom-button" title="Greeting" slot="toolbar">
<iron-icon icon="vaadin:hand"></iron-icon>
</button>
</vcf-enhanced-rich-text-editor>
<script>
window.addEventListener('WebComponentsReady', () => {
const rte = document.querySelector('#custom-buttons')
const btn = rte.querySelector('#custom-button');
const editor = rte._editor;
const insertText = (text, options) => editor.insertText(editor.getLength(), text, options);
// Button handlers
const handler1 = () => insertText('Hello World!');
const handler2 = () => insertText('+', {bold: true});
const handler3 = () => {
editor.formatText(0, editor.getLength(), {
'color': '#FFF',
'background': '#396',
'bold': true
});
};
// Add click listener for button added with HTML
btn.addEventListener('click', handler1);
// Add custom buttons with JS
rte.addCustomButton(
'',
'Custom Button 2',
'vaadin:plus',
handler2,
{ key: 80, shiftKey: true, shortKey: true, handler: handler2 } // Ctrl (Cmd) + Shft + P
)
rte.addCustomButton(
'Green',
'Green theme',
'vaadin:chevron-right',
handler3,
{ key: 71, altKey: true, shortKey: true, handler: handler3 } // Ctrl (Cmd) + Alt + G
)
});
</script>
Placeholders
<vcf-enhanced-rich-text-editor id="placeholders" style="height: 300px;"></vcf-enhanced-rich-text-editor>
<script>
window.addEventListener('WebComponentsReady', () => {
const rte = document.querySelector('#placeholders');
rte.value = '[{"insert":"The company "},{"insert":{"placeholder":{"text":"N-1=Vaadin","format":{"italic":true},"altFormat":{"italic":false,"bold":true, "script": \"sub\"}}}},{"insert":", located in "},{"insert":{"placeholder":{"text":"A-1=Turku, 20540","altFormat":{"link":"https://goo.gl/maps/EX8RTEMUWeEAdkNN8"}}}},{"insert":", was founded in "},{"insert":{"placeholder":{"text":"D-1=01-01-2000"}}},{"insert":"."}]';
rte.placeholders = [
{text: 'N-1=Vaadin', format: {italic: true}, altFormat: {italic: false, bold: true, script: 'sub'}},
{text: 'A-1=Turku, 20540', altFormat: {link: 'https://goo.gl/maps/EX8RTEMUWeEAdkNN8'}},
'D-1=01-01-2000'
];
rte.placeholderAltAppearancePattern = '(?<=\\=).*$';
rte.placeholderAltAppearance = true;
});
</script>
Tab Stops
<vcf-enhanced-rich-text-editor style="height: 400px;"></vcf-enhanced-rich-text-editor>
Disabled
High quality rich text editor for the web
Some readonly text<vcf-enhanced-rich-text-editor>is a Web Component providing rich text editor functionality, part of the Vaadin components.
It handles the following formatting:
- More readonly textBold
- Italic
- Underline
Strike-through- Headings (H1, H2, H3)
- Lists (ordered and unordered)
- Text align (left, center, right)
- Subscript and superscript
- Hyperlink
In addition to text formatting, additional content blocks can be added.
Images
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Code blocks
<body> <vcf-enhanced-rich-text-editor></vcf-enhanced-rich-text-editor> </body>
<vcf-enhanced-rich-text-editor style="height: 300px;" disabled></vcf-enhanced-rich-text-editor>
Minimum/Maximum Height
High quality rich text editor for the web
Some readonly text<vcf-enhanced-rich-text-editor>is a Web Component providing rich text editor functionality, part of the Vaadin components.
It handles the following formatting:
- More readonly textBold
- Italic
- Underline
Strike-through- Headings (H1, H2, H3)
- Lists (ordered and unordered)
- Text align (left, center, right)
- Subscript and superscript
- Hyperlink
In addition to text formatting, additional content blocks can be added.
Images
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Code blocks
<body> <vcf-enhanced-rich-text-editor></vcf-enhanced-rich-text-editor> </body>
<style>
vcf-enhanced-rich-text-editor.height-constraints {
min-height: 400px;
max-height: 600px;
}
</style>
<vcf-enhanced-rich-text-editor class="height-constraints"></vcf-enhanced-rich-text-editor>
Customizing toolbar
High quality rich text editor for the web
Some readonly text<vcf-enhanced-rich-text-editor>is a Web Component providing rich text editor functionality, part of the Vaadin components.
It handles the following formatting:
- More readonly textBold
- Italic
- Underline
Strike-through- Headings (H1, H2, H3)
- Lists (ordered and unordered)
- Text align (left, center, right)
- Subscript and superscript
- Hyperlink
In addition to text formatting, additional content blocks can be added.
Images
Blockquotes
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Code blocks
<body> <vcf-enhanced-rich-text-editor></vcf-enhanced-rich-text-editor> </body>
<vcf-enhanced-rich-text-editor id="custom-toolbar"></vcf-enhanced-rich-text-editor>
<script>
window.addEventListener('WebComponentsReady', () => {
var rte = document.querySelector('#custom-toolbar');
rte.toolbarButtons = {undo: false, redo: false, h1: false, h2: false, h3: false, image: false, link: false};
});
</script>
Custom shortcuts for toolbar standard buttons
<vcf-enhanced-rich-text-editor id="custom-toolbar-shortcuts"></vcf-enhanced-rich-text-editor>
<script>
window.addEventListener('WebComponentsReady', () => {
var rte = document.querySelector('#custom-toolbar-shortcuts');
// shift + f9 for align center
rte.addStandardButtonBinding("alignCenter", 120 , false, true, false);
// shift + P for superscript
rte.addStandardButtonBinding("superscript", 80 , false, true, false);
// ctrol + B for header 1
rte.addStandardButtonBinding("h1", 66 , true, false, false);
// f9 to load an image
rte.addStandardButtonBinding("image", 120, false, false, false);
});
</script>