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
Related
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.
I have a drop-down menu on my page. My goal for protractor testing is to click one of the options of this drop-down menu and have protractor check the results:
<ul class="dropdown">
<li class="nav-header">portfolio</li>
<li class="divider"></li>
<li class="dropdown-submenu"> ... </li>
<li ng-repeat="p in user.portfolios">
<!-- this is the option we will click for our testing -->
<a href ng-click="displayPortfolio(p)>Portfolio 1 </a>
</li>
<li ng-repeat="p in user.portfolios">
<a href ng-click="displayPortfolio(p)>Portfolio 2 </a>
</li>
<li ng-repeat="p in user.portfolios">
<a href ng-click="displayPortfolio(p)>Portfolio 3 </a>
</li>
</ul>
my protractor test looks something like:
it('should display relevant portfolio when clicked',function(){
ptor.ignoreSynchronization = true;
element.all(by.xpath("//a[#ng-click='displayPortfolio(p)'])).then(function(list){
list[0].click();
expect(... some assertion here);
});
ptor.ignoreSynchronization = false;
}
Just in case you were wondering, ptor.ignoreSynchronization is enabled because my web-page is constantly polling the backend for some updates.
Protractor throw the following error when I run the test:
ElementNotVisisbleError: element not visible
I don't quiet understand what this error is about. The element is surely visible since when I do view source of the page, I can see it in the DOM structure.
Kindly advice
I have handled same case by setting value directly. locate the element and set the value using "sendKeys".
Try the same for your scenario.
Have you tried using the repeater locator?
it('should display relevant portfolio when clicked',function(){
var elements = element.all(by.repeater('p in user.portfolios'));
elements.get(0).click().then(function(){
expect(... some assertion here);
});
}
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.)
I have a text box that I have turned on HTML rendering for. This is the text it should render (formatting added for readability)
<P>This is the Description Field.</P>
<OL>
<LI>First List Item</LI>
<LI>Second List Item</LI>
<LI>Last List Item</LI>
</OL>
<P>Not in the list</P>
I am expecting to see something like this in my report:
This is the Description Field.
1. First List Item
2. Second List Item
3. Last List Item
Not in the list<\pre>
But I am getting this:
This is the Description Field.
First List Item
Second List Item
Last List Item
Not in the list
The docs say that <LI> and <OL> and <P> are supported... What am I doing wrong?
Turns out you can only have the one placeholder in your text box for the HTML to render correctly.
I had two placeholders in the textbox. One to say "Description: " and one to show the description. When I removed the first it started working.
I was creating a tree using UL LI list and jQuery. I used a jQuery Selector
jQuery(li:has(ul)) to find all the list nodes having childs and then added a click event to it.
jQuery(li:has(ul)).click(function(event) {
jQuery(this).children.toggle();
jQuery(this).css("cursor","hand");
});
This works for me except i dont understand why i get a cursor hand and click event triggering even when i take mouse pointer to childs of my selected li
<li> Parent // it works here that is fine
<ul>
<li> child1 // it works here i dont understand need explanation
</li>
<li> child2 // it works here i dont understand need explanation
</li>
</ul>
</li>
What you are seeing is event bubbling. When you click on a descendant element, the event also bubbles up to its ancestors. Your click handler on the ancestor element is what is being triggered. If you don't want this, you'll need to also stop event propagation in the click handlers of the child elements to prevent the event from bubbling up.
jQuery(li:has(ul)).children().find('li').click(function(e) {
e.stopPropagation();
});
The cursor property and the click event are inherited by the element's children.
To prevent the cursor property from being inherited, you can add a CSS rule that explicitly sets the cursor for <ul> and <li> elements, like this:
ul, li {
cursor: default;
}
To prevent the click event from firing for the children, you can check event.target, like this:
if (event.target !== this) return;
yea try
jQuery('ul',this).css("cursor","hand !important"); .// to tell it to apply the cursor to the ul elements with "this" i.e the original li element