Background: I am building a blog application in which the blog content textarea field is to be replaced with CKEditor.
Issue: After i load the web page in Chrome, i get the below error with the text area disabled.
"Uncaught TypeError: Cannot read property 'getComputedStyle' of undefined"
Code:
Javascript:
$(document).ready(function() {
CKEDITOR.addCss('body {font-family: "Roboto", "Helvetica", "Arial", sans-serif;}');
var contentEditor = CKEDITOR.replace( 'blogContent' );
});
HTML:
<body>
<textarea type="text" rows= "10" name="blogContent" id="blogContent"
maxlength="2000"></textarea>
<script src="//cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>
<script src="/js/blog-form.js"></script>
</body>
Versions:
Chrome: Version 66.0.3359.139 (Official Build) (64-bit)
CKEditor: 4.9.2
I am looking for help to resolve this issue. This issues doesn't come up in other browsers - Edge and Firefox.
Run this code, it's working on chrome:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdn.ckeditor.com/4.9.2/standard/ckeditor.js"></script>
<script>
$(document).ready(function(){
CKEDITOR.addCss('body {font-family: "Roboto", "Helvetica", "Arial", sans-serif;}');
var contentEditor = CKEDITOR.replace( 'blogContent' );
});
</script>
</head>
<body>
<textarea type="text" rows= "10" name="blogContent" id="blogContent"
maxlength="2000"></textarea>
</body>
</html>
Related
CKEditor transforms the follow html code :
<a><h1>H1</h1></a>
to
<h1><a>H1</a></h1>
How to prevent CkEditor doing that change ?
My configuration :
allowedContent : true;
Snippet:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="https://cdn.ckeditor.com/4.5.9/standard/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"><h1>Title</h1></textarea>
<script>
CKEDITOR.replace( 'editor1' , {
uiColor: '#ff0000',
allowedContent: true
});
</script>
</body>
</html>
I'm afraid the answer is that there's no solution. Block level links (like a wrapping h1) are not supported by ckeditor, at last not yet. You can check this dev ticket for updates.
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've been fighting with this for a while now and have searched extensively to no avail. I grabbed a link someone posted here in response to my same question. enter link description here I've copied the code to my editor, placed the stylesheet inline, linked all the scripts correctly I think...
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/additional-methods.js"</script>
<style> #docs{
display:block;
postion:fixed;
bottom:0;
right:0;
}
</style>
</head>
<body>
<form id="form_validation_reg_generate_user">
<input type="text" name="userPassword" id="userPassword" />
<br/>
<input type="submit" />
</form>
<a id="docs" href="http://docs.jquery.com/Plugins/Validation" target="_blank">Validation Documentation</a>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$('form#form_validation_reg_generate_user').validate({
rules: {
userPassword: {
minlength: 5
}
},
submitHandler: function (form) { // for demo
alert('valid form submission'); // for demo
return false; //form demo
}
});
});
</script>
</body>
No validation occurs... I have a feeling I'm missing something obvious. It was working in a separate page when I was only validating required fields. Since adding the minlength... nothing.
I'm doing a test with your code and it seems to work perfectly. Check if your jquery.validate.min.js path is correct and if you can access properly to every script from your system.
Also you can use your browser development tools to check if you have exceptions.
The jquery.validate.iin.js version I used in the text is from this website. Maybe you have an older script?
I've created a PHP file named maps.php that contains a simple Google Maps API that works on the iPad's default browser.
But when I call it using Ajax, the page loads itself but not the map. If I open the link in a desktop or mobile browser it works fine.
You can show google maps by accessing google's javascript api.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=SET_TO_TRUE_OR_FALSE">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Or you can load any php page directly in webView by using window.location="http://www.mourady.me/alhokair/iphone/maps.php" javascript method, as your php page contain google map in canvas tag, you can not load that in div through ajax call, better way used iframe tag to the job.
<html>
<body onload="bodyload()">
<button onclick="bodyload()">Ajax call</button>
<iframe id="mapDiv" height=500px width=700px src="http://www.mourady.me/alhokair/iphone/maps.php"></iframe>
</body>
</html>
I have the following code:
<html>
<head>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
FB.Event.subscribe('edge.create',
function(response) {
alert('TEST');
}
);
</script>
</head>
<body>
<div id='fb-root'></div>
<fb:like send="true" width="450" show_faces="true" />
</body>
</html>
When I click on like, the alert is not showing up. I have tried the same code before and it seemed to work. Do you see something wrong? I don't see any errors in JS console...I am in localhost.
EDIT:
Here you can see it live: http://jsfiddle.net/jCE5K/
Per http://developers.facebook.com/docs/reference/plugins/like/, you need to have a fb-root DIV tag.