I like solution in this post Real-Time Html editor with Javascript or editor on this site. Just simple solution without extra functionalities.
How to edit the code to add SAVE/LOAD option? Is there somethin like "downloadable little CMS" to play with HTML/CSS? I want upload it to my hosting, easy access from home/phone/work, I do not want use online services like codepen or Liveweave.
thanks!
EDIT: Due to comments, I will clarify my question. I have some hosting, mySite.com. There is folder with this magic editor, mySite.com/xxx where i have some sample images and some basic css etc.. Im learning html/css, so I developing some basic html temapltes. HTML editor I linked is just fine. Only I need add 3 buttons, NEW/OPEN/SAVE which make new html file/can open it in live editor/and save it. AND I WANT HAVE THIS EASY SOLUTION ON MY OWN HOSTING.
<?php
$fileName = "page.html";
$fileContent = fopen($fileName, "r") or die("Unable to open file!");
if (isset($_POST['text'])) {
file_put_contents($fileName, $_POST["text"]);
}
?>
<!DOCTYPE html><html lang="cs"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.error {background-color: red; color: white;}
</style>
</head><body>
<form method="POST">
<textarea name="text" class="form-control" rows="20" id="pure">
<?php echo fread($fileContent,filesize($fileName)); ?>
</textarea><br>
<input type="submit" value="submit" />
</form>
<hr>
<div id="compiled"></div>
</body>
</html>
<?php
fclose($fileContent);
?>
<script type="text/javascript">
var h = document.getElementById("pure");
var compiled = document.getElementById("compiled");
h.onkeyup = function() {
compiled.innerHTML = h.value;
pure.classList.toggle("error",
compiled.innerHTML !== h.value);
};
h.onkeyup();
</script>
Its my actual work, real-time html editor from link in my question. File "page.html" must exist.
Added func. to load content from "page.html" file into textarea when page loads..
Added button to save textarea content to "page.html" when done..
Probably not perfect code, and for multiple projects must copy into diferent folders and load one by one :( no popup or form to choose diferent filename easily.. but for now it fits my requirements. I can learn/try/work on html template from home/work/mobile on my own hosting without login into third party service.
Ok, I'm done. Here is my final solution.
real-time html editor
Load/save buttons
automatically load files from /projects/ folder into dropdown list
you can upload files to make new project
no need to modify anything, you can just use it.
Index.php
<?php
$fileName = $_POST['project']?? 'index.html';
$fileContent = fopen("./projects/" . $fileName, "r") or die("Unable to open file!");
if (isset($_POST['text'])) {
file_put_contents("./projects/" . $fileName, $_POST["text"]);
}
?>
<!DOCTYPE html><html lang="cs"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.error {background-color:red; color:white;}
.dib {display:inline-block;}
</style>
</head><body>
<?php
echo "<form class='dib' method='POST'><select name='project'>";
$path = './projects/';
$files = scandir($path);
$files = array_diff(scandir($path), array('.', '..'));
foreach($files as $file){
echo "<option" . (($fileName == $file)?' selected':'') . ">" . $file . "</option>";
}
echo "</select> <input type='submit' value='Load!'></form>";
?>
<input type='submit' form='content' value='Save!'>
<form class="dib" style="float:right;" action="fileUploadScript.php" method="post" enctype="multipart/form-data">
Upload a File:
<input type="file" name="the_file" id="fileToUpload">
<input type="submit" name="submit" value="Start Upload">
</form>
<p style='margin:auto; text-align:center; width:20%; text-transform:uppercase; font-weight: bold;'><?php echo $fileName?></p>
<br>
<form id="content" method="POST">
<textarea name="text" rows="40" id="pure" style="width:100%;margin-top:8px;" wrap="off">
<?php echo fread($fileContent,filesize("./projects/" . $fileName)); ?>
</textarea><br>
<input type="hidden" name="project" value="<?php echo $fileName; ?>">
</form>
<hr>
<div id="compiled"></div>
</body>
</html>
<?php
fclose($fileContent);
?>
<script type="text/javascript">
var h = document.getElementById("pure");
var compiled = document.getElementById("compiled");
h.onkeyup = function() {
compiled.innerHTML = h.value;
pure.classList.toggle("error",
compiled.innerHTML !== h.value);
};
h.onkeyup();
</script>
fileUploadScript.php
<?php
$currentDirectory = getcwd();
$uploadDirectory = "/projects/";
$errors = []; // Store errors here
$fileExtensionsAllowed = ['jpeg','jpg','txt','bmp','html','htm','rar','zip','7z','doc','docx','xls','xlsx','ppt','pptx','pdf','pptm','png','gif']; // These will be the only file extensions allowed
$fileNamee = $_FILES['the_file']['name'];
$fileSize = $_FILES['the_file']['size'];
$fileTmpName = $_FILES['the_file']['tmp_name'];
$fileType = $_FILES['the_file']['type'];
$tmp = explode('.',$fileNamee);
$fileExtension = strtolower(end($tmp));
$uploadPath = $currentDirectory . $uploadDirectory . basename($fileNamee);
if (isset($_POST['submit'])) {
if (! in_array($fileExtension,$fileExtensionsAllowed)) {
$errors[] = "This file extension is not allowed. Please upload a JPEG or PNG file";
}
if ($fileSize > 4000000) {
$errors[] = "File exceeds maximum size (4MB)";
}
if (empty($errors)) {
$didUpload = move_uploaded_file($fileTmpName, $uploadPath);
if ($didUpload) {
echo "The file " . basename($fileNamee) . " has been uploaded";
} else {
echo "An error occurred. Please contact the administrator.";
}
} else {
foreach ($errors as $error) {
echo $error . "These are the errors" . "\n";
}
}
}
?>
After you save these two files, dont forget make new folder named "projects" and default file called "index.html" in this folder..
I just want to display a Excel file in a twig view with a Symfony2.5 Controller.
With PHPExcel, I can do this trick and it works :
<?php
error_reporting(E_ALL ^ E_NOTICE);
require_once '/../Classes/PHPExcel.php';
$filename = 'filename.xlsx';
$reader = PHPExcel_IOFactory::createReaderForFile($filename);
$excel = $reader->load($filename);
$writer = PHPExcel_IOFactory::createWriter($excel, "HTML");
?>
<html>
<head>
</head>
<style>
<?php
echo $writer->generateStyles(true);
?>
</style>
<body>
<?php
echo $writer->generateSheetData();
?>
</body>
</html>
How can I do the same thing in my Controller in Symfony 2.5 ?
Actually i have this :
public function newAction()
{
$filename = 'filename.xls';
$reader = \PHPExcel_IOFactory::createReaderForFile($filename);
$excel = $reader->load($filename);
$writer = \PHPExcel_IOFactory::createWriter($excel, "HTML");
echo $writer->generateStyles();
echo $writer->generateSheetData();
}
What should i have in my render view ?
Thanks for help !
On click I'm creating a new .html webpage. My HTML code is stored in a variable called content. But finally when the webpage is the made, the code automatically has \" (it escapes the double quotes). Is there a way for me to do it so that the webpage doesn't have escaped double quotes?
HTML CODE:
<html>
<body>
<button onclick="makePage()">Generate Link</button>
<script src="makePage.js">
</script>
<script>
var img = document.getElementById("img").value;
var content = document.getElementById("content").value;
</script>
</body>
</html>
JAVASCRIPT CODE:
function makePage(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
alert("webpage " + xmlhttp.responseText + " was successfully created!");
}
var content = '<html><head><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="#nytimes"><meta name="twitter:creator" content="#SarahMaslinNir"><meta name="twitter:title" content="Parade of Fans for Houston’s Funeral"><meta name="twitter:description" content="NEWARK - The guest list and parade of limousines with celebrities emerging from them seemed more suited to a red carpet event in Hollywood or New York than than a gritty stretch of Sussex Avenue near the former site of the James M. Baxter Terrace public housing project here."><meta name="twitter:image" content="http://graphics8.nytimes.com/images/2012/02/19/us/19whitney-span/19whitney-span-articleLarge.jpg"></head><body></body></html>';
xmlhttp.open("GET","http://ahansabharwal.com/makePage.php?content=" + content, true);
xmlhttp.send();
}
PHP CODE:
<?php
$content = $_GET["content"];
$file = "" . uniqid() . ".html";
file_put_contents($file, $content);
echo $file;
?>
It sounds as if magic_quotes_gpc is enabled in PHP (this is deprecated in later versions of PHP). In which case you'll need to call stripslashes() on the $_GET value before processing it.
Something like:
<?php
$content = $_GET['content'];
if (get_magic_quotes_gpc()) {
$content = stripslashes($content);
}
You should also be URL encoding the content before sending it in the GET request (the encodeURIComponent() method in JavaScript). However, this is a lot to send via GET, consider using a POST request instead.
I think the problem is in the "aif.php" file"
I am trying to fetch and display an array using PHP but the HTML element <br> is showing up in my result from the following scrip. I know I have to escape the HTML tags but I'm just not sure how! Also, any other advice on this code would be greatly appreciated (i.e. is there any redundancy or areas to improve? Thanks.
HTML
<DOCTYPE! html>
<html>
<head>
<title>The Auditors' Report: Data Entry</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header><h1>Work Station<h1></header>
<div = id="leftnav">
<h2>Select Action</h2>
Name: <input type="text" id="name">
<input type="submit" id="grab" Value="Grab">
</div>
<div id="content"></div>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="aif.js"></script>
</body>
</html>
PHP - config (filename: "config.php")
<?php
$dbhost = "localhost";
$dbname = "x";
$dbuser = "y";
$dbpass = "z";
$dsn = "mysql:host=$dbhost;dbname=$dbname";
$dbh = NULL
?>
PHP - query / resulting content (filename: "aif.php")
<?php
require "config.php";
$dbh = new PDO($dsn, $dbuser, $dbpass);
$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$dbh->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$sql = "SELECT * FROM table1 LIMIT 0,10";
$sth = $dbh->prepare($sql);
$sth->execute();
while ($row = $sth->fetch(PDO::FETCH_ASSOC)) {
echo $row['field1'],"<br>";
echo $row['field2'],"<br>";
echo $row['field3'],"<br>";
}
?>
Javascript
$('input#grab').on('click', function() {
var name = $('input#name').val();
if ($.trim(name) !='') {
$.post('aif.php', {name: name}, function(data) {
$('div#content').text(data);
});
}
});
If you want to html encode a line like this:
this is <br /> a test
into a line like this:
this is <br /> a test
Use the nifty little function described here: HTML-encoding lost when attribute read from input field
I made a simple error in the Javascript. I wanted to pass back HTML and not TEXT.
With the following change, the PHP is rendered properly:
$('div#content').text(data);
to
$('div#content').html(data);
I want to remove everything inside the <head> tag except the <title> in an html file, and also insert a script into the <head> tag after this is done. I don't want to delete the <head> tag itself.
Is this possible using Sed?
Using regex to parse HTML is not a good choice. See this famous article for a full discussion
I will suggest you to use a DOM Parser for this type of work since any regex you try will break at some point using sed or any of its variant. Since you've asked for an alternative in your comments consider following code in PHP:
$content = '
<HTML>
<HEAD>
<link href="/style.css" rel="stylesheet" type="text/css">
<title>
Page Title Goes here
</title>
<script>
var str = "ZZZZZ1233#qq.edu";
</script>
</HEAD>
';
$dom = new DOMDocument();
$dom->loadHTML($content);
$head='
<head>
<script>
// your javascript goes here
var x="foo";
</script>
';
$headTag = $dom->getElementsByTagName("head")->item(0);
if ($headTag != null) {
$title = $headTag->getElementsByTagName("title")->item(0);
if ($title != null)
$head .= '<title>' . $title->textContent . '</title>
';
}
$head .= '</head>';
var_dump($head);
OUTPUT
string(118) "
<head>
<script>
// your javascript goes here
var x="foo";
</script>
<title>Page Title Goes here</title>
</head>"