Multiple Editors with popup tools and placeholder plugin not working

[Kamelija]

I have reusable component consisting the Editor with popup tools and I am using it on multiple elements in the parent component. I am sending different content for every element but the tools and onChange are not working. Can you please tell me If I am doing something wrong ? 

[Stefan]

Hello, Kamelija,

Is it possible to share an example reproducing the issue?

This will help us understand the setup and provide a suggestion best suited for it.

Regards,
Stefan
Progress Telerik

[Kamelija]

Hello Stefan , I managed to fix this issue.

I have one more issue with the editor. My editors had defaultEditMode set to "div" but every time the view renders there was a glitch. However this is not happening If I set the edit mode to default (iframe). 

1. Can I adjust the height of the editor when using iframe to its content ? ( I tried following this example https://www.telerik.com/kendo-react-ui/components/editor/styling-content/ but it's not working and I don't want to set the height with pixels. )

2. Or do you know what might be causing the view in the app to glitch everytime I load the component with the editors (when they are set to "div" edit mode) .tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}.tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}.ws_toolbar {z-index:100000} .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px} .tb_highlight{background-color:yellow} .tb_hide {visibility:hidden} .ws_toolbar img {padding:2px;margin:0px}

[Kamelija]

Sorry for the css at the end , I have no idea how it got there :D  .tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}.tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}.ws_toolbar {z-index:100000} .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px} .tb_highlight{background-color:yellow} .tb_hide {visibility:hidden} .ws_toolbar img {padding:2px;margin:0px}

[Kamelija]

Hello Stefan, 

Can you please let me know if there are possible solutions for this ? 

 

Best regards,

Kamelija .tb_button {padding:1px;cursor:pointer;border-right: 1px solid #8b8b8b;border-left: 1px solid #FFF;border-bottom: 1px solid #fff;}.tb_button.hover {borer:2px outset #def; background-color: #f8f8f8 !important;}.ws_toolbar {z-index:100000} .ws_toolbar .ws_tb_btn {cursor:pointer;border:1px solid #555;padding:3px} .tb_highlight{background-color:yellow} .tb_hide {visibility:hidden} .ws_toolbar img {padding:2px;margin:0px}

[Stefan]

Hello, Kamelija,

I`m glad to hear that the first issue is resolved.

As for the visual glitch, could you please share a short video of it, as this helps us see how it looks and provide a suggestion of what could be causing it?

Also, the CSS was the last post as well, this is very strange, please check if you have any plug-ins or browser extensions that could be adding this.

Regards,
Stefan
Progress Telerik