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
Related
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';
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 am diving in the deep end of this magic world of HTML. I have the CKEditor woring and myFunction produces the alert. I need to get the HTML of the text in the editor.
I got this from another post:
CKEDITOR.instances.textarea.on( 'instanceReady', function( instanceReadyEventObj )
{
var editorInstanceData = CKEDITOR.instances.textarea.getData();
alert( editorInstanceData );
});
I could not comment or reply to the post as I don't have enough points so I have to ask a duplicate.
I have the alert working and pasted the code in myFunction but I get the error in the console Uncaught TypeError: Cannot call method 'on' of undefined.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var htmldata = CKEDITOR.instances.Editor.document.getBody().getHtml();
alert(htmldata);
}
</script>
<title>A Simple Page with CKEditor</title>
<!-- Make sure the path to CKEditor is correct. -->
<script src="http://www.wilsea.com/ckeditor/ckeditor.js"></script>
</head>
<body>
<form>
<button onclick="myFunction()">Click me</button>
<textarea id="editor1" name="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>
MrWarby
<!DOCTYPE html>
<html>
<head>
<script type="text/javaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://www.wilsea.com/ckeditor/ckeditor.js"></script>
</head>
<body>
<textarea id="editor1" name="editor1" rows="10" cols="80">
This is my textarea to be replaced with CKEditor
</textarea>
<script>
function myFunction()
{
alert('test');
CKEDITOR.instances.textarea.on( 'instanceReady', function( instanceReadyEventObj )
{
var editorInstanceData = CKEDITOR.instances.textarea.getData();
alert( editorInstanceData );
});
}
CKEDITOR.replace( 'editor1' );
</script>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
I've tried moving into different place but I still get the same error.
test page is at http://www.wilsea.com/ckeditor/testckeditor.html
MrWarby.
Before your SCRIPT in HEAD add two more lines:
<script type="text/javaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="/ckeditor/ckeditor.js"></script>
But change path to CkEditor script.
I need fadeout a div in my page using prototype. How can I fadeout following jquery code in prototype?
$('.exercise-main .content .loading-failure').fadeOut(function(){
//my code
}
I think you will need to use script.aculo.us (which is an excellent add-on to the fantastic prototype.js) so as to achieve the Fade effect.
Basic Syntax
new Effect.Fade('id_of_element', [options]);
OR
new Effect.Fade(element, [options]);
Complete Code.
<html>
<head>
<title>script.aculo.us examples</title>
<script type="text/javascript"
src="/javascript/prototype.js"></script>
<script type="text/javascript"
src="/javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript">
function FadeEffect(element){
new Effect.Fade(element,
{ duration:1});
}
function ShowEffect(element){
new Effect.Appear(element,
{duration:1, from:1.0, to:1.0});
}
</script>
</head>
<body>
<div onclick="FadeEffect('hideshow')">
Click me to fade out the image
</div>
<br />
<div onclick="ShowEffect('hideshow')">
Click me to display the image once again
</div>
<br />
<div id="hideshow">
<img src="/images/scriptaculous.gif" alt="script.aculo.us" />
</div>
</body>
</html>
Tutorial link - http://www.tutorialspoint.com/script.aculo.us/scriptaculous_fade_effect.htm
I myself have used prototype.js and this add-on very heavily so just in case you face any issue, feel free to comment.. :-)