#TinyMCE and beyond!
ancient river
Probably good to start a thread.
The trick w/ MCE is that it is displayed in an IFrame / separate document.
As mentioned previously adding your modification CSS to CONFIG.TinyMCE.content_css.push("/path/to/your/tinymce.css"); should be active inside the MCE IFrame.
This is only inside the IFrame when the editor is active. You also need to have a default style in the non-editing state when displayed inside Foundry. Targeting .editor .editor-content. For convenience I'll just point to the styles used in FQL.
Any content from the editor potentially overrides the default appearance of .editor .editor-content.
fluid whale
ok ill give that a try
I am still learning css and the like. Where does the CONFIG.TinyMCE.content_css.push("/path/to/your/tinymce.css"); go?
ancient river
That specifically is a Foundry thing, so something you do in your code in init hook.
One thing to keep in mind especially from a system perspective is that MCE is not being kept up w/ the rest of the Foundry infrastructure. MCE by default in the underlying editor implementation does not get loaded with the new font handling system / FontConfig added in v10. It requires special handling to make MCE load the new Foundry way of handling fonts.
Also v11 throws a massive curveball for using MCE by default across editors in game systems as built into several of the UI infrastructure classes now in v11 the core team has explicitly modified the options.plugins in various activateEditor overrides to have ProseMirror plugins. This will throw off MCE / make it hard to specifically target MCE for all editors unless some code under the hood makes it so. This is something my module for instance handles explicitly.
To dig in and see examples of where the core team has hard coded dependence on ProseMirror search for plugins = in foundry.js / client code. This will be in various activateEditor overrides.
Basically MCE is being hard phased out and on v11 there are problematic aspects being hard coded at the built in UI infrastructure level.
I know that is a lot of details and there is some arcane handling required w/ v11 forward to make MCE play nice on Foundry.
One thing that could be evaluated once I officially release the "TinyMCE Everywhere!" module is perhaps integrating that w/ the system. Something like that can be explored a bit later.
For the time being MCE and into the foreseeable future has many plusses from an ease of use (for end users to devs) to features possible over the custom ProseMirror RTE attempt by core. The only thing you don't get is collaboration aspects.
fluid whale
I see.
I'll have to talk with my team on this one. May just make more sense to just move to prose for us.
ancient river
Depends on the user experience you want to provide. The PM based editor won't be up to snuff for a while (I should add IMHO here) and it will be very hard to modify w/ additional plugins and features. PM is a low level library to create customized rich text editors and not a full blown easy to use / modify RTE like TinyMCE (or other options out there). Basically the core team is creating a custom RTE and it has a lot of edge cases not implemented and a very thin layer of customization possibilities outside of digging into the innards of PM yourself which is not for the faint of heart per se.
It can make sense to evaluate things when I get the module out. The nice thing is that you'll just be able to install the module on any game system and it just works, so no need to specifically integrate things. IE you'll be able to evaluate the user experience when the module is out, etc.
I fully trick out MCE by default w/ tons of really cool options that otherwise you'd have to manually enable in code and update styles. And it comes w/ a real time settings capability for GMs to modify the experience through a GUI.
What game system BTW are you working on? I can add it to the list of ones where I provide a custom default theme that matches the styling, etc. This is color combinations of the editor itself.
fluid whale
Essence20 its an unofficial one that can't go on the repo because of licensing.
its by renegade game studios.
fluid whale
So thanks to your help i was able to get the the bar styled and cleaned up. But i can't seem to get the text here to apply the default color no matter what i do. Do i need to make a seperate css file for it?
ancient river
Yeah.. That is a tricky part. In your case this is where you need to CONFIG.TinyMCE.content_css.push("/path/to/your/tinymce.css"); for CSS that is loaded into the MCE IFrame. It should match the styles set for .editor .editor-content In this case you put that in body for the IFrame body.
In your system styles for instance:
.editor .editor-content {
font-family: "Signika", sans-serif;
font-size: 12pt;
line-height: 1.2;
color: red;
}
In the CSS file that you assign to CONFIG.TinyMCE.content_css.push("/path/to/your/tinymce.css");
body {
font-family: "Signika", sans-serif;
font-size: 12pt;
line-height: 1.2;
color: red;
}
Do note though that you'll have to test on v11. It really does look like the Foundry core team has done some hard coding at a higher level that prevents TinyMCE from being easily used broadly across an entire game system (look at the Adventure import / export and I believe . As mentioned my forthcoming module will provide all of the workarounds to allow TinyMCE to be used entirely across the platform. The reason I bring it up is that it isn't great to have some editors be TinyMCE and others be ProseMirror when it comes to user experience.
These classes have an overridden activateEditor which hard code ProseMirror plugins into the options passed to TextEditor.create: BaseSheet, AdventureExporter, DocumentSheet
DocumentSheet is the base for basically all documents. These hard coded changes will cause TinyMCE to fail in the case as a system author you want MCE across all editors.
A normal FormApplication should not fail to be able to instantiate a MCE editor, but the other editors across the core platform will be ProseMirror by default w/ hard coded plugins.
Also in any FormApplication you can override activateEditor and provide a complete set of options that gets sent to TextEditor.create.
fluid whale
The team and I discussed it and decided to migrate to prose for our description editors.