I am using the code view of JCE editor to add a link around some text. Adding a link through the link functionality gives the same results. When I add the link and save and come back to the code, it has completely reformatted it. Thanks for any help!
Here are the things I have already done:
Turned off global text filtering already.
Global parameters for the editor set validate HTML to off.
In user profile validate HTML is set to off.
Turned off all the parameters on the plugin parameters for the source code editor.
Here is the code I enter and how it becomes reformatted by JCE Edit:
<!-- BEFORE -->
<a class="inline" href="#inline_content">
<div class="smallTile">
<img src="/image.jpg" />
<h4 class="upper">Title</h4>
<p>
Paragraph
</p>
</div>
</a>
<!-- AFTER -->
<a class="inline" href="#inline_content"></a>
<div class="smallTile">
<a class="inline" href="#inline_content">
<img src="/image.jpg" />
<h4 class="upper">Title</h4>
</a>
<p>
<a class="inline" href="#inline_content"></a>
Paragraph
</p>
</div>
Related
I have a problem with CKEditor 4 adding additional HTML tags. I've been using v3 for a few years without any problems, and I've built my own plug-ins, so I'm not a complete novice but this has me stumped. For instance the following block of HTML:
<section class="component2">
<div class="">
<div class="component2__row">
<a class="component2__item component2__item--primary" href="#">
<img class="component2__item__image" src="http://MyServer/webmedia/Images/Components/component2/image-1.jpg" alt="IMG"/>
<h4 class="component2__item__title">Light Vehicle</h4>
</a>
</div>
</div>
</section>
Gets saved as:
<section class="component2">
<div>
<div class="component2__row">
<a class="component2__item component2__item--primary" href="#">
<img alt="IMG" class="component2__item__image" src="http://MyServer/webmedia/Images/Components/component2/image-1.jpg" />
</a>
<h4 class="component2__item__title">
<a class="component2__item component2__item--primary" href="#">Light Vehicle</a>
</h4>
<a class="component2__item component2__item--primary" href="#"> </a>
</div>
</div>
</section>
Any ideas? (Note for example the additional anchor tags!) Is there something in the HTML
it doesn't like? Is there a setting in config.js that I can use?
Thanks
If someone else stumbles across this I worked round it. As it was already my default (from v3) I'd already tried:
config.allowedContent = true;
I went through the documentation in detail, and even tried editing the dtd to allow headers to be in divs and anchors:
CKEDITOR.dtd['div']['h'] = 1;
CKEDITOR.dtd['a']['h'] = 1;
All to no avail. Eventually I gave up and replaced the <h4> tag in my sample with a <span> and styled it accordingly. That worked and CKEDITOR now leaves my source HTML untouched. Irritating that there isn't a feature whereby you can tell the Editor "Look, I know my HTML is valid, leave it alone and I'll deal with any consequences."
I recently noticed a new addition to Google Snippets for Structured Data search results on Google. Although I've added quite some snippets to this website, but I don't know how to enable this snippet. I'm thinking it'll either be via website or organization schema.org for the snippet to appear in the search results.
Example from Google's Developers Page:
Here's some excerpt code from the pages I need this info clicky to appear in search results, but I don't know how or what to modify or append to the pages. Also would application/ld+json script be functional for this purpose? Or is it advisable to add HTML code only?
<!-- LOGO -->
<div class="w-logo" itemscope itemtype="http://schema.org/Organization">
<div class="w-logo-h">
<a class="w-logo-link" itemprop="url" href="index.html">
<img class="w-logo-img" src="img/logo.png" alt="Company Name">
<span class="w-logo-title">
<span class="w-logo-title-h" itemprop="name">Company Name</span>
</span>
</a>
</div>
</div>
I'm using Visual Studio 2012 for an MVC web app using code first method with EF 5.0.
I have written the following code to make a modal window appear at some point:
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"><img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/></div>
<div id="mod-content"></div>
</div>
</div>
If works fine, exept that the image <img src="~/Content/icons/close.png" [...] /> cannot be found by the browser which thinks its URL is
http://localhost:49895/Class1/Home/~/Content/icons/close.png
To be precise, every code under my div's got broken URL. If I put my image above the div's it's displaying correctly with the following URL:
http://localhost:49895/Content/icons/edit.png
Do you have an idea where i messed things up?
Edit2: example (after problem being resolved)
This works:
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
This doesn't work:
<!-- comment containing a quote ' -->
<div id="mod" style="display:none;">
<div id="mod-container">
<div id="mod-close"></div>
<div id="mod-content"></div>
</div>
</div>
<img src="~/Content/icons/close.png" title="close" onclick="$('#mod').fadeOut();"/>
Could be a bug in the new Razor 2.0 tilde parsing, or you've mucked up your html by missing a quotation mark or something. Try using the more explicit way of resolving urls
<img src="#Url.Content("~/Content/icons/close.png")" />
If that works then it suggests a razor bug, if it doesn't then your html is probably broken somehow but the extra # symbol may be enough for the parser to kick in and tell you what is wrong.
~ is an asp code element, not HTML. As such it doesn't get rendered by the HTML.
Try wrapping your src with #Url.Content
<img src="#Url.Content("~/Content/icons/close.png")" />
I have an .cshtml page with the following HTML in it:
<div class="content rowBody">
<span class="rowText" title="#description">
#description
</span>
</div>
If the value of #description is: <img src=x onerror=alert(/XSS/.source)>
I see it showing up just like this in the title attribute and therefore executing, while the one in between the span tag appears to be encoded and does not trigger the alert box.
My assumption was that the Razor engine view attempts to encode anything preceded by the #. Does this not apply to HTML attributes?
Generated source:
<div style="margin-left: 31px;" class="content rowBody unselectable" unselectable="on">
<span class="rowText unselectable" title="<img src=x onerror=alert(/XSS/.source)>" unselectable="on">
<img src=x onerror=alert(/XSS/.source)>
</span>
</div>
It looks like what you're seeing here is different encoding based on the context. The required output encoding for HTML tags is different to HTML attributes as it is different for JavaScript and different again for CSS.
Having said that, I couldn't reproduce this behaviour with a clean MVC4 project. What version are you using?
I'm trying to make my tumblr posts link directly to the source when clicked rather than going to the post page and having the source link there to click.
Here's the code I have for the photo posts.
{block:Photo}
<div class="permalink">{MonthNumber}.{DayOfMonthWithZero}.{ShortYear}</div>
<div class="photo">
<div class="photobox"><img src="{PhotoURL-250}" alt="{PhotoAlt}"/></div>
{block:Caption}
<div class="caption">{Caption}</div>
{/block:Caption}
</div>
{/block:Photo}
I've tried changing the photobox 'permalink' to source etc with no avail.
Anyone got any ideas?
In the hope that someone who needs this will find it, here's a way I found to show {LinkURL} when it's available, and some other url when it's not.
Tumblr offers {block:LinkURL} to display some code when {LinkURL} is available, but there's no {block:NoLinkURL} to use when {LinkURL} is NOT available.
Ideally, this should be possible:
<a
{block:LinkURL}href="{LinkURL}"{/block:LinkURL}
{block:NoLinkURL}href="{Permalink}"{/block:NoLinkURL}> <!-- does NOT work -->
<img src="{PhotoURL-400}"/>
</a>
But {block:NoLinkURL} doesn't exist, so I'm using {block:LinkURL} to hijack the normal link instead:
<a {block:LinkURL} href="{LinkURL}" data-ignored-{/block:LinkURL}href="{Permalink}">
<img src="{PhotoURL-400}"/>
</a>
If {LinkURL} is available both links will be in the HTML, but only one is read.
Example output
This is the output when {LinkURL} is not available:
<a href="/permalink">
<img src="/image.jpg"/>
</a>
And this when is the output when {LinkURL} is available:
<a href="/linkurl" data-ignored-href="/permalink">
<img src="/image.jpg"/>
</a>
after comments edit
It should be <a href="{LinkURL}">
You have to make sure when you're adding the image that you've specified the target as outside of tumblr too.