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.
Related
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
I am currently trying to use photobooth.js to make a simple photobooth page. I know very little about JS and webpages, but it seemed the best solution for what I have in mind. My problem is that when I load the script (no dependencies, according to the website) and try to use it in my basic app, nothing happens, so obviously I'm not calling the script properly. To make sure the script is loaded, I added a ShowAlert() function to photobooth.js that I use in an onload="ShowAlert()" statement, which indeed triggers the alert.
So adding myPhotobooth = new Photobooth( document.getElementById( "container" ) ); to my page does not work as advertised here (or more likely I don't understand how to use that)
Would someone please explain what I am missing?
The modified photobooth_min.js source:
/**
*
* Photobooth.js version 0.7
*CUSTOM DEBUG CODE
*/
function ShowAlert() {
alert('show this message');
}
/**
*Rest of photobooth_min.js code, unmodified.
*/
my index.html page:
<!DOCTYPE html>
<html>
<head>
<title>photobooth</title>
</head>
<body>
<div id="example"></div>
<script type="text/javascript" src="photobooth_min.js" onload="ShowAlert()"></script>
<script>
myPhotobooth = new Photobooth( document.getElementById( "example" ) );
</script>
</body>
</html>
my directory structure:
when you call external script files, you shouldn't have anything inside...
<script type="text/javascript" src="WebContent/photobooth_min.js"></script>
<script>
var myPhotobooth = new Photobooth( document.getElementById( "example" ) );
</script>
the other thing is the path to the file, in this case, and assuming you have this HTML in a file called index.html the structure you are setting is:
|--- index.html
|--- WebContent (folder)
|--- photobooth_min.js
to start, put all in the same folder like:
|-- index.html
|-- photobooth_min.js
and reference the script only as
<script type="text/javascript" src="photobooth_min.js"></script>
P.S. remember that the photobooth script will never work on IE and Safari ... the 2 most used browsers in both Windows an Mac platforms...
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>
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.
I want to use aloha editor on my website and i downloaded it from [http://aloha-editor.org/].Now i am totally confused because the downloaded bundle contain lots of files.
I pick up aloha.js and aloha.css and added the following script
$(document).ready(function () {
Aloha.ready(function () {
var $ = Aloha.jQuery;
$('.editable').aloha();
})
});
but its not working.Then i tried
<script src="http://cdn.aloha-editor.org/current/lib/aloha.js"
data-aloha-plugins="common/format,
common/list,
common/link,
common/highlighteditables">
</script>
<!-- load the Aloha Editor CSS styles -->
<link href="http://cdn.aloha-editor.org/current/css/aloha.css" type="text/css" />
<!-- make all elements with class="editable" editable with Aloha Editor -->
<script type="text/javascript">
Aloha.ready( function() {
var $ = Aloha.jQuery;
$('.editable').aloha();
});
</script>
It works fine. But i want to use my downloaded bundle, Can anyone tell me how can i manage all the files & folders (for ex- where i have to put image folder and other folder..) so it starts working?
Copy all the files in to the root directory which includes plugins,lib,img,css and refer above described guide.
See http://www.alohaeditor.org/guides/using_aloha.html.
Save the files in /javascripts in the root directory of your web server, such as where localhost is run.