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.
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';
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
Hello guys I'm trying to implement the wmd editor like this on stackoverflow but I can't show the buttons of the editor only the textarea appears.. here is my codes.. Am I doing something wrong here? Or missing something? Thanks hopefully you guys could help me.
<!DOCTYPE html>
<head>
<link href="#Url.Content("~/Content/wmd.css")" rel="stylesheet" type="text/css" />
<script src="#Url.Content("~/Scripts/showdown.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/wmd.js")" type="text/javascript"></script>
<body>
<div id="wmd-button-bar" class="wmd-panel"></div>
<textarea id="wmd-input" class="wmd-panel"></textarea>
<div id="wmd-preview" class="wmd-panel"></div>
<div id="wmd-output" class="wmd-panel"></div>
</head>
</body>
IE is a mystery to me. My web app is working on Safari, Firefox, Chrome, even iPhones and iPads, but when it comes to IE, I simply can't comprehend how hard it is to comply to the given standards. Anyway enough ranting.
My Twitter bootstrap buttons are completely ignored in IE8. Absolutely nothing happens when I click on any button. I couldnt find anything on google, has anyone come across this?
Many Thanks,
#Kave You uploaded only plain html to jsfiddle - which includes links to js which doesn't exists (so its kind of hard to debug when js is not attached)..
Try using a href instead of so many buttons.. twitter bootsrap supports styling of links to look like buttons, example is at first page of twitter bootstrap like this: (source copied & bit of modified):
<a class="btn btn-success btn-large" href="http://twitter.github.com/bootstrap/base-css.html">Example link with button styles</a>
Edit: Alternatively, full example with twitter bootstrap (modified from demo templates - link with button styles inside a hero unit) - copy & paste to file, save as testing.html and open with browser - enjoy!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap, from Twitter</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Le styles -->
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
</style>
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons -->
<link rel="shortcut icon" href="http://getbootstrap.com/2.3.2/assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="http://getbootstrap.com/2.3.2/assets/ico/apple-touch-icon-57-precomposed.png">
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="span12">
<div class="hero-unit">
<h1>Hello, world!</h1>
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn btn-success btn-large" onclick="alert('its working :)')">Learn more »</a></p>
</div>
</div>
</div>
<hr>
<footer>
<p>© Company 2012</p>
</footer>
</div><!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://getbootstrap.com/2.3.2/assets/js/jquery.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-transition.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-alert.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-modal.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-dropdown.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tab.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-tooltip.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-popover.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-button.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-collapse.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-carousel.js"></script>
<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap-typeahead.js"></script>
</body>
</html>
IF still not working, make sure when you restart IE that you click "Allow blocked content" if pop-up for asking it is shown.
Allow blocked content referes to javascript content,the buttons are purelly CSS code,the problem is that IE 6....8 don't have a very good support for CSS3.
If you look on the getbootstrao.com website you dont see them using their own buttons :))
the best solution is create buttons using simple CSS,if someone using IE is browsing your website they might not see the border-radius effect but they will find actual square but working buttons.
I had the same problem and solved it using this jQuery/js:
<a href="http://www.example.com">
<button class="btn"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Button text</button>
</a>
<!--[if lt IE 9]>
<script>
$(".btn").click(function() {
var t = $(this).parent();
window.location.href = t.attr("href");
});
</script>
<!--[if lt IE 9]>