Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Matt Taylor 859 posts 2052 karma points
    Oct 27, 2020 @ 12:25
    Matt Taylor
    0

    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

  • Matt Taylor 859 posts 2052 karma points
    Oct 29, 2020 @ 09:16
    Matt Taylor
    0

    This is my config...

    <tinymceConfig>
        <commands>
            <command alias="template" name="Template" mode="Insert" />
        </commands>
        <plugins>
            <plugin>paste</plugin>
            <plugin>anchor</plugin>
            <plugin>charmap</plugin>
            <plugin>table</plugin>
            <plugin>lists</plugin>
            <plugin>advlist</plugin>
            <plugin>hr</plugin>
            <plugin>autolink</plugin>
            <plugin>directionality</plugin>
            <plugin>tabfocus</plugin>
            <plugin>searchreplace</plugin>
            <plugin>fullscreen</plugin>
            <plugin>template</plugin>
        </plugins>
        <customConfig>
            <config key="templates">[{title: "Fancy List", description: "A special list", url: "tinymcetemplates/fancylist.html"}]</config>
        </customConfig>
    </tinymceConfig>
    

    The Templates button is displayed by the Richtext editor but no templates are displayed when I click it.

  • Marc Goodson 1425 posts 9578 karma points MVP 5x c-trib
    Oct 29, 2020 @ 16:37
    Marc Goodson
    100

    Hi Matt

    Try this:

    <?xml version="1.0" encoding="utf-8"?>
    <tinymceConfig>
        <commands>
            <command alias="ace" name="Source code editor" mode="Insert" />
            <command alias="removeformat" name="Remove format" mode="Selection"/>
            <command alias="undo" name="Undo" mode="Insert" />
            <command alias="redo" name="Redo" mode="Insert" />
            <command alias="cut" name="Cut" mode="Selection"/>
            <command alias="copy" name="Copy" mode="Selection"/>
            <command alias="paste" name="Paste" mode="All" />
            <command alias="styleselect" name="Style select" mode="All" />
            <command alias="bold" name="Bold" mode="Selection" />
            <command alias="italic" name="Italic" mode="Selection" />
            <command alias="underline" name="Underline" mode="Selection" />
            <command alias="strikethrough" name="Strikethrough" mode="Selection" />
            <command alias="alignleft" name="Justify left" mode="Selection" />
            <command alias="aligncenter" name="Justify center" mode="Selection" />
            <command alias="alignright" name="Justify right" mode="Selection" />
            <command alias="alignjustify" name="Justify full" mode="Selection" />
            <command alias="bullist" name="Bullet list" mode="All" />
            <command alias="numlist" name="Numbered list" mode="All" />
            <command alias="outdent" name="Decrease indent" mode="All" />
            <command alias="indent" name="Increase indent" mode="All" />
            <command alias="link" name="Insert/edit link" mode="All" />
            <command alias="unlink" name="Remove link" mode="Selection" />
            <command alias="anchor" name="Anchor" mode="Selection" />
            <command alias="umbmediapicker" name="Image" mode="Insert" />
            <command alias="umbmacro" name="Macro" mode="All" />
            <command alias="table" name="Table" mode="Insert" />
            <command alias="umbembeddialog" name="Embed" mode="Insert" />
            <command alias="hr" name="Horizontal rule" mode="Insert" />
            <command alias="subscript" name="Subscript" mode="Selection" />
            <command alias="superscript" name="Superscript" mode="Selection" />
            <command alias="charmap" name="Character map" mode="Insert" />
            <command alias="rtl" name="Right to left" mode="Selection" />
            <command alias="ltr" name="Left to right" mode="Selection" />
            <command alias="fullscreen" name="Full Screen" mode="All" />
            <command alias="template" name="Insert Template" mode="Insert" />
        </commands>
        <plugins>
            <plugin>paste</plugin>
            <plugin>anchor</plugin>
            <plugin>charmap</plugin>
            <plugin>table</plugin>
            <plugin>lists</plugin>
            <plugin>advlist</plugin>
            <plugin>hr</plugin>
            <plugin>autolink</plugin>
            <plugin>directionality</plugin>
            <plugin>tabfocus</plugin>
            <plugin>searchreplace</plugin>
            <plugin>fullscreen</plugin>
            <plugin>template</plugin>
        </plugins>
        <validElements>
            <![CDATA[+a[id|style|rel|data-id|data-udi|rev|charset|hreflang|dir|lang|tabindex|accesskey|type|name|href|target|title|class|onfocus|onblur|onclick|
    ondblclick|onmousedown|onmouseup|onmouseover|onmousemove|onmouseout|onkeypress|onkeydown|onkeyup],-strong/-b[class|style],-em/-i[class|style],
    -strike[class|style],-u[class|style],#p[id|style|dir|class|align],-ol[class|reversed|start|style|type],-ul[class|style],-li[class|style],br[class],
    img[id|dir|lang|longdesc|usemap|style|class|src|onmouseover|onmouseout|border|alt=|title|hspace|vspace|width|height|align|umbracoorgwidth|umbracoorgheight|onresize|onresizestart|onresizeend|rel|data-id],
    -sub[style|class],-sup[style|class],-blockquote[dir|style|class],-table[border=0|cellspacing|cellpadding|width|height|class|align|summary|style|dir|id|lang|bgcolor|background|bordercolor],
    -tr[id|lang|dir|class|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor],tbody[id|class],
    thead[id|class],tfoot[id|class],#td[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|bgcolor|background|bordercolor|scope],
    -th[id|lang|dir|class|colspan|rowspan|width|height|align|valign|style|scope],caption[id|lang|dir|class|style],-div[id|dir|class|align|style],
    -span[class|align|style],-pre[class|align|style],address[class|align|style],-h1[id|dir|class|align|style],-h2[id|dir|class|align|style],
    -h3[id|dir|class|align|style],-h4[id|dir|class|align|style],-h5[id|dir|class|align|style],-h6[id|style|dir|class|align|style],hr[class|style],small[class|style],
    dd[id|class|title|style|dir|lang],dl[id|class|title|style|dir|lang],dt[id|class|title|style|dir|lang],object[class|id|width|height|codebase|*],
    param[name|value|_value|class],embed[type|width|height|src|class|*],map[name|class],area[shape|coords|href|alt|target|class],bdo[class],button[class],iframe[*]]]>
        </validElements>
        <invalidElements>font</invalidElements>
    
        <!-- this area is for custom config settings that should be added during TinyMCE initialization -->
        <customConfig>
            <!--    <config key="myKey">mySetting</config>-->
            <config key="entity_encoding">raw</config>
            <config key="templates">[{"title":"Date modified example","description":"Adds a timestamp indicating the last time the document modified.","content": "&lt;h2&gt;Last Modified: &lt;time class='mdate'&gt;This will be replaced with the date modied.&lt;/time&gt;&lt;/h2&gt;"},{"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>
    
        </customConfig>
    </tinymceConfig>
    

    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": "&lt;h2&gt;Last Modified: &lt;time class='mdate'&gt;This will be replaced with the date modied.&lt;/time&gt;&lt;/h2&gt;"},{"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

    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:

       <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 &lt;and &gt; - 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:

    enter image description here

    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

  • Matt Taylor 859 posts 2052 karma points
    Oct 30, 2020 @ 11:03
    Matt Taylor
    0

    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.

    enter image description here

    I've now discovered an issue with the Template tool that I have created another thread for.

  • Marc Goodson 1425 posts 9578 karma points MVP 5x c-trib
    Oct 30, 2020 @ 11:37
    Marc Goodson
    0

    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

  • Matt Taylor 859 posts 2052 karma points
    Oct 30, 2020 @ 12:31
    Matt Taylor
    0

    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?

  • Marc Goodson 1425 posts 9578 karma points MVP 5x c-trib
    Oct 30, 2020 @ 19:33
    Marc Goodson
    0

    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

Please Sign in or register to post replies

Write your reply to:

Draft