How to inject custom html specifications such as css, images, scripts in TinyMCE editor - tinymce

I want to apply custom css, images and scripts within tineyMCE editor. Each template i build will have its own custom styles. can you please suggest better approached solution.
thanks in advance.

Related

CSS modules using Create-React-App + Material UI combo

I am having trouble understanding the docs given on the material UI site, for overriding the css styles when using css modules. If there is conflicting styles, i need to use the !important hack to overwrite their styles.
I have tried to follow their suggestion of
css injection order
so that my custom css (using css modules) comes after the material UI css.
The link I have tried to follow is
https://material-ui.com/customization/css-in-js/#css-injection-order
If anyone is able to give me a simple step my step solution of how to do this with a component or a solution using codesandbox it would be very helpful.
Thank you and have a nice day.

TinyMCE draggable templates

I am using TinyMCE version 4.
I also have a couple of html templates defined in my web project.
Now, I would like to make those templates draggable within textarea, so I would like to keep the style of the template and be able to move drag-and-drop/move it.
Does anybody know if it is achievable by using TinyMCE component?

Custom snippets / reusable components in divshot

Will it be possible to add our own HTML snippets / component to reuse from the components list? At the moment i use divshot to create my basic bootstrap layout. afterwards i insert a couple of child divs and html to the layout manually (these snippets also use custom css). Would be great if we could define our own snippets / components within divshot. :)
Great suggestion! We do plan on offering custom HTML components and snippets eventually. In the meantime you'll need to continue using the HTML source editor.

Custom formats using CSS stylesheet

I know I can link a style sheet to TinyMCE and this will be used when I am editing. It also seems to apply the styling to the Heading options available in the format dropdown list which is great. I also know I can add custom formats menu using custom_formats (here) but is there a way for the Formats to be populated using my CSS automatically? I have various classes in my CSS for the P tag and would like to allow my users to utilise them.
No, this is not possible (at least not out of the box).
How could a piece of code guess what style or class to use from the pure CSS?

Help with / Tutorial for Styling for GWT Beginners

I am new to GWT and am having a hard time finding any good tutorials focused especially on teaching styling with GWT. The few examples I've found provided by Google are rather paltry, and don't really explain much.
Some things I'm trying to do would be:
Change the global font style
Change existing widgets' styling, such as the background color of a
selected item in a CellTree
Replace a button's text with an image instead
Remove borders of text fields
the list goes on
I've been searching and searching, and am not finding anything particularly helpful with styling, so any advice/direction would be greatly appreciated! Thank you!
Styling in GWT is done almost entirely with CSS. You can link an ordinary CSS file to your host html, as you would with a normal website, and its rules will apply just as normal CSS does with normal HTML. GWT provides a couple of ways to optimize your CSS, and that gets pretty complicated, but at a basic level you can just use Firebug to look at the HTML of your app, figure out what CSS you need from that, and throw it in your css file. GWT applies many special styles to the widgets that come built-in, and you can learn all of those style names from the generated HTML and the documentation.