Below you will find the full configuration for Toolbar buttons and button groups:
export const buttonConfigs = {
undo: {
view: "icon",
name: "undo",
icon: "rti-undo",
source: "undo",
tooltip: "Undo",
},
redo: {
view: "icon",
name: "redo",
icon: "rti-redo",
source: "redo",
tooltip: "Redo",
},
print: {
view: "icon",
name: "print",
icon: "rti-print",
tooltip: "Print",
},
fullscreen: {
view: "icon",
name: "fullscreen",
icon: "rti-fullscreen",
tooltip: "Full screen",
},
mode: {
view: "richtext-select",
width: 60,
name: "mode",
options: [
{ id: "classic", value: "Classic mode", icon: "rti-fit-width" },
{ id: "document", value: "Document mode", icon: "rti-fit-document" },
],
tooltip: "Layout mode",
},
style: {
view: "richtext-style-select",
name: "style",
width: 60,
source: "tag",
defaultValue: "p",
options: [
{ id: "p", value: "Paragraph", icon: "rti-paragraph" },
{ id: "h1", value: "Heading 1", icon: "rti-heading-1" },
{ id: "h2", value: "Heading 2", icon: "rti-heading-2" },
{ id: "h3", value: "Heading 3", icon: "rti-heading-3" },
{ id: "h4", value: "Heading 4", icon: "rti-heading-4" },
{ id: "h5", value: "Heading 5", icon: "rti-heading-5" },
{ id: "h6", value: "Heading 6", icon: "rti-heading-6" },
{ id: "blockquote", value: "Quote", icon: "rti-quote" },
],
groups: {
text: ["p", "h1", "h2", "h3", "h4", "h5", "h6"],
block: ["blockquote"],
},
tooltip: "Style",
},
"font-family": {
view: "richtext-select",
name: "font-family",
width: 120,
source: "fontFamily",
defaultValue: "Arial",
options: [
{ id: "Arial", value: "Arial" },
{ id: "Tahoma", value: "Tahoma" },
{ id: "Times New Roman", value: "Times" },
{ id: "Comic Sans", value: "Comic Sans" },
],
tooltip: "Font family",
},
"font-size": {
view: "richtext-select",
name: "font-size",
width: 60,
suggestWidth: 100,
source: "fontSize",
defaultValue: "14px",
options: [
{ id: "12px", value: "12" },
{ id: "14px", value: "14" },
{ id: "16px", value: "16" },
{ id: "18px", value: "18" },
{ id: "24px", value: "24" },
],
tooltip: "Font size",
},
bold: {
view: "icon",
name: "bold",
icon: "rti-bold",
source: "bold",
tooltip: "Bold",
},
italic: {
view: "icon",
name: "italic",
icon: "rti-italic",
source: "italic",
tooltip: "Italic",
},
underline: {
view: "icon",
name: "underline",
icon: "rti-underline",
source: "underline",
tooltip: "Underline",
},
strike: {
view: "icon",
name: "strike",
icon: "rti-strike",
source: "strike",
tooltip: "Strikethrough",
},
superscript: {
view: "icon",
name: "superscript",
icon: "rti-superscript",
source: "superscript",
tooltip: "Superscript",
},
subscript: {
view: "icon",
name: "subscript",
icon: "rti-subscript",
source: "subscript",
tooltip: "Subscript",
},
"text-color": {
view: "richtext-colorpicker",
name: "text-color",
width: 60,
source: "color",
topIcon: "rti-color-text",
tooltip: "Text color",
},
"background-color": {
view: "richtext-colorpicker",
name: "background-color",
width: 60,
source: "background",
topIcon: "rti-color-background",
tooltip: "Background color",
},
"paint-format": {
view: "richtext-iconselect",
name: "paint-format",
icon: "rti-paint",
tooltip: "Paint format",
popupLabel: "Continuous painting",
targetProp: "continuous",
},
"align-left": {
view: "icon",
name: "align-left",
icon: "rti-align-left",
source: "align:left",
tooltip: "Left align",
},
"align-center": {
view: "icon",
name: "align-center",
icon: "rti-align-center",
source: "align:center",
tooltip: "Center align",
},
"align-right": {
view: "icon",
name: "align-right",
icon: "rti-align-right",
source: "align:right",
tooltip: "Right align",
},
"align-justify": {
view: "icon",
name: "align-justify",
icon: "rti-align-justify",
source: "align:justify",
tooltip: "Justify",
},
"line-height": {
view: "richtext-select",
width: 60,
suggestWidth: 100,
name: "line-height",
templateIcon: "rti-line-height",
options: [
{ id: "1", value: "1" },
{ id: "1.25", value: "1.25" },
{ id: "1.5", value: "1.5" },
{ id: "2", value: "2" },
{ id: "3", value: "3" },
],
defaultValue: "1",
source: "lineHeight",
tooltip: "Line height",
},
outdent: {
view: "icon",
name: "outdent",
icon: "rti-unindent",
tooltip: "Outdent",
},
indent: {
view: "icon",
name: "indent",
icon: "rti-indent",
tooltip: "Indent",
},
link: {
view: "icon",
name: "link",
icon: "rti-link",
tooltip: "Insert link",
},
image: {
view: "icon",
name: "image",
icon: "rti-image",
tooltip: "Insert image",
},
"bulleted-list": {
view: "icon",
name: "bulleted-list",
icon: "rti-list-bulleted",
tooltip: "Bulleted list",
},
"numbered-list": {
view: "icon",
name: "numbered-list",
icon: "rti-list-numbered",
tooltip: "Numbered list",
},
clear: {
view: "icon",
name: "clear",
icon: "rti-clean",
tooltip: "Clear formatting",
},
emojis: {
view: "icon",
name: "emojis",
icon: "rti-emoticon-outline",
tooltip: "Insert emoji",
},
characters: {
view: "icon",
name: "characters",
icon: "rti-omega",
tooltip: "Insert special character",
},
};
export const buttonGroups = {
file: ["print"],
view: ["fullscreen", "mode"],
history: ["undo", "redo"],
font: [
"style",
"font-family",
"font-size",
"bold",
"italic",
"underline",
"strike",
"text-color",
"background-color",
"paint-format",
"superscript",
"subscript",
],
align: ["align-left", "align-center", "align-right", "align-justify"],
"line-height": ["line-height"],
indent: ["indent", "outdent"],
insert: ["link", "image", "emojis", "characters"],
lists: ["bulleted-list", "numbered-list"],
clear: ["clear"],
};