Does anybody know if it’s possible to use the tinyMCE editor within a custom widget? Or even better, the monaco editor that’s being used to edit code within Create? I’ve tried various different ways of importing the components from cdns or hosting the code locally but I keep hitting a dead end. If there was some way of using either of the existing aforementioned editors within my widget (on the interface side) it would be a much cleaner solution.
Many thanks in advance
Hi @rossmorley ,
It is possible, yes - I currently use it in a few custom widgets myself. I essentially hook into the editor used in the core platform itself and then customise it from there.
I currently use this internally within Netcall, I will find out if I am able to share this with you and if so, will post instructions on how you can implement this.
Will get back to you soon 
that would be perfect, much appreciated!
Hi Ali, did you hear anything back about this?
Many thanks
Hi @rossmorley ,
Apologies for the delay in my response - I’ve been away on annual leave.
I am delighted to announce that I am allowed to share my TinyMCE implementation 
I have detailed everything you need to know below, to give you the power to configure this to your exact requirements.
In the near future, I will be:
But for now, please see below for advise on building this editor in your Code Studio components.
1. Initialise TinyMCE
Firstly, you’ll need to ensure that your TinyMCE instance is being initialised within your code component. The below code snippet is an example where I am initialising the editor on mounted - Notice I am also setting a min-height as a config, something we’ll talk more about in this guide.
You’ll notice we firstly prepare and initialise the editor (tinymce_instance), before attaching it to an element (#editor_container) in our frontend.
mounted: function () {
let SELF = this;
// Prepare initialising the editor
let tinymce_instance = class extends mats.system_module_tinymce_utilization_formatted_text {
config() {
let config = super.config();
config.min_height = 200;
return config;
}
}
// Initialise the editor against a container
new tinymce_instance($('#editor_container'), params);
}
2. Setup your container
The next step is to ensure that the frontend has been configured correctly to load the editor instance. In my below example, notice that I am using the div id editor_container which matches the mapping in the above configuration.
Important: You must have a textarea element within your container, as this is what is replaced with TinyMCE.
<div id="editor_container">
<textarea>{{ your_variable }}</textarea>
</div>
3. Configuring parameters
Now that we have a working TinyMCE editor, we can now optionally setup the parameters of the editor. These parameters will control showing/hiding specific groups of options within the editor’s toolbar - This effectively mirrors the settings within a text formatted fragment within page builder.
In the below code snippet, I have listed all parameters that can be specified, and setting true/false to show/hide toolbar options.
mounted: function () {
let SELF = this;
let tinymce_instance = class extends mats.system_module_tinymce_utilization_formatted_text {
config() {
let config = super.config();
config.min_height = 200;
return config;
}
}
// Specifying the editor's parameters to pull from the core platform
let params = {
settings: {
show_text_formatting: true,
show_text_positioning: true,
show_links: true,
show_tables: true,
show_images: true,
show_editing_aids: true
}
}
new tinymce_instance($('#editor_container'), params);
}
4. Configuring plugins
You can also configure supported plugins for TinyMCE and utilise them within your editor - This can be really handy if you want to offer extended functionality natively within your editor, such as auto-resizing the editor or word counts.
Note: We only support HugeRTE supported plugins within this TinyMCE editor, you can find a full list of supported plugins within the official HugeRTE documentation here.
In the below example, you can see I have configured my plugins and have specified a list of 3 plugins I want to use: autoresize, link and wordcount.
mounted: function () {
let SELF = this;
let tinymce_instance = class extends mats.system_module_tinymce_utilization_formatted_text {
config() {
let config = super.config();
config.min_height = 200;
// This is where I specify my supported plugins
config.plugins = (config.plugins || '') + ' autoresize link wordcount';
return config;
}
}
let params = {
settings: {
show_text_formatting: true,
show_text_positioning: true,
show_links: true,
show_tables: true,
show_images: true,
show_editing_aids: true
}
}
new tinymce_instance($('#editor_container'), params);
}
5. Configuring toolbar
You can also configure additional items within your toolbar, which pairs really nicely with plugins. Using the example code below, you may offer wordcount as a supported plugin but will want to show an option for it in your editor’s toolbar - This is how you can achieve this.
Note: Some plugins are not supported in the toolbar as they functionally apply and are not interactive (eg. autoresize). Others may already be in the toolbar due to parameters (described later in this document)
In the below code snippet, I have specified to show wordcount in my toolbar. autoresize is a functional plugin and therefore doesn’t and won’t display on the toolbar. I’ve decided not to include the link plugin, as I already have a link option enabled in my toolbar through the use of the show_links parameter - So adding the link option in my toolbar would serve as a duplicate option in my editor.
Top Tip: If you want full control over what your toolbar offers, set all parameters to false and you can then control the toolbar through the config.
mounted: function () {
let SELF = this;
let tinymce_instance = class extends mats.system_module_tinymce_utilization_formatted_text {
config() {
let config = super.config();
config.min_height = 200;
config.plugins = (config.plugins || '') + ' autoresize link wordcount';
// This is where I configure additional items in my editor's toolbar
config.toolbar = (config.toolbar || '') + ' wordcount';
return config;
}
}
let params = {
settings: {
show_text_formatting: true,
show_text_positioning: true,
show_links: true,
show_tables: true,
show_images: true,
show_editing_aids: true
}
}
new tinymce_instance($('#editor_container'), params);
}
Hope this helps
fantastic, thank you so much for sharing this! 
You’re very welcome @rossmorley
I have also now created a document for this in the Community Docs Portal here, if you ever need to reference this.
Good luck, happy hunting
Hi everyone,
Just a heads up - a slight tweak is needed in your TinyMCE code editor components if you are using them in Create 2025.1+ or are planning to upgrade soon.
The module name has been changed from tinymce to richtext and your editors will need to be tweaked for this to work.
Below is an example of this change:
let tinymce_instance = class extends mats.system_module_richtext_utilization_formatted_text {
config() {
// rest of your configuration logic
}
}
The Community Documentation has been updated to communicate this change too.
Hope this helps