I'm trying to publish a piece of html to umbraco.
I managed to setup tinymce to accept all the html tags, however, there is still some wrong transformations being done.
When I publish this piece of html:
<div class="col-md-4">
<a href="" class="card-link">
<div class="panel panel-default">
<div class="panel-body">
<h2 class="card-link-title">Currencies</h2>
<i class="card-link-icon icon icon-money-currencies"></i>
</div>
</div>
</a>
</div>
It is transformed to:
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-body">
<h2 class="card-link-title">Currencies</h2>
<i class="card-link-icon icon icon-money-currencies"></i>
</div>
</div>
</div>
The a tag is removed. According to new html5 standards, div under a tag is valid (http://w3c.github.io/html-reference/a.html#a-changes), so I'm wondering if there's a way to make tinymce in umbraco accept the piece of html as it is
You need to edit the javascript in umbraco/lib/tinymce/tinymce.min.js. (The file mentioned by Jannik Anker in the other answer is a legacy version of tinymce, no longer used)
Look for a line
n("a","href target rel media hreflang type",u)
and try amending it to
n("a","href target rel media hreflang type",u,"div")
Make sure to clear your browser cache after editing so the updated file is used.
A quick look inside /umbraco_client/tinymce3/tiny_mce_src.js reveals a function named getHTML5() where these rules seem to be defined. In my 7.4.0 test site I'd change line 2507 to
'a[A|href|target|ping|rel|media|type][B][div]' +
BUT that's not really doing anything, even if you make the same change in /umbraco_client/tinymce3/tiny_mce.js, because the RTE editor is using a different JS entirely, namely /umbraco/lib/tinymce/tinymce.min.js in which I cannot find that same function :-s
I don't have time for much further investigation, but maybe this can get you a little bit further?
Related
I am working on documentation site using a template that runs on Markdown-Jekyll-Liquid-YAML. Everything works fine but have one niggling issue. There's an FAQ template that shows/hides an answer panel; it's all done in CSS and HTML and it works, too. Except, if I include hyperlinks using the Markdown syntax that works everywhere else, the hyperlinks are not being rendered, simply displayed as raw text. (I tried entering the links in plain HTML format, to no avail.)
Here is the relevant snippet of HTML:
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="noCrossRef accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseEight">Is DDOS protection in place?</a>
</h4>
</div>
<div id="collapseEight" class="panel-collapse collapse">
<div class="panel-body">
Yes, basic Azure DDOS defence is provided by default and [Azure DDOS Protection Standard] (https://learn.microsoft.com/en-us/azure/virtual-network/ddos-protection-overview) can be activated if required.
</div>
</div>
</div>
Any tips appreciated!
First of all you wrote:
[Azure DDOS Protection Standard] (https://learn.microsoft.com/en-us/azure/virtual-network/ddos-protection-overview)
It should be (without the space between the two parts):
[Azure DDOS Protection Standard](https://learn.microsoft.com/en-us/azure/virtual-network/ddos-protection-overview)
Second of all you should know that using HTML in a Markdown file is allowed... but it does not always work very well. I would use a plain HTML link here:
Azure DDOS Protection Standard
To be more precise (thank you Chris):
Markdown is explicitly "not processed within block-level HTML tags. E.g., you can’t use Markdown-style *emphasis* inside an HTML block.".
I am using Ckeditor in Drupal.
I have tried to add the following code in the block content using ckeditor
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/profile.png" alt="">
<div class="intro-text">
<span class="name">Start Bootstrap</span>
<hr class="star-light">
<span class="skills">Web Developer - Graphic Artist - User Experience Designer</span>
</div>
</div>
</div>
</div>
</header>
But the above code displaying like this
<header></header>
Inside contents are not displaying. I don't know what is happening inside. Did anyone know about this?
This has to do with the cleanup and output settings of both Drupal and CKEditor. The fastest and most effective way to achieve this is by creating a new input format, for example "HTML" via /admin/config/content/formats/add with all cleanup processing disabled. This way, your HTML input = HTML output.
Sidenote: Make sure your profile/the admin profile/role is the only role that is able to use it so only trusted users have access to this text-format.
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 am using the DNN MobiNuke Module (v02.00.03) from DataQuadrant to create a mobile version of a website I have created. Everything is going well EXCEPT a weird issue I am running into with the Mobile Skins. I have a simple Mobile Skin that looks like this:
<div id="mobile_frame">
<div id="mobile_header">
...
...
</div>
<div id="main_wrap">
<div id="mobile_main" class="sub">
<div id="ContentPane" runat="server"></div>
</div>
</div>
<div id="mobile_footer">
...
...
</div>
</div>
The issue that is arising is that ANY content in the ContentPane that has an empty div tag will change itself when rendered in a mobile browser:
<div class="xxxx"></div>
Will change itself to
<div class="xxxx" />
The biggest problem that this is causing is that the browser is interpreting the tag as an opening div tag with no closing tag. Therefore it is placing an ending div tag essentially wherever it wants. It's causing ALL of the markup after this area to get very messed up.
Here is an example of the code as it should be, and how it is rendering on the page:
Should be:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
</div>
<div id="mobile_footer">
...
</div>
</div>
But it renders as:
<div id="main_wrap">
<div id="mobile_main" class="sub">
... Content Here ...
</div>
<div id="mobile_footer">
...
</div>
</div>
</div>
I can fix this in the markup that I have control of by putting inside of the tags, but I do not have the time/energy to go through EVERY module that might be showing up in the ContentPane to check for empty tags. In addition, there are places where I want an empty tag to fill it with content later with javascript.
Lastly, I did a TON of research to look this up and I cannot find a thing. The closest that I found is that this happens in XSLT when transforming some XML, but as far as I know MobiNuke is not doing that.
Any help is greatly appreciated. Thanks!
I have figured out the issue after having a discussion with the vendor. There is a setting in the module settings called "Enable content adaptation". Apparently the setting will try to make the HTML to be XHTML compliant, but it was definitely not working for me. Hope this helps anyone else seeing this.