I have got the following HTML:
some text <b>some bold text</b>
<span property='some property1>
some semantic term2</span>
<p><span id='mark1'></span>
some text <i>some italic text</i></p>
<span property='some property2'>
some semantic term</span>
<span id='mark2'></span>
I would like to select all span elements with a 'property' attribute, which are placed between the span elements with ids 'mark1' and 'mark2' (these are my technical bookmarks, which should be then removed) and unwrap it.
I think the best way to implement it in Java Jsoup is to use the doc.select function. But I can't create the correct CSS query (I need something like: every span elements with property attribute BETWEEN these two elements).
The expected result (after removing the bookmarks):
some text <b>some bold text</b>
<span property='some property1>
some semantic term2</span>
<p>
some text <i>some italic text</i></p>
some semantic term
Any ideas? Maybe something like E ~ F. Thanks a lot!
This is not possible: the Jsoup selector syntax is not expressive enough to select all tags between two arbitrarily-positioned tags.
However, you can use the NodeTraverser class with a NodeVisitor implementation that collects all elements visited between the two bookmark elements. (This should be easier than "some awful recursion" referenced in your comment.)
Related
I'm using Tiny 4.9.10 to dynamically generate reports based on templates. Users can create templates which contain placeholders. These placeholders then get swapped out for their actual values when generating the actual report. The placeholders get their style (including font, which is the main issue here) from their enclosing <span>-tag.
When replacing the placeholder with their actual value, we use <br />-tags to insert new lines, since some of the placeholders are almost full reports on their own which need to be structured.
After the placeholders have all been replaced, we inject this dynamically generated content back into a Tiny editor, so as to allow users to make ad hoc changes to the content.
At this point however we noticed that the <span>-tag around a piece of generated content containing <br />-tags gets removed. This is a problem, because the style info that was enclosed in this tag gets removed as well, resulting in problems further down the line when generating a PDF.
What I've tried to work around this:
setting verify_html to false
adding +span[br]/+span[br /] to valid_children
setting forced_root_bloc to div
The first two options did nothing to help me, and while the last one looked promising, it didn't help, because even when using <div>, font info gets enclosed into a child <span>.
I know this is expected behavior, because <span> is an inline tag and so it shouldn't have <br /> tags as children, but I'm currently at a loss for a workaround which allows me to include <br /> tags into my dynamically generated content without losing the style (most importantly the font) of the parent tag.
So I solved this by replacing the <span> tags by <div> tags when we swap out the placeholders by using some regex looking for spans that enclose a <p>...<\p> or a <b />. This stops Tiny from throwing away the <span> tags when they contain either of these enclosed tags
TinyMCE considers the <span> <br /> </span> construct an empty space and deletes it in favor of optimization.
I may be late, but you can also try using this callback in the setup option to stop the editor from removing empty spans:
setup: function(editor) {
editor.on('PreInit', function() {
editor.schema.getElementRule('span').removeEmpty = false;
});
}
I am using Jekyll static site generator with Kramdown to render articles written in Markdown on my website. The footnotes appear fine in preview in Sublime Text Editor (text next to numbers) but have new lines when on website.
Compare Website Image vs
Preview Image.
And here's the article with syntax I am using:
As regards to a reasonable definition of a friend:
Proposition 1 : A minimum necessary condition for A to be considered a friend of B is that A helps when B is in need, as long as A knows that B needs help and it is in A's capacity to help. [^clarification1][^indeed
[^clarification1]: For clarification, anyone who argues against
Proposition 1 would have to maintain that A can consistently refuse to
help B (when B is in need and it is in A's capacity to help without
harming his/her own self interest), AND yet be a friend of B.
Look at your generated code.
In my versions of jekyll/kramdown I get...
<div class="footnotes">
<ol>
<li id="fn:1">
<p>Your footnote text</p>
</li>
</ol>
</div>
Therefore, in your css you could add:
.footnotes > ol > li > p {
display: inline;
}
The above CSS would stop the p tag, only after the footnote class in an ordered list element, from line-breaking.
<div>
<label localize="{data: 'Name', suffix: ':'}">Name:</label>
<span class="required" ng-class="{'disabled': meterCreating}" input-control="{title: 'Meter', okCallback:setMeterName, value: meter.meterName, ss: 'meters'}">
<span hs-placeholder="Enter Name" class="ng-binding"></span>
</span>
</div>
What is the best way to find an element: placeholder = "Enter Name"?
Scenario: find an element using Snippet above
User clicks on the "Enter Name" box, another windows pops-up for entering a name.
Based off that HTML, the cleanest way I can see is by css chaining:
element(by.css('span.required span.ng-binding')) (would normally just be span.ng-binding, but I highly doubt that's unique. I also doubt that span.required span.ng-binding is unique either)
There are many other options, however they won't be pretty cause they will be similar chains.
element(by.cssContainingText('label', 'Name:')).element(by.css('span > span'));
or
element(by.css('div label span.ng-binding')) etc..
I would suggest asking your developers for better locators (specifically, ID's), it makes JavaScript way easier. Unfortunately, I don't think you're able to locate that element by HTML attributes, which is one of my favorite ways. It would have looked like this:
element(by.css('span[placeholder=Enter Name]')) -- but I'm pretty sure that will throw an error for invalid locator. It accepts most "standard" html attributes such as value, option, style etc...
I’m working in the Moovweb SDK and am optimizing my personal desktop site for mobile.
How do I transform all my <p> tags to <div> tags? I really don't want to do it manually! Search and replace?? haha
You can use the name() function to change the name of an element. For example:
$("//p") {
name("div")
}
See it in action here: http://tester.tritium.io/bd1be4f2c187aed317351688e23f01127d26343a
Cheap way: Add p{margin:0} to your CSS, this will remove the only special styling of <p> tags making them look like <div>s.
This is only a visual effect, though. For instance, you're still not allowed to put a <form> inside a <p>, even with the above CSS. If that's what you're after, a simple search and replace will do:
Replace <p> with <div>
Replace <p␣ (left angle, p, space) with <div␣ (there's a space at the end of that one too)
Replace </p> with </div>
That should do 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.)