12 votes

MySnippets for TinyMCE

This package adds a "Insert snippet or embed code" button to the TinyMCE toolbar. 

This button will allow you to insert a predefined snippet of code or any (HTML) embed code (from Youtube, Flickr, Slideshare etc.) directly into the editor. This allows the content manager to be more flexible about what to insert in the rich text editor. 

There are some manual steps to finish the installation, edit /config/tinyMceConfig.config, add the following in the  <commands> node: 

      <tinyMceCommand value="" userInterface="false" frontendCommand="mcemysnippets">mysnippets</tinyMceCommand>

And append the following in the  <plugins> node: 

    <plugin loadOnFrontend="false">mysnippets</plugin

To make the button available on the TinyMCE editor toolbar you need to enable it on the TinyMCE v3 wysiwyg datatype (ex. Developer/Data Types/Richtext editor) 

Note: confirm the priority 60 is available, you may need to change accordingly. Also, complex snippets may fall victim to code cleaners built into TinyMCE. I suggest you dig into the various settings in the config file to relax some of the restrictions, if necessary. 

Known Issues:

Depending on the markup in the snippet, TinyMCE has a tendency to strip tags.  You may want to research some of the configuration settings in the tinyMceConfig.config file.  Here's what my <customConfig> section looks like that typically works for most snippets:

    <config key="entity_encoding">raw</config>
    <config key="spellchecker_rpc_url">GoogleSpellChecker.ashx</config>
    <config key="fix_content_duplication">false</config>
    <config key="extended_valid_elements">iframe[src|style|width|height|scrolling|marginwidth|marginheight|frameborder],figure,figcaption</config>
    <config key="apply_source_formatting">true</config>
    <config key="convert_fonts_to_spans">true</config>
    <config key="convert_newlines_to_brs">false</config>
    <config key="fix_list_elements">true</config>
    <config key="fix_table_elements">true</config>
    <config key="fix_nesting">false</config>    

One more item, despite adding the language files for English (US) support, Umbraco is not loading them. This does not affect the operation of MySnippets, you simply are greeted with ugly resource placeholders.  Easiest fix is to switch back to English (UK) on your profile.


v1.0.3 - Moved and renamed mysnippets.xml to config/MySnippets.xml. Added language files for English (US).

v1.0.2 - Context menus enabled on tree & cleaner toolbar icon.

v1.0.0 - Initial Release



 Download package
version 1.0.3

Project owner

Jon Dunfee

Jon Dunfee

Jon has 468 karma points

Project Compatibility

This project is compatible with the following versions as reported by community members who have downloaded this package:
Untested or doesn't work on Umbraco as a Service
7.4.x (untested)
7.3.x (untested)
7.2.x (untested)
7.1.x (untested)
7.0.x (untested)
6.1.x (100%)
6.0.x (100%)
4.11.x (100%)
4.10.0 (100%)
4.9.1 (100%)
4.9.0 (100%)

You must login before you can report on package compatibility.

Project Information

  • Project owner: Jon Dunfee
  • Created: 06/10/2011
  • Current version 1.0.3
  • License MIT
  • Downloads: 2229
Our.umbraco.org is the community mothership for Umbraco, the open source asp.net cms. With a friendly forum for all your questions, a comprehensive documentation and a ton of packages from the community. This site is running Umbraco version 7.4.3