Color Picker for Font/Background color not working
Hi,
I have been using the RichTextEditor component, everything seems to function, barring the color (font and background) buttons.
The font and size dropdowns, bold, italics etc. all work, apart from the font color and background color buttons:
I am using the RichTextEditor in a very standard way:
private rteToolbarSettings: any = { items: ["FontName", "FontSize", "FontColor", 'BackgroundColor', "|", "Bold", "Italic", "Underline", "StrikeThrough", "|", "UnorderedList", "OrderedList", "Indent", "Outdent", "Alignments", "CreateLink", "Image", "|", "ClearFormat", "Undo", "Redo"] };
private RTE!: RichTextEditorComponent;
........
I believe I have the latest versions of all the syncfusion npm packages I have installed (I am using some of the other components too)
results from "npm list"
├── @syncfusion/[email protected]
├── @syncfusion/[email protected]
├── @syncfusion/[email protected]
├── @syncfusion/[email protected]
├── @syncfusion/[email protected]
It is also causing my whole app to break when the component is destroyed (i.e. i navigate to a different screen within the app) - I just see a text field with a hex code in it (it replaces everything on screen)
If i take the Font/Background colour items out of the toolbar, it all works fine...
I see following browser developer console errors:
toolbar-renderer.js?608c:274 Uncaught TypeError: Cannot read properties of null (reading 'parentElement')
at ToolbarRenderer.paletteSelection (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-richtexteditor/src/rich-text-editor/renderer/toolbar-renderer.js (main.js:10403:1), <anonymous>:325:120)
at DropDownButton.beforeOpen (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-richtexteditor/src/rich-text-editor/renderer/toolbar-renderer.js (main.js:10403:1), <anonymous>:377:15)
at Observer.notify (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-base/src/observer.js (main.js:2093:1), <anonymous>:132:21)
at Base.trigger (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-base/src/base.js (main.js:1841:1), <anonymous>:233:37)
at DropDownButton.openPopUp (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-splitbuttons/src/drop-down-button/drop-down-button.js (main.js:10558:1), <anonymous>:695:10)
at DropDownButton.clickHandler (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-splitbuttons/src/drop-down-button/drop-down-button.js (main.js:10558:1), <anonymous>:619:16)
ToolbarRenderer.paletteSelection @ toolbar-renderer.js?608c:274
beforeOpen @ toolbar-renderer.js?608c:318
Observer.notify @ observer.js?7a95:101
Base.trigger @ base.js?fcb5:190
DropDownButton.openPopUp @ drop-down-button.js?429f:542
DropDownButton.clickHandler @ drop-down-button.js?429f:478
18Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('<URL>') does not match the recipient window's origin ('<URL>').
carousel.list.remote.tsx?a70f:57 render
color-picker.js?fc5e:1389 Uncaught TypeError: Cannot read properties of null (reading 'insertBefore')
at ColorPicker.destroy (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-inputs/src/color-picker/color-picker.js (main.js:6034:1), <anonymous>:1815:29)
at ColorPickerInput.destroyColorPicker (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-richtexteditor/src/rich-text-editor/actions/color-picker.js (main.js:9851:1), <anonymous>:153:34)
at Observer.notify (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-base/src/observer.js (main.js:2093:1), <anonymous>:132:21)
at Component.notify (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-base/src/component.js (main.js:1877:1), <anonymous>:344:26)
at Toolbar.destroyToolbar (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-richtexteditor/src/rich-text-editor/actions/toolbar.js (main.js:10055:1), <anonymous>:546:19)
at Toolbar.destroy (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-richtexteditor/src/rich-text-editor/actions/toolbar.js (main.js:10055:1), <anonymous>:573:12)
at Observer.notify (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-base/src/observer.js (main.js:2093:1), <anonymous>:132:21)
at Component.notify (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-base/src/component.js (main.js:1877:1), <anonymous>:344:26)
at RichTextEditor.destroy (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-richtexteditor/src/rich-text-editor/base/rich-text-editor.js (main.js:10139:1), <anonymous>:1120:10)
at ComponentBase.componentWillUnmount (eval at ../../../VSAP UI Toolkit/node_modules/@syncfusion/ej2-react-base/src/component-base.js (main.js:8789:1), <anonymous>:528:12)
Here is a full list of npm packages I have installed:
├── @emotion/[email protected]
├── @mdi/[email protected]
├── @sentry/[email protected]
├── @syncfusion/[email protected]
├── @syncfusion/[email protected]
├── @syncfusion/[email protected]
├── @syncfusion/[email protected]
├── @syncfusion/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
├── @types/[email protected]
Please help!
