Modifying the iframe for FCKeditor - html

I'm trying to figure out what file the styling for FCKeditor's WYSIWIG editor is located.
This is a sample WYSIWIG iframe:
<iframe id="edit-field-location-0-value___Frame" height="100%" frameborder="0" width="100%" scrolling="no" src="/sites/all/modules/fckeditor/fckeditor/editor/fckeditor.html?InstanceName=edit-field-location-0-value&Toolbar=Default" style="margin: 0px; padding: 0px; border: 0px none; background-color: transparent; background-image: none; width: 100%; height: 100%;">
I want to modify the height, but I just can't seem to find the file, or any documentation on this. Does anyone have any information?

Hah someone is still using the old module/editor (why?) o.O :-)
Considering that the editor is alrrady dead, same with the FCKeditor module for Drupal, I suggest taking the most easy path - altering the FCKeditor module
Find the following line in fckeditor.module:
// sensible default for small toolbars
$height = intval($element['#rows']) * 14 + 140;
and try setting height to any other value. I do not have this module installed, but that would be my first guess.

Related

How do I use the src attribute to link HTML code?

So I know in HTML you can do
<script src="myscripts.js"></script>
But is it possible to somehow link a html page? For example:
<html src="testing.html"></html>
Well, I'd use an iframe. The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.
Try this:
<body>
<iframe src="testing.html" frameborder="0" scrolling="yes"></iframe>
</body>
You'll also need some CSS, as follows:
body{
border: 0;
}
iframe {
width: 100vw;
height: 100vh;
}
So, building on the code above here's an example snippet:
body {
border: 0;
}
iframe {
width: 100%;
height: 100%;
}
<body>
<iframe src="https://example.com" frameborder="0" scrolling="yes"></iframe>
</body>
Hope I could help
There some ways you may try, but you may need to read bout it:
<template/> , placeholder tags for you to write new elements
Try using Javascript (limited that you must abide to CORs and also no inline scripts). E.g.
fetch('https://url.com/something.html').then(data => document.getElementById('x').innerHTML = data.text())
Use IFrames. <iframe src=""/>
Use some templating engine depending on languages, like
PUG/Jade (template generator),
Freemarker (Java),
React, angular (JS).
The second 2) option will always introduce security issues and you will also hit some roadblocks in future, e.g. executing scripts, etc.
The third 3) might be a better option if you are putting whole html. Your worries will be in interaction between current page and resize.
But directly injecting HTML on runtime introduces risks, you won't know what will the contents are and it's not a recommended way. You'll also risk into mismatch Html child, e.g.
<html><title><html><title></title></html><body>..

How to remove strange div called dp_swf_engine from html page?

On my site, I recently found a strange new automatically generated div. when I look at it in development tools in chrome I says:
<div id="dp_swf_engine" style="position: absolute; width: 1px; height: 1px;"><embed style="width: 1px; height: 1px;" type="application/x-shockwave-flash" src="http://www.ajaxcdn.org/swf.swf" width="1" height="1" id="_dp_swf_engine" name="_dp_swf_engine" bgcolor="#336699" quality="high" allowscriptaccess="always"></div>
I really don't know what it is, and where it's coming from.
I already had a similar problem and the div came from a chrome extension, check which extension can modify your pages.
Sometimes it will be automatically adding from your web hosting
server
If you are using an external plugins it will be coming from it
I could see you are using google fonts.... Try removing and check your site
You can run your website on a local server...
To hide the DIV, Try adding this css:
<style type="text/css">
dp_swf_engine {
display:none;
}
</style>
Thanks
On the document ready event :
var element = document.getElementById("dp_swf_engine");
document.body.removeChild(element)
if your div is directly in your body element else, find his parent for call removeChildFunction...
I hope that help !

how remove background in new version of runtime in google swiffy

I use google swiffy for convert my swf file to html5.
But now google is upgraded runtime to v 5.2 and can't use transparent background.
Before i use runtime v 4.9 of google swiffy html5 from swf file and in google code i remove this from my javascript file for use transparenty background:
"backgroundColor":-1,
But now runtime is upgraded to v5.2 and i can`t remove background color from swiffy file
https://www.gstatic.com/swiffy/v5.2/runtime.js
This solution work perfectly with flash cs5 -> swiffy v5.3!
#swiffycontainer rect {
background: none !important;
display:none !important;
}
To expand this answer: I'm running Swiffy 5.2.0 and this didn't work at the very beginning since the internal generated code is different in my case, it looks like this:
<div id="my-container">
<!-- Begins Swiffy generated code -->
<div style="position: relative; height: 100%; overflow: hidden; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); background-color: rgb(102, 121, 14); cursor: default; background-position: initial initial; background-repeat: initial initial;">
<svg color-interpolation-filters="sRGB" style="fill-rule: evenodd; pointer-events: none; -webkit-user-select: none; width: 100%; height: 100%;">
<!-- svg contents here -->
</svg>
<!-- Ends Swiffy generated code -->
</div>
</div>
Note that my-container is the container that I assigned in the stage constructor, not generated by Swiffy.
Just check for the generated code and adjust css selector as necessary, the original idea still remains the same:
<style type="text/css">
#my-container div {
background-color: transparent !important;
}
</style>
Roger's solution worked perfectly for me: I'm using Swiffy in a Wordpress Environment, so here's what I did:
1) Add the Swiffy-generated code into the header.php file (actually header-home.php so I could call it for only one page).
2) Before the Swiffy , add Roger's code:
<style type="text/css">
#swiffycontainer div {
background-color: transparent !important;
}
</style>
3) Place the Swiffy-generated code that came AFTER the (before the close of the tag) into the footer.php file (again, footer-home.php in my case).
4) Put the Swiffy container ('id="swiffycontainer"' by default) Div on the WordPress page.
Tah-Dah! I would have simply voted Roger up, but I don't have the rep to do so. Plus I thought my WordPress situation might help others.
<style type="text/css" media="screen">
#div *:first-child {
background-color: transparent !important;
}
</style>
GOOGLE HAVE THE ANSWER:
https://www.google.com/doubleclick/studio/swiffy/faq.html
How can I make the background transparent?
If you need to make the background transparent, as done by the wmode="transparent" attribute, you can insert the following code snippet in the Swiffy output, just before the call to stage.start():
stage.setBackground(null);
You can also replace the null with any valid CSS color specification string to override the background color from the one defined in the conversion.
After searching and searching in the web, and try everything, also described in this post, finally I've find the solution!!
When you export and .swf in flash CS6 to html5 (canvas), open the .html file exported in a html editor and change the background-color attribute to #transparent"
Example:
<body onload="init();" style="background-color:#transparent">
<canvas id="canvas" width="550" height="300" style="background-color:#transparent"></canvas>
</body>
Well, it works fine for me!
You can invoke the "setBackground" method to null after starting up the stage. Like so,
stage.start();
stage.setBackground(null);

Embed PDF file into webpage from online source, which requires download of the file with "Content-Disposition:" tag in HTTP-headers

I need to display the PDF files from a third party on a webpage. I have links to the documents as they appear on the source pages. Unfortunately, none of the links are actual links to the documents, but rather GET requests with certain parameters, or other indirect references like so:
http://cdm.unfccc.int/UserManagement/FileStorage/SNM7EQ2RUD4IA0JLO3HCZ8BTK1VX5P
If the website does not enforce the download with Content-Disposition: attachment; tag in the response headers, as the one above, then I can easily achieve the necessary display by:
<object width="90%" height="600" type="application/pdf"
data="http://cdm.unfccc.int/UserManagement/FileStorage/SNM7EQ2RUD4IA0JLO3HCZ8BTK1VX5P"
id="pdf_content">
<p>Can't seem to display the document. Try <a href="http://cdm.unfccc.int/UserManagement/FileStorage/SNM7EQ2RUD4IA0JLO3HCZ8BTK1VX5P">
downloading</a> it.</p>
<embed type="application/pdf" src="http://cdm.unfccc.int/UserManagement/FileStorage/SNM7EQ2RUD4IA0JLO3HCZ8BTK1VX5P"
width="90%" height="600" />
</object>
This "stands" and "falls" very gracefully in majority of the browsers. The use of <object> and <embed> at the same time works for me, and, as far as I've tested, does not effect the problem that I describe below (tell me if I'm wrong).
The problem begins when the website does require the download with the above mention tag in the HTTP-headers. For instance, the document on the following link:
http://mer.markit.com/br-reg/PublicReport.action?getDocumentById=true&document_id=103000000000681
would not be displayed through the HTML structure I showed above. It falls gracefully and the link for downloading works just fine, but I need to view it!
I've been banging my head on the wall for 3 days now, can't figure it out.
Maybe there is a way to catch the headers of the request somehow and ignore them, or maybe force the "viewability" into the GET request.
For general information, this is a part of Ruby on Rails application, so the solution should be coming from along those lines. I'm not giving any ROR code in here, because it doesn't seem to be a source of concerns.
Any straight-forward solution would be prayed upon, while any others - heavily appreciated.
The alternative solutions I thought of and discarding comments:
Download all those files to local storage in advance and just serve them from there.
The necessary storage capacity would be around ~1TB and growing, so storing it on the server would be expensive for a small commercial SaaS that it is.
Cache those documents around the time when they might be needed. For instance, when someone opens the page of the project, the process in the background downloads the related PDFs, so if the user clicks the document link he is served the document which was just downloaded to the local storage. Cache could be kept for a few hours/days just in case of user return.
This might be viable, but if the user base would be significant, then this solution would have the same problem as the one above. Also at this moment, I would not know how to go about implementing this kind of algorithm (very much a beginner, you see)
You may want to look into using http://pdfobject.com or maybe just adapt some of its code as it seems to be able to do what you want. I whipped up a proof-of-concept:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Embedding a PDF using PDFObject: Simple example with basic CSS</title>
<!-- This example created for PDFObject.com by Philip Hutchison (www.pipwerks.com) -->
<style type="text/css">
body
{
font: small Arial, Helvetica, sans-serif;
color: #454545;
background: #F8F8F8;
margin: 0px;
padding: 2em;
}
h1
{
font-weight: normal;
font-size: x-large;
}
a:link, a:visited
{
color: #3333FF;
text-decoration: none;
border-bottom: 1px dotted #3333FF;
}
a:hover, a:visited:hover
{
color: #FF3366;
text-decoration: none;
border-bottom: 1px solid #FF3366;
}
#pdf
{
width: 500px;
height: 600px;
margin: 2em auto;
border: 10px solid #6699FF;
}
#pdf p
{
padding: 1em;
}
#pdf object
{
display: block;
border: solid 1px #666;
}
</style>
<script type="text/javascript" src="pdfobject.js"></script>
<script type="text/javascript">
window.onload = function () {
var success =
new PDFObject({ url: "http://mer.markit.com/br-reg/PublicReport.action?getDocumentById=true&document_id=103000000000681" }).embed("pdf");
};
</script>
</head>
<body>
<h1>
Embedding a PDF using PDFObject: Simple example with basic CSS</h1>
<p>
This example uses one line of JavaScript wrapped in a <em>window.onload</em> statement,
with a little CSS added to control the styling of the embedded element.
</p>
<div id="pdf">
It appears you don't have Adobe Reader or PDF support in this web browser. <a href="http://mer.markit.com/br-reg/PublicReport.action?getDocumentById=true&document_id=103000000000681">
Click here to download the PDF </a>
</div>
</body>
</html>

How to extract particular links from html source code with regex

I have html page with full of link. but they inside the pre tag like below
<pre class="alt2" dir="ltr" style="
margin: 0px;
padding: 6px;
border: 1px inset;
width: 640px;
height: 130px;
text-align: left;
overflow: auto">
http://test.com/files/tivist.r00
http://test.com/files/tivist.r01
http://test.com/files/fdfd.rar
http://test.com/files/gfgf.rar.html
http://test.com/files/trtr.zip
</pre>
</div><br />
The page is full of links like those
Is there any way get only those links form whole page.
I am using notepad++ . If i can get regex which can just extract those links
you can use the following regex to find them all in the document.
http://[^\s]*
I guess you could edit it to or something similiar
http://[^\s"><]*
Besure you set the line by line option off. Notepad++ has a very limited and poorly documented regex engine. Try downloading editpad pro trial edition.
(?<=\<pre.+?)http:\/\/.+?($|\s)(?=.+?\<\/pre\>)
This should only get links that are within a pre tag.
Here is a screen shot from Edit Pad Pro Trial edition