I have got it working and just copied the whole tinymce.config file for V8 with the template plugin added in (think you've got most of this sorted already) and you have I think the configuration passed by a series of CustomConfig elements:
<config key="templates">[{"title":"Date modified example","description":"Adds a timestamp indicating the last time the document modified.","content": "<h2>Last Modified: <time class='mdate'>This will be replaced with the date modied.</time></h2>"},{"title": "Replace values example","description": "These values will be replaced when the template is inserted into the editor content.","url": "/app_plugins/tinymcetemplates/supertemplate.html"}]</config>
<config key="template_mdate_format">%m/%d/%Y : %H:%M</config>
<config key="template_replace_values">{"username": "Jack Black","staffid": "991234","inboth_username": "Famous Person","inboth_staffid": "2213"}</config>
<config key="template_preview_replace_values">{"preview_username": "Jack Black","preview_staffid": "991234","inboth_username": "Famous Person","inboth_staffid": "2213"}</config>
And you've got the custom config element for 'Templates' for the dropdown, I took the examples from the TinyMCE docs
You'll see each 'custom config' option key maps to the tinymce documentation configuration option.
but there are plenty of gotchas!
firstly need to make sure there are double quotes "" around the JSON elements, otherwise Umbraco doesn't detect it as JSON.
so I think in your example you'd need:
<config key="templates">[{"title": "Fancy List", "description": "A special list", "url": "tinymcetemplates/fancylist.html"}]</config>
Also I had issues with whitespace and carriage returns, so I think the template options may need to be specified all on one line
and more annoyingly - you can't include raw HTML when you specify the content for a template!! - so you'll see I've encoded the < and > symbols to be <and > - in one of the dropdown options - but the more saner approach is to use a separate template file, which you specify via the Url property. (see second option) as you have.
I added the file to the App_Plugins folder, I created a subfolder here called 'tinymcetemplates' and inside there added a 'template' for one of the dropdown options called supertemplate.html
and I put the following markup in the template file:
<p>Name: {$username}, StaffID: {$staffid}</p>
Which saves having to mess around escaping the html!
then I got the popup for selecting templates when I pressed the button:
Also final gotcha, any changes you make to the tinymce.config file, you'll need to restart your application for Umbraco to pick up on the changes!
That is great and it's working for me now. It was those gotchas that you worked out.
I just needed a simple ul list that I could apply classes to as TinyMce doesn't do it correctly and just adds spans but your example is a lot more powerful and will help in the future no doubt.
I've now discovered an issue with the Template tool that I have created another thread for.
Using the tinymce configuration to supply formats dropdown style elements, instead of the Umbraco backoffice way...
.. then you can specify style formats that ONLY apply to certain html elements, so you could have a css class for editors that is only applicable to the vanilla <ul> list that is inserted, without a span element being introduced.
Ah OK, I saw that before but I couldn't have interpreted it correctly.
So I can create a custom style format in the config that enables classes to be placed on html elements like ul and li rather than them getting wrapped in spans?
Yep, you can have them greyed out in the styles dropdown or indeed hide them completely unless the element you want the style to apply to is selected by the editor, it's much more intuitive for editors, and prevents things like applying an 'image-left' css class to a paragraph etc
TinyMCE Templates in Umbraco 8
Does anybody know how to create a template for the TinyMCE Rich text editor in Umbraco 8.
There are guides for v7 but 8 is different.
I've managed to get the Template button added to the RTE using https://our.umbraco.com/documentation/reference/config/tinymceconfig/
but I now need to figure how how and where to define the templates.
Thanks,
Matt
This is my config...
The Templates button is displayed by the Richtext editor but no templates are displayed when I click it.
Hi Matt
Try this:
I have got it working and just copied the whole tinymce.config file for V8 with the template plugin added in (think you've got most of this sorted already) and you have I think the configuration passed by a series of CustomConfig elements:
And you've got the custom config element for 'Templates' for the dropdown, I took the examples from the TinyMCE docs
https://www.tiny.cloud/docs/plugins/template/
You'll see each 'custom config' option key maps to the tinymce documentation configuration option.
but there are plenty of gotchas!
firstly need to make sure there are double quotes "" around the JSON elements, otherwise Umbraco doesn't detect it as JSON.
so I think in your example you'd need:
Also I had issues with whitespace and carriage returns, so I think the template options may need to be specified all on one line
and more annoyingly - you can't include raw HTML when you specify the content for a template!! - so you'll see I've encoded the < and > symbols to be
<and>- in one of the dropdown options - but the more saner approach is to use a separate template file, which you specify via the Url property. (see second option) as you have.I added the file to the App_Plugins folder, I created a subfolder here called 'tinymcetemplates' and inside there added a 'template' for one of the dropdown options called supertemplate.html
and I put the following markup in the template file:
Which saves having to mess around escaping the html!
then I got the popup for selecting templates when I pressed the button:
Also final gotcha, any changes you make to the tinymce.config file, you'll need to restart your application for Umbraco to pick up on the changes!
Hope that helps!
regards
Marc
Thanks Marc,
That is great and it's working for me now. It was those gotchas that you worked out.
I just needed a simple ul list that I could apply classes to as TinyMce doesn't do it correctly and just adds spans but your example is a lot more powerful and will help in the future no doubt.
I've now discovered an issue with the Template tool that I have created another thread for.
Great!
But also if you have a look at this bit I've added to the docs:
https://our.umbraco.com/Documentation/Reference/Config/tinyMceConfig/#style-formats
Using the tinymce configuration to supply formats dropdown style elements, instead of the Umbraco backoffice way...
.. then you can specify style formats that ONLY apply to certain html elements, so you could have a css class for editors that is only applicable to the vanilla
<ul>list that is inserted, without a span element being introduced.regards
Marc
Ah OK, I saw that before but I couldn't have interpreted it correctly.
So I can create a custom style format in the config that enables classes to be placed on html elements like ul and li rather than them getting wrapped in spans?
Yep, you can have them greyed out in the styles dropdown or indeed hide them completely unless the element you want the style to apply to is selected by the editor, it's much more intuitive for editors, and prevents things like applying an 'image-left' css class to a paragraph etc
regards
marc
is working on a reply...