In CKEditor, Not able to upload the Images.? - javascript

i am using CKEditor (3.62), while uploading Images from image button the image is not loading in the CKEditor. How to solve this problem.?

am integrated ckfinder in ckeditor. while i uploading the images its getting script error, i.e., in ckfinder.html. i dont know how to setup the ckfinder in ckeditor. how to solve the issues.

There might be some problem in giving paths.
Try doing following steps.
1. Download CKEditor and CKFinder. Integrated code may be available on http://dwij.co.in/ckeditor-ckfinder-integration-using-php/
2. Put extracted code of both in one folder inside xampp as below.
3. Create index file (index.html) which will be containing the editor as below code.
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
</head>
<body>
<h1>CKEditor CKFinder Integration using PHP</h1>
<textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
CKFinder.setupCKEditor( editor, '../' );
</script>
</body>
</html>
so your folder structure will be something like this:
htdocs
|_integrated
|_ckeditor
| |_config.js
| |_...
|_ckfinder
| |_config.php
| |_...
|_uploads
|_index.html
Now open file config.php inside ckfinder & make following changes:
function CheckAuthentication() {
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
return true; // not good option though; go for sessions
}
$baseUrl = 'http://localhost/integrated/uploads/';
$enabled = true;
$config['SecureImageUploads'] = false;
$config['ChmodFolders'] = 0777 ;
Now open url http://localhost/integrated/ and try uploading image.

Related

Javascript cdn resource fail

I follow the instruction, but error report like this
my code:
<html>
<head>
<!-- Load TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow/tfjs"></script>
<!-- Load Posenet -->
<script src="https://cdn.jsdelivr.net/npm/#tensorflow-models/posenet"></script>
</head>
<body>
<img id='cat' src='./pose/images/aa_090.jpg'/>
</body>
<!-- Place your code in the script tag below. You can also use an external .js file -->
<script>
var flipHorizontal = false;
var imageElement = document.getElementById('cat');
posenet.load().then(function(net) {
const pose = net.estimateSinglePose(imageElement, {
flipHorizontal: true
});
return pose;
}).then(function(pose){
console.log(pose);
})
</script>
which is exactly the same as
https://github.com/tensorflow/tfjs-models/tree/master/posenet
Plz do me a favor
I tried the same code snippet and it worked for me without any issue, the cdn also seems to be working when I checked, so the problem could be a few things:
Your image does not exist at the given location
There was some network issue when you attempted this
There is an issue fetching the image locally due to cors : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp
Incase the issue persists try downloading the CDN's and the image and host it by following,
In the directory of your files run: python -m SimpleHTTPServer 8000
Go to localhost:8000/yourfile.html
Revert back in case of any issues

My HTML file won't link with my Javascript file

I am trying to complete an exercise for one of my courses and my HTML file won't link with my Javascript file. I put the link between my HTML file and my Javascript file in the body of my HTML file but the files still won't connect. When I test this code in Microsoft Edge, the buttons simply do not work. Anybody know what the problem is?
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>HTML Page</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body>
<button onclick = "startWorker()">Start Worker</button>
<button onclick = "stopWorker()">Stop Worker</button>
<ul id = "output">
</ul>
<script type = "text/javascript" src = "/js/script.js"></script>
</body>
</html>
Javascript
var worker;
function startWorker(){
worker = new Worker ("js/mod4_worker.js");
worker.onmessage = function(event){
document.getElementById("output").innerHTML += '<li>' + event.data + '</li>';
};
}
function stopWorker(){
worker.terminate();
}
Files
So, I would try my comments :
Change the script.js path to : "../js/script.js"
Change the worker passed script to "../js/mod4_worker.js"
As GGG said, using a path starting with "/", a slash, use the path from root. The full path is either :
Windows : file://DriveLetter:\REST_OF_PATH
Unix/Linux/OSX : file:///REST_OF_PATH
WebServer : http://domain/REST_OF_PATH
If the structure is from /webapp/ :
html/index.html
js/script.js
Accessing script.js from index.html needs to go back one folder (..) and then set the path seen here (js/script.js) which gives (../js/script.js) OR using full path (/webapp/js/script.js) which I wouldn't recommend because if you change "webapp" directory of location or URL (on WebServer)
Remove the / from your src in the index.html. So it should be
src = "js/script.js"
Why? When you begin the src value with a /, that means you're referring to an absolute path (in other words, it starts the path from your drive's root). My devtools shows it as
file:///C:/js/script.js
By removing the first / in your src, you're now doing relative pathing, and it will look in the correct place.
Permissions & File locations
(Stumbled on this Q and here's the only way I solved it...)
For me, I found it was a permissions and file location issue...
I'm running a local webserver on Ubuntu 18 Desktop, working with dev from a local folder linked to the web directory: /var/www/html/MY_DEV -> /home/me/MY_DEV. So, the www-data user couldn't actually "own" them like it needed to.
I use this setup just fine for PHP, HTML, and CSS just fine. But, if I include a javascript file via src="", no matter what I do, it doesn't work.
The only way I could get it to work on my desktop is if BOTH the served file (somefile.php or somefile.html) are physically at /var/www/html/...
And, of course accessing them at localhost/...
And, of course owning them obsessively with sudo chown -R www-data:www-data /var/www/html

Html code to Png image

I made a web application which allow the user to create an image dynamically in JavaScript.
It use jQuery to allow the user to place div, resize them and drag them into a <div> Container.
When the user finished to place all div, he can press the "Generate" button which send the <div> Container outerHTML code into a local database.
Then the user can use another script, in php, and past in parameter the id in the database of which render he want to display, then the php script create a page using the code in the database.
My problem is now I want to take the code of this generated html page, then convert it into a png image.
I looked at some other posts and found something interesting : Phantom.js
But what I tried doesn't seem to work. Here is my code :
<html>
<head>
<title>Test</title>
<LINK rel='stylesheet' type='text/css' href='style.css'>
<script type='text/javascript' src='jquery/jquery.js'></script>
<script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>
</head>
<body>
<script>
var page = require('webpage').create();
page.open('http://10.237.35.10/maxime/affichage.php?afficheur=0', function() {
page.render('affichageTest.png');
phantom.exit();
});
</script>
</body>
</html>
So we have the database with the div outerHTML code contained at the id '0'.
"affichage.php" take in parameter a variable "afficheur" then it ask the database to get the code from this variable. For example, afficheur=0 will return the div code contained in the database at the id=0.
When I go to "http://10.237.35.10/maxime/affichage.php?afficheur=0" I have a html page with the render I want. But when I try to run the script I'd posted higher, I haven't any "affichageTest.png" rendered in my folder.
What do I have to do? Do I have to import anything else to run Phantom.js? Or maybe I need to add something to my code?
PhantomJS is a binary not a javascript librarie (it is actually a headless webkit), I can not test it here atm, but here the main idea :
First download the PhantomJS binary, upload it somewhere and make it executable (chmod +x).
Create a file named test.js with this code below :
var page = require('webpage').create();
page.open('http://10.237.35.10/maxime/affichage.php?afficheur=0', function() {
page.render('affichageTest.png');
phantom.exit();
});
Create a file named display.php with this code below :
<?php
$file_path = exec('/path/to/phantomjs test.js');
?>
<html>
<head>
<title>Test</title>
<LINK rel='stylesheet' type='text/css' href='style.css'>
<script type='text/javascript' src='jquery/jquery.js'></script>
<script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>
</head>
<body>
<img src="<?php $file_path ?>" alt="test">
</body>
</html>
Visit the display.php page to see the screen capture
If you need a full script solution, as you have said in comments, your only hope is Image Magic php extension. This in conjunction with HTML2PDF can be used to device html to image conversion for non-complex markup.
The trick is to create a pdf out of html first:
$html2pdf = new HTML2PDF('P', 'A4');
$html2pdf->writeHTML($html_content);
$file = $html2pdf->Output('temp.pdf','F');
Now you can get this pdf file and convert it image using Image Magic
$im = new imagick('temp.pdf');
$im->setImageFormat( "jpg" );
$img_name = time().'.jpg';
$im->setSize(800,600);
$im->writeImage($img_name);
$im->clear();
$im->destroy();
Installation of Image Magic extensions and support libraries could be painstaking. Please read the installation notes carefully.
The complexity of the html markup which could be converted is limited. You can do a fairly good job. But you can't call it a day if you need to convert ANY html.

CKEditor does not work in a custom folder

I have my root folder htdocs/_ and my custom CKEditor folder htdocs/_/ckeditor where all my CKEditor files are in. But when I run CKEditor it looks for all the CKEditor files in htdocs/_
<textarea name='post_editor' id='post_editor' rows='10' cols='80'></textarea>
<script type='text/javascript'>
CKEDITOR.replace('post_editor');
</script>
It works for me with the underscore in URL, so I don't know what may be wrong in your case. Did you e.g. changed the name of ckeditor.js file?
As a workaround, try setting CKEDITOR_BASEPATH. You can find more in the Specifying the Editor Path guide.
<script>
var CKEDITOR_BASEPATH = 'htdocs/_/ckeditor/';
</script>
<script src="htdocs/_/ckeditor/ckeditor.js"></script>

CKFinder integration in CKEditor and basepath?

I have the following integration CKEditor procedure:
window.onload = function(){
var editor = CKEDITOR.replace( 'ckeditortextarea' );
CKEDITOR.config.resize_enabled = false;
CKFinder.setupCKEditor( editor, 'libraries/ckfinder/' );
};
I have my folders structured as such:
there is an WAMP alias named 'webx'.
CKEDITOR: webx/mysite/libraries/ckeditor/
CKFINDER: webx/mysite/libraries/ckfinder/
INDEX: webx/mysite/index.php
The integration procedure is within the 'head' tags.
I have not changed any configuration files within the CK packages.
The problem is that the integration is not successful, the upload/browse not being available in CKEditor. My questions are:
What am I doing wrong?
What does basepath really represent?
The basepath should have been set '../ckfinder/' in order with my requirements.
The browse/update sections appear now.
The basepath is referenced from within the ckfinder directory. So either http://domain/.../ckfinder/ or ../ckfinder are correct.
Try following steps. I got it by this way.
1. Download CKEditor and CKFinder. Integrated code may be available on http://dwij.co.in/ckeditor-ckfinder-integration-using-php/
2. Put extracted code of both in one folder inside xampp as below.
3. Create index file (index.html) which will be containing the editor as below code.
<html>
<head>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
</head>
<body>
<h1>CKEditor CKFinder Integration using PHP</h1>
<textarea id="editor1" name="editor1" rows="10" cols="80"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'editor1', {
filebrowserBrowseUrl : 'ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : 'ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : 'ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : 'ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
CKFinder.setupCKEditor( editor, '../' );
</script>
</body>
</html>
so your folder structure will be something like this:
htdocs
|_integrated
|_ckeditor
| |_config.js
| |_...
|_ckfinder
| |_config.php
| |_...
|_uploads
|_index.html
Now open file config.php inside ckfinder & make following changes:
function CheckAuthentication() {
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
return true; // not good option though; go for sessions
}
$baseUrl = 'http://localhost/integrated/uploads/';
$enabled = true;
$config['SecureImageUploads'] = false;
$config['ChmodFolders'] = 0777 ;
Now open url http://localhost/integrated/ and try uploading image.

Categories