I'm trying to allow some custom tags to be entered into TinyMCE. The tag is

<plug:plugin_name />

However this is turned into

<plug:plugin_name></plug:plugin_name>

I'm about to write a regex to deal with this as I have to get the job done, I'd really rather not, but it will fix my issue.

I've tried many of the init options:

extended_valid_elements : "plug.plugin_name[*]",
custom_elements: "plug.plugin_name[*]",
verify_html : false, **//This ment that the tag wasn't ouright removed**
selfclosetags : \" />\", //some plugin I found, didn't seem to work
closed : /^(br|hr|input|meta|img|link|param|area|plug:plugin_name)$/,

Anyone else definitely got this to work with a recent version of TinyMCE?

Also, another problem will be the editor will strip away the tag, after I have fixed it with the regex!

I'm trying to allow some custom tags to be entered into TinyMCE. The tag is

<plug:plugin_name />

However this is turned into

<plug:plugin_name></plug:plugin_name>

I'm about to write a regex to deal with this as I have to get the job done, I'd really rather not, but it will fix my issue.

I've tried many of the init options:

extended_valid_elements : "plug.plugin_name[*]",
custom_elements: "plug.plugin_name[*]",
verify_html : false, **//This ment that the tag wasn't ouright removed**
selfclosetags : \" />\", //some plugin I found, didn't seem to work
closed : /^(br|hr|input|meta|img|link|param|area|plug:plugin_name)$/,

Anyone else definitely got this to work with a recent version of TinyMCE?

Also, another problem will be the editor will strip away the tag, after I have fixed it with the regex!

• javascript
• tinymce
• editor
• rich-text-editor
• indexhibit

• 3.4.2 Another problem is when the editor first loads, it will remove the <plug:plugin_name /> tag as well! – Chris Barry Commented May 24, 2011 at 13:52
• hmm, as far as i know the check for valid elements (the algorithm) has changed from version 3.9.x to 3.4.x . Why do you use 3.4.x? this version is still beta. I will switch to 3.4.x if it is stable enough. – Thariama Commented May 24, 2011 at 14:12
• What kind of information is it that you need to save? Can it be done without markup or perhaps with another element? – Betamos Commented Jun 19, 2011 at 18:57
• It is to use the editor with Indexhibit, and it uses a custom tag. Will probably not be an issue in the next version of Indexhibit. – Chris Barry Commented Jul 13, 2011 at 17:05
• Does TinyMCE handle <br/> and <img/> properly? I can't tell if the closed: part is part of that "plugin [you] found" or if it is part of TinyMCE. – user7116 Commented Sep 21, 2011 at 21:27

5 Answers 5

You just need to add it to the list of short ended elements:

extended_valid_elements : "plug:plugin_name[*]",
custom_elements: "~plug:plugin_name[*]",
short_ended_elements: 'area base basefont br col frame hr img input isindex link meta param embed source wbr track plug:plugin_name'

Here's a fiddle to demonstrate.

Instead of:

closed : /^(br|hr|input|meta|img|link|param|area|plug:plugin_name)$/,

Does this work?

closed : /^(br|hr|input|meta|img|link|param|area|plug)$/,

Note the last item "plug" without the : modifier.

Have you tried this option?

valid_elements: "a,br,span,plug:plugin_name,another:tag"

1. First lets create a custom plugin for your Tinymce 4 editor.and then add a menu item for this plugin:

    tinymce.PluginManager.add('YOUR_CUSTOM_PLUGIN_NAME_HERE', function(editor, url){
              //add first menu item
       editor.addMenuItem('YOUR_MENU_ITEM1_CUSTOM_NAME_HERE', {
   
       text: 'Menu Item 1',
       context: 'YOUR_CUSTOM_DROP_DOWN_MENU_NAME', 
       onclick: function() {
          //make the magic happen when the user click this menu here...
       } });
   

   you are done creating your custom plugin and custom menu items, lets actually add it to the Tinymce 4 editor. This will be done in the tinymce.init method:

   tinymce.init({
           selector: "textarea",
           plugins: "YOUR_CUSTOM_PLUGIN_NAME_HERE",
           toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
   
       //this is how you will get your custom menu like in the above image
               menu : {
                    YOUR_CUSTOM_DROP_DOWN_MENU_NAME: {
   
                        title: 'Name it whatever you like here',
                        items: 'YOUR_MENU_ITEM1_CUSTOM_NAME_HERE YOUR_MENU_ITEM2_CUSTOM_NAME_HERE YOUR_MENU_ITEM3_CUSTOM_NAME_HERE'
                    }
                },
   
                menubar: 'YOUR_CUSTOM_DROP_DOWN_MENU_NAME' 
       });
   
       });
   

You can use encoding method as raw for any type of data.

tinyMCE.init({
   encoding : "raw"
})