I'm trying to use CKEditor for a project and I found the need for bookmarks. The documentation says that the intrusive way to create bookmarks add span elements in the source. This is just fine with me and that is exactly what I would want it to do.
However, I can see in the source that the span elements are wrapped in p elements.
<p><span id="cke_bm_147S" style="display: none;"> </span> </p>
This creates problems for me with the way the text is displayed and mainly when trying to navigate the document.
I didn't find anything that even mentions the creation of these p elements. Could I have set something wrong? Is there a way to prevent these to be created?
Thank you
The span bookmark is an inline element so it cannot be the root element of the content. It is wrapped in a block element (which is by default a paragraph).
This behaviour depends on editor enterMode. If it is a default one - ENTER_P - you will have a p element as a wrapper. For ENTER_DIV you will have a div element. And for ENTER_BR there will be no wrapper which means it is the effect you would like to achieve.
Check this codepen for demo.
Please keep in mind that enterMode other that ENTER_P is not recommended due to some caveats. So maybe in your case it will be better to reconsider some different solutions instead of changing enterMode.
Related
I'm trying to click on "Mr" from the drop down list I've tried a combination of things but non of them seem to work.
I've even tried xpath which is usually reliable but for this case its failing.
$browser.element(:xpath, "/html/body/div[1]/div[1]/div[1]/div/div[2]/div[1]/div[2]/div/div[2]/div/div[2]/div[2]/form/div[2]/div/div[2]/div/div/div/div/div/ul/li[2]/a").click
The XPath suggested by Saurabh Gaur, can be written in a more readable Watir-like fashion using:
$browser.ul(class: 'dropdown-menu').link(text: 'Mr').click
Note that this assumes that there is only one ul element with class dropdown-menu. If there are multiple, you will need to scope the search to the specific dropdown using an element that likely exists higher in the DOM.
However, given there is likely only one link with text "Mr", you can probably get away with simply:
$browser.link(text: 'Mr').click
Given the link is a dialog that switches from hidden to visible, you may need to also wait:
$browser.link(text: 'Mr').when_present.click
Your xPath is positional which depends on element position.. it will not work if elements are change their position means adding some elements after some action on the page.
After seeing your attached image I have generated following xPath as below :-
//ul[contains(#class, 'dropdown-menu')]/descendant::span[contains(.,'Mr')]/parent::a
Try with this xPath.. May be it will work...:)
I have a CKEditor widget resembling a tab-module.
As editables I have defined a span.title and div.content.
When I am in editing mode inside a span.title and then paste something using CTRL+V, the span gets broken and I have two spans. As if it gets divided on whatever position I paste.
When I am in editing mode inside a div.content and then paste something using CTRL+V, the contents of the clipboard are correctly inserted into that div.
Is it because span is an inline-element and div is a block-element and CKEditor doesnt allow pasting into inline-elements?
Can I somehow change this behaviour?
CKEditor allows pasting of block and inline elements (keep in mind that content filtering (ACF) can be used which also affects pasting) so it is probably not the issue in this case.
I would also make sure that the content which you are trying to paste does not contain any HTML which may cause the behavior you described.
If you could provide widget HTML/template or code which you are using I will be glad to investigate this issue in more depth.
I had this issue when trying to have a <cite> element as an editable. Trick was to tweak the CKEDITOR.dtd properties.
// This prevents the pasting from splitting parent element.
delete CKEDITOR.dtd.$removeEmpty.cite;
// This tells the editor to allow editing in this element.
CKEDITOR.dtd.$editable.cite = 1;
I imagine this would affect the behavior of all <cite> elements in any editor currently loaded. Not ideal in all cases for most elements, but for our requirements for a blockquote/pullquote widget, the <cite> element is only allowed inside our <blockquote> elements in any editor.
CSS Selectors are parsed right to left, and then displayed.
With this in mind, based on this code:
<a href="#" class="myImage">
<img>
</a>
Which is more performant?:
.myImage img
or
.myImage img:only-child
Does :only-child help specificity in selector selection? So instead of initially matching all <img> in the document then looking for the parent class, does it only match <img>'s that are the only child (thereby reducing the pool of selections)?
reference read: http://csswizardry.com/2011/09/writing-efficient-css-selectors/
EDIT
Found further reading:
The sad truth about CSS3 selectors is that they really shouldn’t be
used at all if you care about page performance. Decorating your markup
with classes and ids and matching purely on those while avoiding all
uses of sibling, descendant and child selectors will actually make a
page perform significantly better in all browsers.
-David Hyatt (architect for Safari and WebKit, also worked on Mozilla, Camino, and Firefox)
Source: http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
Alright, so this depends completely on the use case. What I'm going to do is handle cases.
Point 1 - Concerning given example
Case A
Say your code is simply:
<a href="#" class="myImage">
<img>
</a>
In this case .myImage img and .myImage img:only-child will have essentially identical performance hits. Reason being is as follows:
CSS performance hits are derived from having to style or re-style boxes. What CSS does is affect your graphics processor, not the CPU, so we only care about visual updates. And styling things again with duplicate properties DOES cause a redraw (By this I mean duplicate properties that are applied at a later time, which selectors generally cause).
Usually, .myImage img would style ALL <img>s in .myImage. While using the only-child selector may not style all (obviously).
But in this example, both .myImage img and .myImage img:only-child would do identical things, since they would both cause 1 draw/redraw on the same box.
Case B
But suppose we have:
<a href="#" class="myImage">
<img>
<img>
</a>
Here though, we have a different story.
In this example, only-child wouldn't work at all, since <img> is not the only child.
Case C
Finally, suppose you have this, but you only want to style the under the :
<a href="#" class="myImage">
<img>
</a>
<div class="myImage>
<img>
<img>
</div>
In this case, using the only-child selector would be significantly better performance-wise, since you only will style one element, instead of three.
Conclusion and Takeaway
Basically, remember a few things.
CSS selectors help you with writing code because you get to add less IDs and Classes, however, they are almost always less efficient than using all IDs and Classes, because using selectors will causes extra redraws. (Since you'll inevitably style multiple elements with some selector, and then re-style other things with IDs or classes, causing unnecessary redraws)
only-child is NOT faster than .class child if that .class only has one child.
Technically what you are comparing are two completely different things, used for different purposes.
Conclusion
In final answer to your question. In your shown example, neither is more efficient than the other since they cause identical redraws.
However, as
"Does :only-child help specificity in selector selection?"
goes: Yes, that's the point of the selector. See: http://www.w3schools.com/cssref/sel_only-child.asp
Sources:
I am a significant volunteer developer for Mozilla Thunderbird and the Mozilla project and work in the CSS area.
FYI
There are of course weird exceptions to this, but I won't go over them here since I think your exact question doesn't give a brilliant example.
Point 2 - Concerning speed of find selectors
I am purposely trying to drive home the point that it is the drawing the causes the CSS perf hit, not finding the selectors. However, the reason I say this is not because finding selectors takes no time, but instead because it's time is miniscule to the time caused by drawing. That said, if you did have 5,000 <div>s or something, and attempted to style a few using pseudo selectors, it would definitely a little longer than using CSS classes and IDs.
Again though, in your example it would make no difference, since it would look through each element anyway. Why only-child is helpful perf-wise is because it would stop searching for some element after it finds more than one child, whereas simply doing class child would not.
The problem with pseudo selectors is that they usually require a lot of extra searching AND it happens after IDs, classes, and such.
The links you provided are actually very helpful and I'm surprised they didn't answer your question.
One thing I should point out is that many selectors believed to be slow may be vastly improved now. See: http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/
Remember selector performance is only important on very large websites.
I am trying to use xpath within selenium to select a div element that is within a td.
What I am really trying to do is determine the class of the div and if it is either classed LOGO1, LOGO2, LOGO3 and so on. Originally I was going to just snag the image:url to determine with logo.jpg was used but whoever made the target website used one image for each logo type and used css to determine which portion of the image will be displayed. So Imagine 4 images on one sprite image. This is the reason why I have to determine the class of the div instead of digging through the css paths.
In selenium I am using storeElementPresent | /html/body/form/center/table/tbody/tr/td[2]/div[3]/div[2]/fieldset/table/tbody/tr[2]/td/div/table/tbody/tr[${i}]/td[8]/div//class | cardLogo .
The div has multiple classes so I am thinking that this is the issue, but any help is appreciated. Below is the target source. This is source from within the table in the tbody. Selenium has no problems identifying all the way up to td[8] but then fails to gather the div. Please help!
<td class="togglehidefields" style="width:80px;">
<div class="cardlogo LOGO1" style="background-image:url(https://www.somesite.com/merchants/images/image.jpg)"></div>
<span id="ContentPlaceHolder1_grdCCChargebackDetail_lblCardNumber_0">7777</span>
</td>
I was fiddling with selenium.getAttribute() but it kept erroring out, any ideas there?
This <div/> element has one class attribute with one value, but this one is tokenized when parsed as HTML.
As selenium only supports XPath 1.0, you will need to check for classes like this:
//div[contains(#class, "LOGO1") or contains(#class, "LOGO2")]
Extend that pattern as needed and embed it in your expression.
With XPath 2.0 and better, you could tokenize and use the = operator which works on a set-based semantics:
//div[tokenize(#class, ' ') = ("LOGO1", "LOGO2")]
Old post but I'll put the solution I used up just in case it can help anyone.
xpath=//div[contains(#class,'carouselNavNext ')]/.[contains(#class, 'disabled')]
Fire of your contains, and then follow with /. to check children AND the current element.
CKeditor apparently automatically creates matching end tags when you enter a start tag. Is there a way to turn this behavior off?
I have a situation where I am creating two blocks of text in an admin program using CKeditor, then I'm using these to paint a page with the first block, some static content, and then the second block. Now I've got a case where I want to wrap the static content in a table. I was thinking, No problem, I'll just put the <table> tag in the first block and the </table> tag in the second block, and the static content will be inside the table. But no, CKeditor insists on closing the table tag in the first block.
In general, I can go to source mode and enter HTML directly, but CKeditor then decides to reformat my tagging. This seems to rather defeat the purpose of having a source mode. (I hate it when I tell the computer what I want and it tells me, No, you're wrong, I know better than you what you want!)
CKEditor produces valid HTML. Valid HTML has to include both - start and end tags. There's no way to change this behaviour without hacking editor. Note that even if you'll force editor to produce content without one of these tags it will then try to fix this and won't do this as you expect. E.g. load:
<p>foo</p></td></tr></table>
And you'll completely loose this table so only regexp based fix on data loading could help. In the opposite case:
<table><tr><td><p>foo</p>
You'll end up with paragraph wrapped with table, so it's better. But what if someone would remove this table from editor contents?
Therefore you should do this integration outside editor - prepend table to contents of one editor and append to contents of second one. You simply cannot force editor to work on partial HTML.