I'm trying to use CKEditor with the Simple Image Browser plugin on wampserver, but I'm sorry, I really do not understand what to put in this line:
CKEDITOR.config.simpleImageBrowserURL
In the video he putted a php file, what to put in this file ?
(video: https://www.youtube.com/watch?v=WB5Y8XNQlgE)
I'd like to show the pictures that are in a variable directory 'images/$id/'
Thanks for your help.
Page of the plugin:
http://ckeditor.com/addon/simple-image-browser
For simpleImageBrowserURL you need to provide a URL (e.g. a php script) which delivers the content as JSON.
You can start with a URL to a static .txt file with a content like this:
[{"url": "/images/1234/image1.png"},{"url": "/images/1234/image2.png"}]
Or a very simple php script:
<?php
header('Content-Type: application/json');
$id = '1234';
echo '[';
echo '{"url": "/images/' . $id . '/image1.png"},';
echo '{"url": "/images/' . $id . '/image2.png"}';
echo ']';
?>
UPDATE
With the above php script the simple image browser plugin does not load the images. This is caused by the jQuery $.get function the plugin uses. While jQuery already parses the JSON and passes objects to the function the plugin tries to parse the objects (here the images variable):
$.get(CKEDITOR.config.simpleImageBrowserURL, function(images) {
var json;
console.log(images);
json = $.parseJSON(images); // this will not work if the images parameter contains objects
It may be that this worked that way with older versions of jQuery...
So to make this work the php script has to deliver a text/plain mime type:
<?php
header('Content-Type: text/plain');
$id = '1234';
echo '[';
echo '{"url": "/images/' . $id . '/image1.png"},';
echo '{"url": "/images/' . $id . '/image2.png"}';
echo ']';
?>
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="scripts/ckeditor/ckeditor.js"></script>
<script src="scripts/ckeditor/plugins/simple-image-browser/plugin.js"></script>
<link href="styles/knacss.css" rel="stylesheet" type="text/css" />
<link href="styles/ui.css" rel="stylesheet" type="text/css" />
<link href="styles/fonts.css" rel="stylesheet" type="text/css" />
<link href="styles/styles.css" rel="stylesheet" type="text/css" />
<script>
$(function () {
CKEDITOR.config.extraPlugins = 'simple-image-browser';
CKEDITOR.config.simpleImageBrowserURL = 'images-liste.php';
CKEDITOR.replace('details');
});
</script>
</head>
<body>
<p><label for="description">Descripção:</label></p>
<p><textarea class="ckeditor" name="description" id="description"></textarea></p>
</body>
</html>
images-liste.php:
<?php header('Content-Type: application/json');
echo '[';
echo '{"url": "http://andrewprokos.com/wp-content/uploads/22346-brasilia-cathedral-night-2.jpg"},';
echo '{"url": "https://upload.wikimedia.org/wikipedia/commons/6/6c/Brazil.Brasilia.01.jpg"}';
echo ']';
?>
Errors:
ckeditor.js:327 Uncaught TypeError: Cannot read property 'getEditor' of undefined
ckeditor.js:610 Uncaught TypeError: Cannot read property 'title' of undefined
Related
I am trying to bring up a javascript alert with my variables from php. My upload.php file so far is:
<?php
if(isset($_POST['btn-upload']))
{
$pic = rand(1000,100000)."-".$_FILES['pic']['name'];
$pic_loc = $_FILES['pic']['tmp_name'];
$folder="uploaded_files/";
if(move_uploaded_file($pic_loc,$folder.$pic))
{
?><script>alert('File successfully uploaded.\n');
</script><?php
}
else
{
?><script>alert('Sorry, error while uploading file. Please try again');</script><?php
}
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Photo Uploader for use in markdown</title>
</head>
<body>
<h2>Photo Uploader & Markdown generator</h2>
<p>Click 'Choose file' to choose the file to be uploaded. The filename should appear. Then click 'upload'. <br>A popup should show you what to copy and paste.</p>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="pic" />
<button type="submit" name="btn-upload">upload</button>
</form>
</body>
</html>
I then have my html code which looks like (only the relevant part included):
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="pic" />
<button type="submit" name="btn-upload">upload</button>
The purpose of this script is to upload a picture to a server and then display the markdown code for the user to use that image. I am aiming to output the following if the file uploads correctly:
I have tried the following:
<?php
if(isset($_POST['btn-upload']))
{
$pic = rand(1000,100000)."-".$_FILES['pic']['name'];
$pic_loc = $_FILES['pic']['tmp_name'];
$folder="uploaded_files/";
if(move_uploaded_file($pic_loc,$folder.$pic))
{
?><script>alert('File successfully uploaded.\n');</script><?php
}
else
{
?><script>alert('Sorry, error while uploading file. Please try again');</script><?php
}
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Photo Uploader for use in markdown</title>
</head>
<body>
<h2>Photo Uploader & Markdown generator</h2>
<p>Click 'Choose file' to choose the file to be uploaded. The filename should appear. Then click 'upload'. <br>A popup should show you what to copy and paste.</p>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="pic" />
<button type="submit" name="btn-upload">upload</button>
</form>
</body>
</html>
This results in a working webpage that uploads the file but does not show the js alert.
I have also tried the following:
<?php
if(isset($_POST['btn-upload']))
{
$pic = rand(1000,100000)."-".$_FILES['pic']['name'];
$pic_loc = $_FILES['pic']['tmp_name'];
$folder="uploaded_files/";
<script>var folder = "<?php echo $folder ?>";</script>
<script>var pic = "<?php echo $pic ?>";</script>
if(move_uploaded_file($pic_loc,$folder.$pic))
{
?><script>alert('File successfully uploaded.\n');</script><?php
}
else
{
?><script>alert('Sorry, error while uploading file. Please try again');</script><?php
}
}
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Photo Uploader for use in markdown</title>
</head>
<body>
<h2>Photo Uploader & Markdown generator</h2>
<p>Click 'Choose file' to choose the file to be uploaded. The filename should appear. Then click 'upload'. <br>A popup should show you what to copy and paste.</p>
<form action="" method="post" enctype="multipart/form-data">
<input type="file" name="pic" />
<button type="submit" name="btn-upload">upload</button>
</form>
</body>
</html>
This results in an http error 500
Any advice?
Many thanks,
You can create a function in php and call it where ever you need to call alert.
Function :
function alertMsg($str) {
print("<script>alert('$str')</script>");
}
And call in php as
//string
alertMsg("Success");
//php variable
$alertMsg = "Some alert message";
alertMsg($alertMsg);
//even you can concatenate both
alertMsg("This is an alert. ".$alertMsg);
Hope this helps.
Thanks.
In both attempts you're trying to mix PHP, HTML, and JavaScript as though they were all the same language. They are not. From the perspective of any one of them, code in another one of them is nothing but a string. They can't directly share variables and logic.
See how this line:
alert('File successfully uploaded.\n');
is attempting to use PHP code (both the variables and the syntax) directly in JavaScript. This is simply resulting in syntax errors in your JavaScript, which your browser's development console is pointing out to you. Instead, enclose the PHP code in <?php ?> tags and echo the result:
alert('File successfully uploaded.\n');
The second attempt has the same problem, you're putting HTML/JavaScript directly in your PHP:
$folder="uploaded_files/";
<script>var folder = "<?php echo $folder ?>";</script>
This is resulting in PHP syntax errors, which your PHP logs are telling you about (as well as the 500 Internal Server Error you're getting).
PHP code needs to be in <?php ?> tags. Always. So this would be something like:
$folder="uploaded_files/";
?>
<script>var folder = "<?php echo $folder ?>";</script>
<script>var pic = "<?php echo $pic ?>";</script>
<?php
if(move_uploaded_file($pic_loc,$folder.$pic))
Note also that in HTML/JavaScript you don't need a <script> tag for every line of JavaScript code. You can have multiple lines of code in a single <script> element.
Using variable PHP in JS
<?php
if (isset($_POST['btn-upload'])) {
$pic = rand(1000,100000)."-".$_FILES['pic']['name'];
$pic_loc = $_FILES['pic']['tmp_name'];
$folder = "uploaded_files";
if (move_uploaded_file($pic_loc, $folder . '/' . $pic)) { ?>
<script>
alert("File successfully uploaded! " +
"\n" +
location.hostname +
"<?php echo '/' . $folder . '/' . $pic; ?>");
</script>
<?php
} else { ?>
<script>alert("Sorry, error while uploading file. Please try again");</script>
<?php
}
}
?>
location.hostname = $_SERVER['HTTP_HOST'] // localhost
I'm versionating my css files to "force the browser" clear cache when I want.
<link rel="stylesheet" href="app/css/normalize.min.css?v=0.0.1">
<link rel="stylesheet" href="app/css/bootstrap.min.css?v=0.0.1">
<link rel="stylesheet" href="app/css/main.css?v=0.0.1">
<link rel="stylesheet" href="app/css/angular-chart.min.css?v=0.0.1">
<link rel="stylesheet" href="app/css/loading-bar.css?v=0.0.1">
<link rel="stylesheet" href="app/css/bootstrap-tour-standalone.min.css?v=0.0.1">
I have the following code, which is working well. My doubt is how to use a variable on it ?
Example:
<script> var version = '0.0.1'; </script>
<link rel="stylesheet" href="app/css/normalize.min.css?v=version">
I have tried something like this
<script>
var version = 0.0.1;
$(function(){
$("html").find('link').each(function(){
var srcpath = $(this).attr('href');
srcpath = srcpath.replace('version', version)
})
})
</script>
but it didnt work.
You can remove <link> elements from html, use $.holdReady() to hold .ready() handler from being called, request all resources using $.when() append <link> elements to document having version concatenated to path to resource, then call $.holdReady(false) to fire .ready() handlers when all <link> load events have been fired
Stylesheet load events
You can determine when a style sheet has been loaded by watching for a
load event to fire on it; similarly, you can detect if an error has
occurred while processing a style sheet by watching for an error event
var version = "?v=0.0.1";
// array of URL's to request
var links = ["app/css/normalize.min.css", "app/css/bootstrap.min.css", ..];
$.holdReady(true);
$.when.apply($, $.map(links, function(path) {
return new $.Deferred(function(d) {
$("<link>", {href: path + version, rel: "stylesheet"})
.appendTo("head").on("load", d.resolve);
})
}))
.then(function() {
$.holdReady(false)
});
$(document).ready(function() {
// do stuff when all `<link>` elements have been appended to `<head>`
})
plnkr http://plnkr.co/edit/WlJMT04hmCy7SYClc6my?p=preview
If you use PHP as your server-side language, you can use a php variable the same way you did in your example. You will need to save your html file as a php file like index.php to be able to introduce php code.
<?php
$g_version = "0.0.1";
echo
'<link href="app/css/normalize.min.css?v=' .$g_version .'">' .
'<link href="app/css/bootstrap.min.css?v=' .$g_version .'">' .
'<link href="app/css/main.css?v=' .$g_version .'">' .
'<link href="app/css/angular-chart.min.css?v=' .$g_version .'">' .
'<link href="app/css/loading-bar.css?v=' .$g_version .'">' .
'<link href="app/css/bootstrap-tour-standalone.min.css?v=' .$g_version .'">';
?>
Or you can go like this if you want to keep the html color highlight of your text editor:
<?php
$g_version = "0.0.1";
?>
<link href="app/css/normalize.min.css?v=<?php echo $g_version; ?>">
<link href="app/css/bootstrap.min.css?v=<?php echo $g_version; ?>">
<link href="app/css/main.css?v=<?php echo $g_version; ?>">
<link href="app/css/angular-chart.min.css?v=<?php echo $g_version; ?>">
<link href="app/css/loading-bar.css?v=<?php echo $g_version; ?>">
<link href="app/css/bootstrap-tour-standalone.min.css?v=<?php echo $g_version; ?>">
I removed rel="stylesheet" just to make it easier to read.
I passed along data via POST to php using JQuery, but when the page direct to the php file, the POST["createVal"] in php doesn't seem to exit after the call back. I showed this in demo below, notice that the $name is undefined when the callback result is clicked. Any idea how to fix this?
I'm trying to make a function that when the returned result was clicked, html page could redirect to the php page in which user input in html file could be printed out.
HTML file
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<input type="text" id="userinput">
<div id="result">
</div>
</body>
<script>
$("input").keyup(function(){
var input=$("input").val();
$.post("process.php",{createVal:input},function(data){
$("#result").html("<a href='process.php'>"+data+"</a>");
})
})
</script>
</html>
php file(process.php)
<?php
if(isset($_POST["createVal"])){
$name=$_POST["createVal"];
echo $name;
}
?>
<?php
echo $name;
?>
change
$("#result").html("<a href='process.php'>"+data+"</a>");
to
$("#result").html("<a href='process.php?createVal="+data+"'>"+data+"</a>");
and
process.php
if(isset($_REQUEST["createVal"])){
$name=$_REQUEST["createVal"];
echo $name;
}
Use this Html Code:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>
<body>
<input type="text" id="userinput">
<div id="result"> </div>
</body>
<script>
$("input").keyup(function(){
var input=$("input").val();
$.ajax({
type: "POST",
url: "http://localhost/stackoverflow/process.php",
data: {'createVal': input},
success: function(data){
$("#result").html("<a href='http://localhost/stackoverflow/process.php?createVal="+data+"'>"+data+"</a>");
}
});
});
</script>
</html>
PHP Code:
<?php
if(!empty($_REQUEST['createVal']) || !empty($_GET['createVal'])){
$name = $_REQUEST['createVal'];
echo $name;
}elseif(!empty($_GET['createVal'])){
$name = $_GET['createVal'];
echo $name;
}
return 1;
?>
I have run and checked this too.
localhost: if you are running this code on localhost
stackoverflow: is the folder name, if you have any folder in localhost for it so replace the name by this.
This is strange. This code works well when I open it directly --but if I run the web page that precedes it it doesn't. This code is a confirmation page that I want to jump in a checkout process -I have all my fields, and I don't need to ask the user again for confirmation, so I send her to checkout directly, sending all the values of the fields.
Again, when I arrive to this page from another form post it doesn't work --despite no other field or object sent to this page is called like the form--. Any ideas?
<?php include 'security.php' ?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Secure Acceptance - Payment Form</title>
<link rel="stylesheet" type="text/css" href="payment.css"/>
</head>
<body>
<?php
foreach($_REQUEST as $name => $value) {
$params[$name] = $value;
}
?>
<p>Redirecting to Secure Server...</p>
<form action="https://testsecureacceptance.cybersource.com/pay" method="post" id="formulario" name="formulario" />
<?php
foreach($params as $name => $value) {
echo "<input type=\"hidden\" id=\"" . $name . "\" name=\"" . $name . "\" value=\"" . $value . "\"/>\n";
}
echo "<input type=\"hidden\" id=\"signature\" name=\"signature\" value=\"" . sign($params) . "\"/>\n";
?>
<input type="submit" id="boton" name="boton" value="Ir a Checkout >>"/>
</form>
<script type = "text/javascript">
document.getElementById('formulario').submit();
</script>
</body>
</html>
You can use the JavaScript setTimeout method to delay the submit function while page loads or you can also use jQuery to wait until documents load and after that you can fire form submit function:
JS:
setTimeout(function(){
document.getElementById('formulario').submit();
},1000);
jQuery:
$(document).ready(function(){
$('#formulario').submit();
})
This is my html code.
<!DOCTYPE HTML>
<?php
$php_var = "Hello world from PHP";
?>
<html style="margin-top:-8px; margin-left:-8px;">
<head>
<meta charset="utf-8">
<title>Pure-Convert</title>
<script src="jquery.js"></script>
<link rel="stylesheet" type="text/css" href="calchome.css">
<script src="4func.js" type="text/javascript"></script>
<script src="converter.js" type="text/javascript"></script>
<script>
var js_var = <?php echo json_encode($php_var); ?>;
document.write(js_var);
</script>
</head>
<body >
<form action="cool.php" method="post">
<input name ="username" placeholder="Name">
<input name= "comment" placeholder="Make your mind heard..." />
<input type ="submit">
</form>
</body>
</html>
Basically what I want to happen is I want $php_var to be converted to javascript. This what I have attempted. Can someone help me accomplish this?
<script>
var js_var = <?php echo json_encode($php_var); ?>;
document.write(js_var);
</script>
Try
<script>
var js_var = "<?php echo $php_var; ?>";
document.write(js_var);
</script>
You don't need document.write(js_var);. What it does is writes that value to the DOM/HTML, possibly messing up everything (depends on the value).
<? php echo( '<script>var my_var=' . $my_value . ';</script>'); ?>
// In further js:
console.log( my_var );