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.
Related
Since the release of the security patches in August 2021 that prevents Cross-Site Scripting via Rich-Text Content I noticed that the output of HTML Content Elements suddenly changed in our projects. Some tag attributes and tags got removed by the newly introduced HTML Sanitizer (when the template is modified so that t3:// style TypoLinks get rendered).
So simply overriding the default Html.html Fluid Template, changing the <f:format.raw> to <f:format.html> and adding a html decoding like in the following example is no longer sufficient.
<f:section name="Main">
<f:comment> We use this to render links and other stuff in html elements </f:comment>
<f:format.htmlentitiesDecode>
<f:format.html parseFuncTSPath="lib.parseFunc">
{data.bodytext}
</f:format.html>
</f:format.htmlentitiesDecode>
</f:section>
The easiest way to prevent changes in your html codes output provided by HTML Content Elements is to disable the sanitizer globally by adding lib.parseFunc.htmlSanitize = 0 to your TypoScript config, what is not ideal.
How can I disable the parseFunc.htmlSanitize only for this purpose?
Or is there an other solution to render TypoLinks within HTML Content Elements?
Note: You don't need to disable the HTML Sanitizer if you do not override the Html.html template!
Simply make a copy of lib.parseFunc and disable the sanitizer in this copy.
lib.parseHtmlFunc < lib.parseFunc
lib.parseHtmlFunc.htmlSanitize = 0
Then use this lib in your Html.html template.
<f:section name="Main">
<f:comment> We use this to render links and other stuff in html elements </f:comment>
<f:format.htmlentitiesDecode>
<f:format.html parseFuncTSPath="lib.parseHtmlFunc">
{data.bodytext}
</f:format.html>
</f:format.htmlentitiesDecode>
</f:section>
Thanks to #OliverHader for bringing me to the right track.
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>.
Cany anybody tell me how to render the following structure in
typo3 without developing a new extension.
<div class="sidebar-details">
<div class="sidebar-details-title">
<h4><span>MY TITLE</span></h4>
</div>
<div class="sidebar-details-body">
<p>
TEXT
</p>
</div>
</div>
What would be the best/recommended way to achieve this ?
Start using gridelements.
Gives you exactly what you want.
http://typo3.org/extensions/repository/view/gridelements
You can activate the RTE html mode and put it in its source or make use of HTML element, but that's depending on your needs.
If you want to keep RTE functions for editing the text what I mentioned first is the recommended way. Have done it several times myself.
If you are using Template mapping using Templavoila so, you can create FCE(Flexible content element) for it and you can map this part.
If you are using fluid template mapping so, you can create gridelement for it. and map all part.
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?
I have a custom tag like this:
<content name="Home" />
When I click the Html button of the TinyMCE it was replaced with
<content name="Home"></content>
Currently my settings are: valid_elements: "content[name]"
What should I put in the valid_elements variable so that the tag will will be:
<content name="Home" />?
I am not perfectly sure, but i think this issue is not to be solved easily.
I do not think that you can configure this behavior because it is browser related and not tinies fault. Looks like the browser treats your custom html element like an html element with an opening and a closing part on default, even though you want to have a single part html element like a br-tag. The only way - i see - is to get the browser to accept your custom thlm elment as one part html element, which i do not know how to do.