How to remove a label in element and add image to same using tritium
how can i add a sprint image in place of that element
<div id="TopMenu">
<ul style="display:">
<li style="display:" class="First">My Account</li>
<li style="display:" class="CartLink">View Cart <span></span></li>
</ul>
</div>
First in your snippet there is no label element...
But remove to any element use 'remove' function.
i.e. remove('label') //this will remove all label in scope
Now you also want to add sprite image.
1. Just add your images in folder name as 'sprites'
--path-- /assets/images/sprites
2. Now it will include in sprites.png auto When Moovweb project run
3. use class 'sprites-'+imagename where you want to place.
Related
I'm using the lists plugin from tinymce.
I have made a function that will add a class to one of the li elements in the list.
If I add the class to the last element in the list, every new li element added by the editor when hitting enter will have the same class.
I've tried looking into content filtering, but there it looks like I can only prevent any li element having a class.
How can I make tinymce add new li elements without a class?
What happens now:
<ul>
<li>asd</li>
<li>asd</li>
<li class="optional">asd</li> (updated by right clicking and selecting optional)
<li class="optional">asd</li> (new elements when hitting enter)
<li class="optional">asd</li>
<li class="optional">asd</li>
</ul>
What I want
<ul>
<li>asd</li>
<li>asd</li>
<li class="optional">asd</li> (updated by right clicking and selecting optional)
<li>asd</li> (new elements when hitting enter)
<li>asd</li>
<li>asd</li>
</ul>
Thanks in advance!
There is a configuration option that tells TinyMCE to not bring styles from one root block element (<p>, <li> etc) to another: keep_styles.
The documentation is here: https://www.tiny.cloud/docs/configure/content-filtering/#keep_styles
The setting either takes true (default) or false. As an example:
keep_styles: false
If you set this to false you won't get the current list item's classes/styles brought down to the next list item.
Here is a running example: https://fiddle.tiny.cloud/dNhaab
Acutally I have two questions:
Is there any way to configure tinymce to allow only one element in the content with a specific class/attribute? For example, I need only one <div class="title"></div> element in the content, so when you edit this element and press Enter, it creates another <div class="title"/>. Rather, I want just a div with a different class (i.e. <div class="text">). Is that possible?
Is there any way to define allowed elements inside a div? For example, the only valid elements inside <div class="text"> are <br> and inline text. If you try to put a div/p/whatever inside, it will clean it out?
Thanks!
1. forced_root_block : 'div',
forced_root_block_attrs: { "class": "title"},
need to add a valid_element, valid_children and valid_class settings
https://www.tinymce.com/docs/configure/content-filtering/#valid_elements
https://www.tinymce.com/docs/configure/content-filtering/#valid_children
https://www.tinymce.com/docs/configure/content-filtering/#valid_class
I have added a custom set of buttons for adding simple grids to the editor. These have the following structure;
<div class="grid">
<div class="col-1-2"><p>Column 1</p></div>
<div class="col-1-2"><p>Column 2</p></div>
</div>
A custom CSS assigned displays the grids correctly. However as soon as the user goes to edit the text..understandably by deleting it all or highlighting and trying to replace, TinyMCE immediately removes the empty tags so if the user deletes the text Column 1 we end up with this;
<div class="grid">my new text<br />
<div class="col-1-2"><p>Column 2</p></div>
</div>
I have tried adding;
extended_valid_elements : 'div[id|class|style]'
but it had no effect.
How can I stop TinyMCE from removing these empty tags or am I going about this the wrong way..?
Thanks
I have a repeating component in wicked which needs to be added and deleted as per the user requirement. The maximum number of component is predefined. So I am adding the components at start up and hiding and showing based on need. I am required to change the arrangement of the components in the HTML markup when there is any deletion of the component. I use JavaScript for this. I want to know if wicket would lose hold of the components if I do this.
<div wicket:id="borrowerTabs" id="borrowerTabs">
<span wicket:id="borrowerTab1" id="borrowerTab1" ></span>
<span wicket:id="borrowerTab2" id="borrowerTab2" ></span>
<span wicket:id="borrowerTab3" id="borrowerTab3" ></span>
<span wicket:id="borrowerTab4" id="borrowerTab4" ></span>
<button wicket:id="addBorrower" id="addBorrower" type="button"></button>
<button wicket:id="deleteBorrower" id="deleteBorrower" onclick="updateUIForDeleteBorrower()" type="button"></button>
</div>
If delete the borrowerTab3, contents inside borrowerTab4 will be replacing the contents inside borrowerTab3 and the model objects too will be swapped though I do not do a target.add(borrowerTab3). Now while form submission, I am not getting the values of the fields inside borrowerTab3.
I'm not sure if it helps but try component.setVisible(false) in your java code to hide it.
What is the best way to select a single content element?
I have a static html template like this:
<html>
...
<div class="left clearfix">
<h1><img src="fileadmin/templates/images/ueberschrift_startseite.png" alt="Willkommen" /><span>Willkommen</span></h1>
<p>EINLEITUNGSTEXT 1 EINLEITUNGSTEXT 1</p>
<ul>
<li>LI 1</li>
<li>LI 2</li>
<li>LI 3</li>
<li>LI 4</li>
</ul>
<h3>HEADLINETEXT 3</h3>
<p>TEXT TEXT TEXT TEXT </p>
</div>
...
</html>
In my Backend I have added
A Content Element for the <h1>
A Content Element that should be displayed between the <p> Tags where now Einleitungstext1 is displayed
A Content Element that contains the LI for the UL Section
and so on.
All Elements are in the same column.
I what to take my static HTML Template and fill several SPECIFIC parts with elements that can be edited in the backend.
I hope I could explain what my problem is.
How do you configure your templates? Is there a much better way to replace only specific parts of a static template?
Regards,
Max
I assume that you know how to use marks and subparts in TypoScript, in such case what you have to do is set marks in your template, put each CE in separate column (maybe you'll need to add custom columns if all left, default, right and border (0-3) columns are used for other things) and finally just map these columns to the marks.
tip: TemplaVoila allows for more combinations as you can map not only container for CE's but also other things (header fields, image fields, TS snippets etc.)