Júlio Pradera
Júlio Pradera

Reputation: 482

TinyMCE not add the onClick event in the tag

I have a function that, when you click a button, the selected text inside the box TinyMCE is wrapped in a span tag.

This is done this way:
      var apolo = '<span id=\"' + tag + '_' + key + '\" class=\"apolo' + type + '\" onClick=\"myFunction(this.id)\">' + sel + '</span>';
      tinyMCE.activeEditor.execCommand('mceInsertContent', false, apolo);

The expected result is:
      <span id="org_2" class="apoloP" onClick="myFunction(this.id);">SELECTED TEXT</span>
However, the result I am getting is:
      <span id="org_2" class="apoloP">SELECTED TEXT</span>

The onClick event that calls my function, was simply ignored.

In version 3.5.8 is working, but I had to move to version 4.0b2 due to another bug that no one could solve (How to stop TinyMCE to delete the span tags?).
In the end, all I got was out of a bug to another.

Does anyone know how I do for TinyMCE not delete my text?

Upvotes: 3

Views: 5158

Answers (3)

Gediminas Šukys
Gediminas Šukys

Reputation: 7391

Could work:

tinyMCE.init({
    // other configurations...
    cleanup: false, // Disable automatic cleanup
    custom_elements: 'a[onClick]',
});

or

tinyMCE.init({
    // other configurations...
    valid_elements: '*[*]', // Allow all elements and attributes
    valid_attributes: '*[*]' // Allow all attributes
});

Upvotes: 0

mecograph
mecograph

Reputation: 702

What might help anyone who needs more information provided on this topic:

I faced the exact same issue and with some other questions/answers on stackoverflow i found, that i had to change the config/tinyMceConfig.config from:

<validElements>
<![CDATA[+a[id....-span[class|align|style],...]]>
</validElements>

to

<validElements>
<![CDATA[+a[id....-span[class|align|style|title|onclick],...]]>
</validElements>

But even though the attribute was shown in the editor - everytime the page was saved/published, somehow both title and onclick attributes where removed.

In umbraco/Js/umbraco.controller.js the following line

var extendedValidElements = "@[id|class|style],-div[id|dir|class|align|style],ins[datetime|cite],-ul[class|style],-li[class|style],span[id|class|style]";

seemed to remove everything but the defined attributes. As I changed it to

var extendedValidElements = "@[id|class|style],-div[id|dir|class|align|style],ins[datetime|cite],-ul[class|style],-li[class|style],span[id|class|style|title|onclick]";

the attributes are now still there after saving/publishing. I hope this maybe might help someone.

Upvotes: 0

Thariama
Thariama

Reputation: 50832

Check the setting valid_elements and have a closer look if onclick is added there as a valid attribute. I looks like this attribute gets stripped out because it is not registered as valid.

Upvotes: 3

Related Questions