Is there any way to turn off all auto replacements in TINYMCE ?
Its replacing my <b> tags to <strong> and a
full url such as <a href="http://example.com" is getting turned into <a href="../example.com"
and so on.
I tried to use those 3:
extended_valid_elements : '*[*]',
cleanup : false,
verify_html : false
No luck so far.
If you want <b> and <i> tags instead of <strong> and <em> you can use this setting in your TinyMCE configuration:
extended_valid_elements: "b/strong,i/em", //force strong-->b and em-->i
TinyMCE also has a variety of options for managing URLs:
https://www.tiny.cloud/docs/configure/url-handling/
You should look at those options to see how they can help address your URL issue.
Related
I've been trying to force TinyMCE to not delete my a tags with every setting that is available and have had no luck (also looked at 20+ posts here - most being over a decade old and no working solutions). I'm just going to post what I try to put into the editor and what it removes (along with every setting I've tried).
What the markup should look like:
<a href="#" class="hearmorelink" onclick="window.open('/Mini-Lots-audio.html', 'Voice Over', 'width=320,height=1,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=no');return false;">
<div>Want to hear more?<span style="margin-top: 60px;">CLICK HERE</span></div>
</a>
what tinyMCE does to it:
<div>Want to hear more?<span style="margin-top: 60px;">CLICK HERE</span></div>
Maybe not the prettiest HTML ever, but why does it disallow wrapping anything inside an A tag when it's perfectly acceptable HTML5 as per the RFC?
apply_source_formatting: false,
verify_html: false,
trim_span_elements: false,
cleanup: false,
convert_urls: false,
cleanup_on_startup: false,
force_br_newlines: true,
force_p_newlines: false,
allow_script_urls: true,
forced_root_block: false,
valid_elements: '+*[*]',
plugins: [
"advlist autolink autoresize directionality lists link image charmap preview anchor",
"searchreplace visualblocks code fullscreen textcolor",
"insertdatetime media table contextmenu paste"
],
All the settings seem to be working, but this problem still persists. Because this is needed for 50 or so pages and the HTML is stored and retrieved from a database, I can't hard-code anything in (also - non-HTML people/admins need to use this too).
I am not sure how I can make this work (and, yes, it MUST be a popup so the audio can play while people visit from page to page). Would a plugin help here?
okay - after doing a few more tweaks, I've found that TinyMCE is stuck in HTML4 (which does not allow block elements inside A tags). HTML5 supports DIV tags inside A tags.
I'll just change the markup and tweak the span tag to display like a block with CSS.
I use Composite C1 CMS, but the custom TinyMCE in it is so crazy. Simple issue: we'd like to use Font Awesome icons. Source code editing is OK.
If we add the following:
<i class="fa fa-bus"></i>
This is removed. OK then, add a space:
<i class="fa fa-bus"> </i>
i is converted to em.
If I change valid_elements in config in the file visualeditor.js, nothing happens, still the same problem.
Are there any solution for this issue? Anyway it would be nice to add a button to the toolbar 'add icon'.
TinyMCE will remove empty elements by default, so you add a between your tags to tell the TinyMCE it's not empty. Also <i> used to be Italic in older versions of HTML so it's trying to convert an old italic tag into a preferred <em> Emphasis tag. Really though, you can use any tag with Font Awesome so to fix this issue, just change your <i> to a <span>:
<span class="fa fa-bus"> </span>
The accepted answer uses , but this will create a gap next to your icon causing it to be slightly offset. A better alternative is to use a comment:
<i class="fa fa-bus"><!-- icon --></i>
Now TinyMCE won't cleanup the "empty" element and you won't have a gap, but it will still convert your <i> to <em>. To prevent this, add the following to your TinyMCE init:
tinymce.init({
// ...
extended_valid_elements: 'i[class]'
});
TinyMCE Icon Fonts Plugin
The icon font dilemma has been a problem for years, so I finally wrote a plugin to solve it with minimal effort. The plugin:
Prevents TinyMCE from converting icons into elements
Prevents TinyMCE from removing empty icons
Makes icons selectable so you can copy/paste/delete them easier
Let's you configure the CSS selector used to identify icons font elements
If you don't want to use the plugin, feel free to dive into the source to see exactly what's going on under the hood.
Cheers!
I know it's an old question but I want to add my two cents here.
As we all know, TinyMce strips out <i></i> so we have to find a way to bypass this problem.
A fast way I use in such cases is to replace <i></i> with <span></span> as Howdy_McGee mentioned before me.
So, to summarize, in your example instead of using:
<i class="fa fa-bus"></i>
you can just use:
<span class="fa fa-bus"> </span>.
I'm using TinMCE to edit site content and need to add a custom piece of HTML via a button using TinyMCE plugin so when i click the button the following content gets added:
<div class="custom">
<a class="header">title</a>
<a class="delete">delete</a>
<p>Some text</p>
</div>
This is all working however I want to add a link so when I click delete the div gets removed from the TinyMCE content.
Is it possible?
Thanks
If you are using tinyMCE 4.X, it can be done using the <> source code editor option under tools. when you open it, you will see the html source code for what you have entered in the tinyMC editor.
<div class="custom">
<a class="header">title</a>
<a class="delete" onclick="this.parentNode.remove();">delete</a>
<p>Some text</p>
</div>
just make sure you have added anchor's onclick as extended_valid_elements
e.g.
tinymce.init({
...
extended_valid_elements : "a[onclick]"
... });
for more.... check this out :
http://www.tinymce.com/wiki.php/Configuration:extended_valid_elements
I'm using TinyMCE editor in my project and I would like to make it ignore the tag <--image-->.
Now, if I write this tag, it replaces it with <p> </p>
Is it possible to do this?
Yes, you will have to add this tag to your valid tinymce tags.
Have acloser look at the tinymce paramter valid_elements and valid_children.
I need to allow add a div with a class attribute in tinyMCE in Umbraco. I can add a div, but all content in the div is just text. I need that text has a paragraph, and finally add a class attribute for the div.
It's a little hard to understand what you are asking, but I think this should help.
http://our.umbraco.org/wiki/recommendations/recommended-reading-for-content-editors/adding-styles-to-the-tinymce
You can basically associate a stylesheet with the tinyMCE and then add styles to it that will appear in the style dropdown
You may use
tinymce.activeEditor.execCommand('insertHTML', false, '<div class="section'></div>');
This will insert the specified html into the editor at the local caret position.
Be aware that your valid_elements and valid_children configuration settings won't strip out anything from the html that you insert.
If you can paste your template code then we can be more of a help to you.
What you want to do is wrap your <umbraco:Item field="aliasOfYourRTE" runat="server" />
with the div you want so in your case your code will look like this:
<div class="YOURCLASSNAMEHERE">
<umbraco:Item field="bodyText" runat="server" />
</div>
The umbraco RTE automatically spits out <p> </p> tags when content is inserted. Also, make sure you are publishing your node so that your content is viewable on the front end.
Hope this helps.
Go to Settings - Styles.
Open the stylesheet with the styles for the Format dropdown of TinyMCE in Data Type Richtexteditor.
Add a style with the Alias div.class, e.g. div.alert alert-danger.
If you then click in TinyMCE on a paragraph and then choose in the Format dropdown this style the paragraph is formatted as follows:
<div class="alert alert-danger"> ... </div>
Is this what you wished to do?