cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
rexkenley
Kudo Commander
Kudo Commander

Fabric UI surface issue

Hi

 

There seems to be an issue with fabric ui surfaces. I am trying to incorporate tinyMCE into a pcf control. As shown in the screen shot, the surface doesn't seem to properly encapsulate tinyMCE. The format menu in the surface is showing up behind the surface.

 

Annotation 2020-01-18 151226.png

 

https://github.com/tinymce/tinymce-react

https://www.tiny.cloud/docs/integrations/react/

4 REPLIES 4
ben-thompson
Memorable Member
Memorable Member

Any reason why you want to use TinyMCE? 

 

A few people have got quilljs to work with react well https://pcf.gallery/d365richtexteditor/ is a good example to work from.

---
If this post has answered your question please consider it for "Accept as Solution" or if it has been helpful give it a "Thumbs Up".

Ben

 

Because it has better support when it comes to adding fonts. I have worked with quill before and it is a pain to customize.

 

The editor being used on this forum is also tinyMCE. 😁

 

 

Can you please check the CSS , looks like Z-index for the flyout need to be adjusted. There is a community tinyMCE control which can be referenced - https://pcf.gallery/tinymce-rich-text-editor/

 

hemant 

@HemantG 

 

The rich text project doesn't encapsulate tinyMCE within a fabric-ui modal surface. Other 3rd party editor projects seem to have the same issue. 

 

Also the documentation doesn't indicate that you can control the z-index.

https://www.tiny.cloud/docs/integrations/react/#tinymcereacttechnicalreference 

Helpful resources

Announcements
Ignite 2022

WHAT’S NEXT AT MICROSOFT IGNITE 2022

Explore the latest innovations, learn from product experts and partners, level up your skillset, and create connections from around the world.

Power Apps Africa Challenge 2022

Power Apps Africa Challenge

Your chance to join an engaging competition of Power Platform enthusiasts.

Users online (1,333)