Can tinyMCE editor or Jsoup fix html markup errors? - tinymce

I am using tinymce editor in my project. HTML markup generated by editor is parsed using Jsoup (v.1.7.2) and is used to generate pdf using Apache FOP.
When user uses features of editor itself it generates valid html markup but if some user uses tool to include source code from other source directly and let's say he enters,
<ul>
<ul>
<ul>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
<li>
four
</li>
</ul>
</ul></ul>
the edior is not fixing markup to,
<ul>
<li>
one
</li>
<li>
two
</li>
<li>
three
</li>
<li>
four
</li>
</ul>
As per https://validator.w3.org/nu/#textarea
the first markup is not valid,
Error: Element ul not allowed as child of element ul in this context.
Is fixing html markup possible in tinymce editor or with Jsoup parser, If not any other approach?

You can try using JTidy,
Tidy tidy = new Tidy();
tidy.setXHTML(true);
final InputStream inputStream = new FileInputStream("input.html");
tidy.parse(inputStream, System.out);

Related

Inserting temporary content within snippets in "Visual Studio Code"

Within Visual Studio Code 1.7.2, I am able to generate a quick list of HTML data with the following snippet, followed by pressing TAB...
ul>li*5>h3+div
That will generate this list...
<ul>
<li>
<h3></h3>
<div></div>
</li>
<li>
<h3></h3>
<div></div>
</li>
<li>
<h3></h3>
<div></div>
</li>
<li>
<h3></h3>
<div></div>
</li>
<li>
<h3></h3>
<div></div>
</li>
</ul>
But how can I prepopulate every <h3></h3> to say <h3>tite</h3>, and every <div></div> to say <div>content</div>?
VScode uses emmet for this, so the input text would be:
ul>li*5>h3{title}+div{content}
which will expand to:
<ul>
<li>
<h3>title</h3>
<div>content</div>
</li>
<li>
<h3>title</h3>
<div>content</div>
</li>
<li>
<h3>title</h3>
<div>content</div>
</li>
<li>
<h3>title</h3>
<div>content</div>
</li>
<li>
<h3>title</h3>
<div>content</div>
</li>
</ul>
Here's additional documentation of the Emmet abbreviation syntax

How to write arabic in github README file?

I need to write arabic (rtl) language in README.md file in github.
So how could I do this?
You can't do this with markdown but you can surely do this with HTML.
<div dir="rtl">
## عنوان
### قائمة
<ul>
<li>١. البند 1</li>
<li>٢.البند 2</li>
<li>٣.البند 3</li>
</ul>
</div>
If just some parts of the document need to be right-to-left:
## <div dir="rtl">عنوان</div>
### <div dir="rtl">قائمة</div>
<div dir="rtl"><ul>
<li>١. البند 1</li>
<li>٢.البند 2</li>
<li>٣.البند 3</li>
</ul></div>
You could consider using ahmadajmi/markdown-arabic which includes a right-to-left markdown editor.
Online version is also available at arabicmarkdown.netlify.com

WWW::Selenium 'cant find element'

I'm having trouble with WWW::Selenium finding an href.
Here is the HTML element I'm looking for.
Sell Products
Here is the Perl code I'm using.
$sel->click('//a[contains(#href, "/auctions?organization_id=2")]');
Here is the error that WWW::Selenium is outputting.
Error requesting http://localhost:4444/selenium-server/driver/:
ERROR: Element //a[contains(#href, "/auctions?organization_id=2")] not found
Any tips/help will be greatly appreciated.
EDIT
Adding the surrounding HTML to aid in the troubleshooting.
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children">
Sell Products
</li>
</ul>
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom">
Seller Dashboard
</li>
</ul>
Instead of using hard-coded sleep I would suggest using wait_for_element_present.
my $locator = q{//a[contains(#href, "/auctions?organization_id=2")]};
$sel->wait_for_element_present($locator, $timeout)
$sel->click($locator);

Microdata format for showing an event with multiple date/time

With Microdata, what is the best way to represent an event page with multiple date/time booking options? There will be occasions when the event page only has one booking option, i.e one set date/time, no alternative, does this require a different method?
<section>
<h1>Tennis Lessons</h1>
<ol>
<li>Book Tickets for
<time datetime="2001-05-15 19:00">May 15</time>
</li>
<li>Book Tickets for
<time datetime="2001-05-16 19:00">May 16</time>
</li>
<li>Book Tickets for
<time datetime="2001-05-17 19:00">May 17</time>
</li>
</ol>
</section>
Or is this the wrong way to approach it and the events are children of a product?
<section itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Tennis Lessons</h1>
<ol>
<li itemscope itemtype="http://schema.org/Event">Book Tickets for
<time datetime="2001-05-15 19:00">May 15</time>
</li>
<li itemscope itemtype="http://schema.org/Event">Book Tickets for
<time datetime="2001-05-16 19:00">May 16</time>
</li>
<li itemscope itemtype="http://schema.org/Event">Book Tickets for
<time datetime="2001-05-17 19:00">May 17</time>
</li>
</ol>
</section>
In this case, on a booking confirmation page, it would then be correct to wrap the whole section in event Microdata as it then only has one possible date/time option?
Schema.org defines that an Event happens "at a certain time". So each lesson should be represented by its own Event item.
If you can book a lesson on your page, you may want to use the offers property and provide an Offer for each Event.
The nesting in your second snippet (Event items inside the Product item) has no influence on the Microdata (example). You have to use a property (within the itemprop attribute) if you want to connect Microdata items.
While you could use Product to represent the fact that you provide the service of tennis lessons, it seems that the Product type is missing a suitable property to reference an Event item. The typical solution would be to use both types, but Microdata is rather limited in that regard (it works better with RDFa).
If you want to provide data that is the same for all events, you could make use of the itemref attribute (instead of repeating it for each event).
So a basic structure could be this:
<section>
<h1>Tennis Lessons</h1>
<p itemprop="description" id="event-desc">…</p>
<ol>
<li itemscope itemtype="http://schema.org/Event" itemref="event-desc">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
</div>
</li>
<li itemscope itemtype="http://schema.org/Event" itemref="event-desc">
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
</div>
</li>
</ol>
</section>

Which Schema.org property should I use for popular posts item list?

Example markup of what I have:
<body itemscope='itemscope' itemtype='http://schema.org/WebPage'>
<div id="main" itemprop='mainContentOfPage' itemscope='itemscope' itemtype="http://schema.org/Blog">
<article itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
blah blah blah
</article>
<div>
<aside>
<ul>
<li><article><img/>popular post article</article></li>
<li><article><img/>popular post article</article></li>
</ul>
</aside>
</body>
What should I use for the articles within each list item? I thought of articleSection, but that doesn't make sense because it's not within an article schema. So I'm trying to wrap my around the best way to add Microdata here.
Moving the aside within the article isn't really a viable option either. This is Blogger, so doing that would be tricky, especially on the admin widget-management side of things.
Update (2016): In the meantime Schema.org introduced a property to denote that an item is the main/primary one for a page: mainEntity (see details). So the below answer is somewhat out of date.
If they are also blog posts, you would use BlogPosting, too.
Microdata is not only for the main content of a page. However, the Schema.org vocabulary currently lacks a property to mark an item as the main content item of a page (the property mainContentOfPage is only allowed for WebPage).
By using articleBody for the main BlogPosting, capable consumers should be able to deduce that the other BlogPosting items on the page (which naturally don’t have the articleBody property) are only linked/related posts.
So it could look like:
<div itemscope itemtype="http://schema.org/Blog">
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<div itemprop="articleBody">…</div>
</article>
<aside>
<ul>
<li>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<span itemprop="name">Post 4</span>
</article>
</li>
<li>
<article itemprop="blogPost" itemscope itemtype="http://schema.org/BlogPosting">
<span itemprop="name">Post 5</span>
</article>
</li>
</ul>
</aside>
</div>