I upgraded to CKeditor4 from version 3. Sadly my file and image upload integration does not work anymore.
CKeditor should add some url params as described here: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_browser_api.html
CKEditor automatically sends some additional arguments to the file
manager: CKEditor=editor1&CKEditorFuncNum=1&langCode=en
That doesn't happen with version 4.
Here is a fiddle with instructions to reproduce:
https://jsfiddle.net/5wzh9a08/1/
<html lang="de">
<head>
<meta charset="utf-8" />
<script src="https://cdn.ckeditor.com/4.11.2/standard/ckeditor.js"></script>
</head>
<body>
<h1>
CKeditor 4 upload problem
</h1>
<p>
Problem: CKeditor 4 does not append "CKEditor=editor1&CKEditorFuncNum=1&langCode=en" to the upload URL.
</p>
<p>
How to reproduce:
</p>
<ul>
<li>Open web developer console in browser</li>
<li>Click (and enable) network tab</li>
<li>In CKeditor: click on image icon</li>
<li>Click "upload", select a file and click "Send to server"</li>
<li>Watch the request in web developer console: the necessary url params are not added.</li>
</ul>
<p>
Reference: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_browser_api.html
</p>
<textarea name="editor1" id="editor1" rows="8" cols="80">
test 123
</textarea>
<script type="text/javascript">
CKEDITOR.replace( 'editor1', {
filebrowserImageUploadUrl: '/upload.html',
});
</script>
</body>
</html>
Help appreciated!
Problem solved.
CKEditor4 needs the option
config.filebrowserUploadMethod = 'form';
Related
I just installed ckeditor on my server but the wysiwyg editor doesn't replace the textarea. It's something basic and I don't understand why.
EDIT : apparantly, the problem is linked with the language of the browser. English brwoser are ok, french not ! Any thought ?
Here is my page: http://cliniquelactuel.com/testckeditor/samples/
Here is the code :
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script src="http://cliniquelactuel.com/testckeditor/ckeditor.js"></script>
</head>
<body id="main">
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
CKEDITOR.replace('editor1');
</script>
</form>
</body>
</html>
Thanks.
Can anyone give me an example about to change to italian ReCaptcha questions and answers?
I found the following code:
<script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl=it" />
But no idea where to put it and all attempts to place it on my contact form failed.
It always speaks english only.
Thanks in advance
Script tags usually go in the head section, between the <head> and </head> tags, or just before the body closing tag, </body>.
However, you also need to add a tag in the form for the ReCaptcha to be show.
This code will display the ReCaptcha in Italian:
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js?hl=it" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
You need to replace the data-sitekey attribute with your own API sitekey.
I just downloaded CKEditor to use the WYSIWYG editor on my website, but this code:
<div id="editor">
This is a test
</div>
<script>
CKEDITOR.replace( 'editor' );
</script>
Or this code:
<textarea id="editor">
this is a test
</textarea>
<script>
CKEDITOR.replace( 'editor' );
</script>
Is only making the div and the textarea hide, no WYSIWYG editor is being shown.
The sample page is working and for my page the CSS and JS are both loaded.
What can be the problem?
Edit:
When I use their example code (stated here: http://docs.ckeditor.com/#!/guide/dev_installation)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="../ckeditor.js"></script>
</head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor.
</textarea>
<script>
// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
It has the same behaviour (correct JS file is being loaded).
Check first that you have no error on javascript.
Check with firebug.
I added all the important files and It's working now
I have a maybe-noob question for those who know how works jQuery mobile in its core :)
I see on some websites an ajax-like navigation, but with an URL completely changed after load (I mean, no hash at the end).
For example : http://m.wengo.fr/accueil
=> click on any link, you'll see a loader, and after a little animation the new page is loaded ; but the URL has no hash, it's a real new URL.
Is the page really fully reloaded after a first ajax-load behind ?
I don't see how this magic is did on their framework...
Thanks ;)
--
Damien
This is a rather easy implementation.
Page changes should be handled programatically with changePage function (jQuery Mobile 1.4 and below) or pageContainer change (jQuery Mobile 1.4 and above).
Solution:
$.mobile.changePage("second.html", { transition: "slideup", changeHash: false });
What you need is changeHash set to false.
Example:
index.html
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#open-page', function(){
alert('sdfsd');
$.mobile.changePage("second.html", { transition: "slideup", changeHash: false });
});
});
</script>
</head>
<body>
<div data-role="page" id="index" data-theme="a" >
<div data-role="header">
<h3>
First Page
</h3>
<a class="ui-btn-right" id="open-page">Next</a>
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
second.html
<div data-role="page" id="second" data-theme="a" >
<div data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
Update:
Information you need has nothing to do with jQuery Mobile.
I showed you one solution which jQuery Mobile can actually do. But this solution will permanently show original HTML file name. This is because initial HTML page is loaded into the DOM and every other page is loaded into it. jQuery Mobile thus have full control over link name.
But this is not what mentioned page is using. It is using some kind of rewrite engine. By default, rewrite engine maps a URL to a filesystem path. However, it can also be used to redirect one URL to another URL (which is done here), or to invoke an internal proxy fetch. They are probably using Apache web server with mod_rewrite module turned on.
I'm currently building a page with jQuery mobile.
I need to load some custon JavaScript on one page, so I found the pageInit function.
Here's a short example of what i'm using:
page1.html:
<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>
<div data-role="page" id="page1">
<div data-role="header">
<h1>Page 1 Title</h1>
</div>
<div data-role="content">
go to page2
<p>Page 1 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page 1 Footer</h4>
</div>
</div>
page2.html:
<!doctype html>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>page1 | test page for jquery mobile</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="js.js"></script>
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page 2 Title</h1>
</div>
<div data-role="content">
go to page1
<p id="addstuff">Page 2 content goes here.</p>
</div>
<div data-role="footer">
<h4>Page 2 Footer</h4>
</div>
</div>
js.js
$(document).delegate('#page2', 'pageinit', function() {
$('<div />', {
html: 'Some text that was added via jQuery'
}).appendTo('#addstuff');
});
So I need to execute some JavaScript on page2.html. It actually works great (the div was created and you see the text). But when I'm clicking on a link to change the page, you can see, that jQuery is calling a hashtag in the URL first. So it looks like:
example.org/page1.html#/page2.html
when I clicked on the link on page1.html (just for a few milliseconds maybe) and then it redirects to
example.org/page2.html
I guess it's because of the id .. but I need this one for the pageInit (as far as I know).
Is this behavior normal ? Or am I doing something wrong. Maybe there's even a command to not call the hash tag.
Here you go:
It's important to note that if you are linking from a mobile page that was loaded via AJAX to a page that contains multiple internal pages, you need to add a rel="external" or data-ajax="false" to the link. This tells the framework to do a full page reload to clear out the AJAX hash in the URL. This is critical because AJAX pages use the hash (#) to track the AJAX history, while multiple internal pages use the hash to indicate internal pages so there will be conflicts in the hash between these two modes.
For example, a link to a page containing multiple internal pages would
look like this:
< a href="multipage.html" rel="external">Multi-page link< /a>
Src: http://view.jquerymobile.com/1.3.0/#Linkingwithinamulti-pagedocument