How change default line-height in TinyMCE v2.1?
<p><span style="line-height: 24px;"></span></p>
Head over to here: http://www.tinymce.com/forum/viewtopic.php?id=28774
I believe this is your answer!
Related
I am trying to change the paragraph font-size using handlebars
<p style="font-size:{{fs}}"> Paragraph</p>
where fs='x-small'
however this is not working.
What should I change in my code to make it working?
Thanks
x-small is not a valid value for the font-size CSS property. Instead, add set it as a class on the <p> element.
<p class="{{fs}}"></p>
Below is valid html that works in Codepen, but doesn't in a JupyterLab IPython notebook cell.
<h3 style="color: red; font-family: Helvetica; line-height: 2"> What was the first day an agent did not receive any calls? </h3>
Any suggestions on why or how to make it work?
UPDATE
I am writing the above code in a markdown cell.
There is no error message. It just doesn't color the heading red as indicated in the markdown code.
Support for inline styles was introduced in JupyterLab 0.35, relevant changlog part:
Allow safe inline CSS styles in Markdown. (#5012, #1812)
Please try upgrading to the latest stable version (0.35.4 as per today).
As the styles are passed through sanitizer, some of your styles may be removed (the authors try to be on the safe side when it comes to potential security vulnerabilities) - if this is the case, double-check that you have no typos and look up the list of allowed styles in sanitizer.ts (look for allowedStlyes) to check if the style you wish to use is allowed.
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 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 managed to get TinyMCE to keep my <script> tag in the source, so it is no longer stripped as an invalid tag. However, in edit mode, it doesn't render anything. The script tag is there in the html view, but it's just a blank line in edit mode.
Instead, I want tinyMCE to render anything instead of nothing. Even if it is just simple text like [here lies a script]. Is this possible? How? I can't get it working for the life of me. Thanks!
You can use stylesheets to style script elements, I would advise trying that in TinyMCE, here's a fiddle so you can see what I mean:
https://jsfiddle.net/plenuM/m9zr1dqw/
script {
display:block;
height:20px;
width:100%;
background:red;
text-align:center;
color:#fff;
overflow:hidden;
}
script:before {
content:"(SCRIPT)";
}
You will want to only import the CSS when TinyMCE is active though, the TinyMCE documentation can assist you with that.
The script tag should act as if on a regular html page.