When I try to load value from the database into a field that is editable by CKEditor, it strips out the iframe tag from it.
For Example, I send the following html to the be printed out on the screen:
<div class="videodetector">
<iframe src="https://www.youtube.com/embed/eSYKJ8WQ508?autohide=1&controls=1&showinfo=0"
frameborder="0" allowfullscreen=""></iframe>
</div>
But when I look at the printed out html, I see something like this:
<div class="videodetector"><img class="cke_iframe" data-cke-realelement="%3Ciframe%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FeSYKJ8WQ508%3Fautohide%3D1%26amp%3Bcontrols%3D1%26amp%3Bshowinfo%3D0%22%20frameborder%3D%220%22%20allowfullscreen%3D%22%22%3E%3C%2Fiframe%3E" data-cke-real-node-type="1" alt="IFrame" title="IFrame" align="" src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==" data-cke-real-element-type="iframe" data-cke-resizable="true"></div>
It seems to inject this image tag where the iframe is suppose to go.
I have researched this online and I tried adding the following code to the config.js, but it does not make a difference for me:
config.extraAllowedContent = 'iframe(*)';
config.allowedContent = true;
Note: If I print this out in a div that is not editable by CKEditor, then the iframe loads without any issues.
I do this:
CKEDITOR.on('instanceReady', function () {
var CKEIframes = $('.cke_iframe');
var CKEIframesL = CKEIframes.length;
for (i = 0; i <CKEIframesL; i ++ ) {
$(CKEIframes[i]).replaceWith(decodeURIComponent($(CKEIframes[i]).data('cke-realelement')));
}
});
I need to add many HTML tags into my text, including iframe. So I use these settings and they work fine:
'extraAllowedContent'=>'*(*)',
'allowedContent'=>true
Related
I am generating a pdf, and my employer asked me to add a footer to every single page in the pdf. The pdf gets generated with Rotativa, with a html page that turns into a pdf.
My only problem is, how am i gonna do this. I thought about some ideas, plain css code, although there are more then enough options, none of them really worked out for me. Especially because i can have 1 page, or i can have 10, depends on the amount of information that has to be put onto it.
So the footer has to be responsive to the amount of pages that will be generated.
Does anyone have any ideas for me? I want to get this worked out really bad, but i just have no clue how to.
Greetings
Lorenzo Otto
If I have not misunderstood your question, you could simply use an HTML page as a footer, to display the page footer, involving some javascript to display the current page and total number of pages. I'am actually using this approach for several web applications using Rotativa that generate PDF files based on MVC views with dynamic content.
Supposing we create a Footer.html (use the name you prefer here), this could be the HTML file for the PDF footer, including javascript code to generate page number info:
<!DOCTYPE html>
<html>
<head>
<script>
function subst() {
var vars = {};
var x = window.location.search.substring(1).split('&');
for (var i in x) { var z = x[i].split('=', 2); vars[z[0]] = unescape(z[1]); }
var x = ['frompage', 'topage', 'page', 'webpage', 'section', 'subsection', 'subsubsection'];
for (var i in x) {
var y = document.getElementsByClassName(x[i]);
for (var j = 0; j < y.length; ++j) y[j].textContent = vars[x[i]];
}
}
</script>
</head>
<body onload="subst()">
<div style="font-family: Helvetica; font-size:0.75rem; text-align: right; width:100%;">
<span class="page"></span> / <span class="topage"></span>
</div>
</body>
</html>
*For sure, you can change the footer div style as you wish, in order to suit your desing needs.
And on the other side, guessing the footer HTML page (called Footer.html before) is located in a folder called Shared, inside Views folder, you could this to prepare the required custom switches before calling Rotativa:
string customSwitches = "--footer-html " + Server.MapPath("~/Views/Shared/Footer.html");
So, if you are using an MVC action to generate a PDF based on a View called MyPdfView.cshtml, you can make uso of ViewAsPdf, passing it your custom switches, this way:
return new ViewAsPdf("MyPdfView")
{
FileName = "MyPdfView.pdf",
CustomSwitches = customSwitches
};
And that's all. Please let me know if this worked for you.
This question is quite common however I haven't seen a quite similar problem to mine. I have my .cshtml file where I've declared a TextArea using the Microsoft MVC HtmlHelpcer class. The code is the following:
#Html.TextArea("contentContainer", new Dictionary<string, object> { { "style", "width: 100%; height: 600px" } })
Then I have a function which is reading from a LogFile all the time and appending/adding the content of this file to this TextArea everytime there is an update. So I have my function in jQuery which appends the content to the TextArea and then I want it to Scroll the TextArea to the very bottom of the TextArea. The code is quite simple:
appendContent: function (content) {
var $textArea = $('#contentContainer');
var shouldBeScrolled = true;
$textArea.append(content);
var shouldBeScrolled = true;
if (shouldBeScrolled) {
$textArea.scrollTop(
$textArea[0].scrollHeight
);
}
}
Please ignore the shouldBeScrolled variable. I just have it cause later I plan to create some constraints on scrolling.
OK, basically this code works perfect on Chromium, the content gets appended and the TextArea is scrolled to the bottom. On Internet Explorer it simply doesn't scroll. Why is this happening?
This could very well be a bug in JQuery - I had the same issue before, and as a workaround I ended up scrolling to another item that contains my TextArea and has its top boundary coincident with the TextArea.
Something like this:
<div id="TextAreaContainer">
<textarea></textarea>
</div>
And then the Javascript would look like:
$("#TextAreaContainer").scrollTop();
I need to append a div (with is content), after all tags with a specific css class (or data- tag) in code behind of asp.net c#.
Someone can help me? Basically it should work as "append" in jquery. I searched online but could not find anything, especially to "append" to a tag with a specific CSS class.
Thank you.
You can add a diva as an html generic control from the code behind
for example i have a div like this
<div id="test" runat="server">Some Content</div>
As i specified runat server it will be available there and i can add contents like this
HtmlGenericControl div= HtmlGenericControl();
div.TagName = "div"; //specify the tag here
//then specify the attributes
div.Attributes["height"] = "100%";
div.Attributes["width"] = "100%";
div.Attributes["class"] = "someclass";
div.Attributes["id"] = "someid";
test.Controls.Add(div);
I'm building a small advertisement system for my website so that I can just add new ads in the database. Most ads consists of images and I will just write an image as innerhtml to a div. This works fine.
However, some ads consists of a script tag only that should be placed where the ad is wanted. Since I have to do this dynamically from either code behind in .NET or from an ajax call, I have some problems with this.
Just setting a innerhtml of a div like this:
<div id="asdf" runat="server">
<script type="text/javascript" src="xxxxx"></script>
</div>
... won't work since it won't get executed. No matter if i set it in the code behind on page load, or set with an ajax call.
I might be able to call eval() somehow, but this doesn't guarantee the script will be placed exactly where i want it to be if I got it right.
Any ideas? This can't be a new problem, many advertising networks has script tags instead of images and such.
Edit: The javascript file is located on another domain. Everything works if i set the src attribute to a local file containing only an alert! Can't you make this happen across domains?
You can try this:
var script = document.createElement('script');
script.src = 'xxxxxx';
script.type = 'text/javascript';
var div = document.getElementById('asdf');
div.appendChild(script);
you can add script tags dynamically, if you know from which source you want to add a file, like this:
// Get head object from DOM.
var head_obj = document.getElementsByTagName('HEAD').item(0);
// Create script object.
var script_obj = document.createElement( 'script' );
script_obj.type = 'text/javascript';
script_obj.src = File_Path;
// Define functions to be called on script load and load body.
script_obj.onload = onLoadFunc;
// Appendnd script object to the head object.
head_obj.appendChild( script_obj );
Hope that helps
Not able to identify the element in a page.It gives null.I want to identify the element in the Iframe (textbox) .I used selenium webdriver to click on the element,but it is not able to identify the element
1) My HTML Code is as shown bellow
<html>
<head>
<body>
<iframe id="iframeOne">
</iframe>
</body>
</head>
</html>
2. I used javascript to identify the textbox like document.getElementById('textbox').
But it return null.
3.I even Tried using selenium webdriver
IWebElement ClickElement = Wait.Until((d) => webDriver.FindElement(By.Id(parameter1))); It gives object reference error
ClickElement.Click();
You cannot put html inside an iframe tag. it is to load another page inside the curent page. and your input tag should caontain the type of the control. and check the HTML validation errors.
The html code you put inside the iframe tag will be loaded and visible if and only if the browser does not support iframe tag. So probably never, unless you're using older Netscape navigator or IE 4.
Add src attribute to the iframe pointing to the url you want to load. Then you can access elements inside this way:
var frame = document.getElementById('iframeOne');
var frameDocument = frame.contentDocument;
var element = frameDocument.getElementById('xxxx');
There's one thing to take into account, though: accesing contentDocument when iframe's src is cross-domain might not work as expected.