@vaadin/rich-text-editor
Version:
vaadin-rich-text-editor
121 lines • 8.23 kB
JSON
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/rich-text-editor",
"version": "24.7.3",
"description-markup": "markdown",
"contributions": {
"html": {
"elements": [
{
"name": "vaadin-rich-text-editor",
"description": "`<vaadin-rich-text-editor>` is a Web Component for rich text editing.\nIt provides a set of toolbar controls to apply formatting on the content,\nwhich is stored and can be accessed as HTML5 or JSON string.\n\n```\n<vaadin-rich-text-editor></vaadin-rich-text-editor>\n```\n\nVaadin Rich Text Editor focuses on the structure, not the styling of content.\nTherefore, the semantic HTML5 tags such as <h1>, <strong> and <ul> are used,\nand CSS usage is limited to most common cases, like horizontal text alignment.\n\n### Styling\n\nThe following state attributes are available for styling:\n\nAttribute | Description | Part name\n-------------|-------------|------------\n`disabled` | Set to a disabled text editor | :host\n`readonly` | Set to a readonly text editor | :host\n`on` | Set to a toolbar button applied to the selected text | toolbar-button\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-------------------------------------|----------------\n`content` | The content wrapper\n`toolbar` | The toolbar wrapper\n`toolbar-group` | The group for toolbar controls\n`toolbar-group-history` | The group for histroy controls\n`toolbar-group-emphasis` | The group for emphasis controls\n`toolbar-group-heading` | The group for heading controls\n`toolbar-group-style` | The group for style controls\n`toolbar-group-glyph-transformation` | The group for glyph transformation controls\n`toolbar-group-group-list` | The group for group list controls\n`toolbar-group-alignment` | The group for alignment controls\n`toolbar-group-rich-text` | The group for rich text controls\n`toolbar-group-block` | The group for preformatted block controls\n`toolbar-group-format` | The group for format controls\n`toolbar-button` | The toolbar button (applies to all buttons)\n`toolbar-button-pressed` | The toolbar button in pressed state (applies to all buttons)\n`toolbar-button-undo` | The \"undo\" button\n`toolbar-button-redo` | The \"redo\" button\n`toolbar-button-bold` | The \"bold\" button\n`toolbar-button-italic` | The \"italic\" button\n`toolbar-button-underline` | The \"underline\" button\n`toolbar-button-strike` | The \"strike-through\" button\n`toolbar-button-color` | The \"color\" button\n`toolbar-button-background` | The \"background\" button\n`toolbar-button-h1` | The \"header 1\" button\n`toolbar-button-h2` | The \"header 2\" button\n`toolbar-button-h3` | The \"header 3\" button\n`toolbar-button-subscript` | The \"subscript\" button\n`toolbar-button-superscript` | The \"superscript\" button\n`toolbar-button-list-ordered` | The \"ordered list\" button\n`toolbar-button-list-bullet` | The \"bullet list\" button\n`toolbar-button-align-left` | The \"left align\" button\n`toolbar-button-align-center` | The \"center align\" button\n`toolbar-button-align-right` | The \"right align\" button\n`toolbar-button-image` | The \"image\" button\n`toolbar-button-link` | The \"link\" button\n`toolbar-button-blockquote` | The \"blockquote\" button\n`toolbar-button-code-block` | The \"code block\" button\n`toolbar-button-clean` | The \"clean formatting\" button\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"attributes": [
{
"name": "value",
"description": "Value is a list of the operations which describe change to the document.\nEach of those operations describe the change at the current index.\nThey can be an `insert`, `delete` or `retain`. The format is as follows:\n\n```js\n [\n { insert: 'Hello World' },\n { insert: '!', attributes: { bold: true }}\n ]\n```\n\nSee also https://github.com/quilljs/delta for detailed documentation.",
"value": {
"type": [
"string"
]
}
},
{
"name": "disabled",
"description": "When true, the user can not modify, nor copy the editor content.",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "readonly",
"description": "When true, the user can not modify the editor content, but can copy it.",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "theme",
"description": "The theme variants to apply to the component.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
}
],
"js": {
"properties": [
{
"name": "value",
"description": "Value is a list of the operations which describe change to the document.\nEach of those operations describe the change at the current index.\nThey can be an `insert`, `delete` or `retain`. The format is as follows:\n\n```js\n [\n { insert: 'Hello World' },\n { insert: '!', attributes: { bold: true }}\n ]\n```\n\nSee also https://github.com/quilljs/delta for detailed documentation.",
"value": {
"type": [
"string"
]
}
},
{
"name": "disabled",
"description": "When true, the user can not modify, nor copy the editor content.",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "readonly",
"description": "When true, the user can not modify the editor content, but can copy it.",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "i18n",
"description": "An object used to localize this component. The properties are used\ne.g. as the tooltips for the editor toolbar buttons.",
"value": {
"type": [
"RichTextEditorI18n"
]
}
},
{
"name": "colorOptions",
"description": "The list of colors used by the background and text color\nselection controls. Should contain an array of HEX strings.\n\nWhen user selects `#000000` (black) as a text color,\nor `#ffffff` (white) as a background color, it resets\nthe corresponding format for the selected text.",
"value": {
"type": [
"Array",
"null",
"undefined"
]
}
}
],
"events": [
{
"name": "change",
"description": "Fired when the user commits a value change."
},
{
"name": "value-changed",
"description": "Fired when the `value` property changes."
},
{
"name": "html-value-changed",
"description": "Fired when the `htmlValue` property changes."
}
]
}
}
]
}
}
}