TinyMCE draggable templates - drag-and-drop

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?

Related

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

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.

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.

Rich Text component in AEM 6.3 touch ui

I knew about xtype richtext for classic ui.
I am working more on touch ui these days and would like to have a rich text component in cq:dialog touch dialog.
Could anyone point me to an example with explanation about the rich text component in aem 6.3 touch ui?
I was looking at the example I do not understand rtePlugins node in _cq_editConfig.xml and I assume basic richtext functionality is provided by _cq_dialog content.xml
What is the different between example2
and example
Thanks.
The rtePlugins node lists configurations for enabled plugins in the RTE. You can use either examples you have in your post to achieve the rich text functionality you are after.
If you are interested in a different form of RTE, checkout this CKEditor widget I built a while back: https://github.com/ahmed-musallam/aem-ckeditor-widget

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?

Custom stylesheet in GWT RichTextEditor

is there a way to force the GWT's RichTextEditor to use custom stylesheet for the edited text?
From what i have seen, it uses an iframe to render the text, so the host documen's styles are ignored.
That's currently not possible (there's an open issue about it).
As a workaround you could manually add your style definitions to the head element of the iframe document. See here for an example.