I am using style_formats to apply specific styles like classes to selected texts inside the editor. These styles for example change the size of the font.
This works fine however when I change the line to a numlist or a bullet list it loses the classes and the wrapper around it.
For example this is before I apply a list:
<div class="text-auto"><span class="text-xl">Text message</span><br></div>
When selecting numlist or bullet list it turns into :
<div class="text-auto"><ul><li>Text message<br></li></ul></div>
As you can see the span with class text-xl is lost.
Is there a way I can make sure that the span gets transfered to the LI with the class applied? If not, perhaps get the class from the span applied to the LI in question.
Related
I am using ZK framework. I have a static line of text in a label:
<label
value="If you have already submitted a leave application or need to modify
an existing leave, do not submit an online application. " />
I need to underline only some parts of this sentence. I've tried putting <u> </u> around the text I wish to underline, but this is not allowed in ZK.
I've also tried creating separate labels, with style="text-decoration: underline;" which does underline the specified text. However this way of underlining makes each label display on it's own line.
Is there some way that I can underline only certain parts of my label?
There is no way you could append style to certain parts of a label.
Like #Link already commented you could use multiple labels and set the sclass different of each label.
If you have real HTML in your text, you could use the following :
HtmlNativeComponent n = new HtmlNativeComponent("html", "<h2>title</h2>","<p>your text</p>");
Explication of constructor :
"html" => the element where all your text is between. (wrapper element)
"<h2>title</h2>" => the first part. If you append more children to the native component, its after this they will come.
"<p>your text</p>" => the second part. If you append more children to the native component, its before this they will come.
I want to be able to remove classes from an element within the WYSIWYG editor provided by TinyMCE. I've spent some time looking around for something and haven't had any success. I've already written 4 or 5 plugins to handle different needs, but this seems to be such a basic utility, it must exist and would prefer not to have to write another plugin.
A sample use would be a paragraph that has been assigned a class using the dropdown class selector. I can continue to add classes to the paragraph element, but I can't replace them or remove them. I would like to be able to select an element in the editor and click a button to remove all assigned classes - and I want to be able to confine the function to that element node, not the entire contents (as the Remove Formatting plugin does).
<h4>Here is my headline</h4>
I use the Styles dropdown to add the class .all-caps
<h4 class="all-caps">Here is my headline</h4>
I decide I want that to use the .inverse class instead, so I select from the dropdown and end up with this:
<h4 class="all-caps inverse">Here is my headline</h4>
What I want is this:
<h4 class="inverse">Here is my headline</h4>
A plugin that will either allow me to reassign or remove classes from elements is what I need. Does anyone know of one out there?
I need a custom styling for different elements (ul li, ol li, tables, links etc.) that are added through Typo3 RTE.
Thus I want to configure the RTE so every time some content is added through RTE it is outputted in the front-end with a wrapping div e.g. <div class="added_through_rte"></div>.
Is there a way to do it?
Put this in yout TypoScript setup
tt_content.text.20.wrap = <div class="added_through_rte"> | </div>
This wraps all content from the field "text" of the table tt_content.
If you use RTE in other records, you will have to configure each one in a simmilar way.
On the other hand, you can define custom CSS classes for the most elements (ul, ol, links, headers, paragraphs etc.) managed by a RTE. This is a lot more configure work but more flexibel, so you can have many different list classes to chose from etc. This is quite a huge topic and lot to research.
I'm working on a site in EPiServer, and whenever I create a page property with the type set to "XHTML string" (which uses the WYSIWYG content editor in Edit mode), it wraps all content in <p> tags.
Is there any way to prevent this from happening? I can't remove the paragraph margins universally through my CSS (e.g. p {margin: 0 !important;}) since I do need the margins for actual paragraphs of text. I've even tried going to the HTML source view in the editor and manually deleting the <p> tags that it generates, but it immediately adds them back in when I save!
It doesn't happen when the property type is either a long or short string, but that's not always an option since the content might contain images, dynamic controls, etc.
This is becoming a real nuisance since it's very hard to achieve the layout I need when basically every element on the page has extra margins applied to it.
As Johan is saying, they are there for a reason - see more info here. That being said, it's not impossible to remove them. It can be done in one of two ways (taken from world.episerver.com:
protected override void OnLoad(EventArgs e)
{
base.OnLoad(e);
myEditor.InitOptions["force_p_newlines"] = "false";
}
or
<script type="text/javascript">
tinyMCE.init({
force_p_newlines: false
});
</script>
You can add your own custom TinyMCE-config that removes P-elements or strip them out using regular expressions either when saving the page or when rendering the property/page.
I think it's a bad idea though. P-elements are what the editors generate the most and in most cases their content is also semantically correct. Better to wrap your property in a div with a class and adjust margins using CSS like you mention.
If you're using a version of EPiServer with TinyMCE editors, you can insert <br /> elements instead of <p> elements if you type shift-enter instead of enter. This should eliminate your margin problems.
More info at the link below:
http://www.tinymce.com/wiki.php/TinyMCE_FAQ#TinyMCE_produce_P_elements_on_enter.2Freturn_instead_of_BR_elements.3F
EDIT: My comment below answers his question better.
I discovered that while I can't remove the <p> tags from the source view (because it adds them back in automatically), if I replace them with <div> tags, it'll leave things alone. It does mean that I've got an extra <div> wrapping some elements that I don't really need, but at least a <div> doesn't add margins like a <p> does, so...good enough!
As i use styleselect combobox, i am able to apply many classes to one object simply by chosing each style from styleselect combobox, and I can turn off class only by chosing same class again. so all styles work like "checkboxes", and i wish to make from them "radiobuttons", i want mine tinymce to apply max 1 class to object, if parent has class, then split parent and aply class, for example
Some text here (i select "text" and set my_class2) and i wish to get result:
Some text here
and 2nd case, if i select all "Some text here" and aply my_class2 i wish to get result:
Some text here
(now result will be: Some text here
I hope it's clear now ;)
Best regards!
You might, if you don't mind meddling in their code. using the formatselect option, check out theme_advanced_blockformats in editor_template_src.js and add your tags with 'class=moshe' in them.. there could be only one tag (it replaces them), so you got your radio buttons :)
There is no standard way to insert checkboxes inside the tinymce UI. You should be able to make it work using checkboxes outside the editor and link to the function the style plugin uses.