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.
Related
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>
I am trying to add math formula in ckeditor, from editor should collect entire information(including formula) display on the same page in different div.
When I do with the following approach it is displaying math formula as text(not formatting as formula).
<html>
<head>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML"></script>
<script>
function onSubmit(){
var data = CKEDITOR.instances.editor1.getData()
document.getElementById("show").innerHTML=data
}
</script>
</head>
<body>
<form action="#" >
<textarea rows="20" cols="70" class="ckeditor" id="editor1" name="test1">
</textarea>
<input type="button" value="save" onclick="onSubmit()" >
</form>
<div id="show" id='ed2'></div>
<script>
CKEDITOR.replace( 'editor1', {
extraPlugins: 'mathjax',
mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
height: 320
} );
if ( CKEDITOR.env.ie && CKEDITOR.env.version == 8 ) {
document.getElementById( 'ie8-warning' ).className = 'tip alert';
}
</script>
</body>
</html>
It is faster and easier to use Katex rather than Mathjax for math formula rendering in Html.
For reference(Comparison between katex and latex ) :
https://www.intmath.com/cg5/katex-mathjax-comparison.php
So the solution by using katex will be :
<!DOCTYPE html>
<head>
<script src="https://cdn.ckeditor.com/4.8.0/full-all/ckeditor.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/katex.min.css" integrity="sha384-9tPv11A+glH/on/wEu99NVwDPwkMQESOocs/ZGXPoIiLE8MU/qkqUcZ3zzL+6DuH"
crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/katex.min.js" integrity="sha384-U8Vrjwb8fuHMt6ewaCy8uqeUXv4oitYACKdB0VziCerzt011iQ/0TqlSlv8MReCm"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/katex#0.10.0-beta/dist/contrib/auto-render.min.js" integrity="sha384-aGfk5kvhIq5x1x5YdvCp4upKZYnA8ckafviDpmWEKp4afOZEqOli7gqSnh8I6enH"
crossorigin="anonymous"></script>
<script>
function onSubmit() {
var data = CKEDITOR.instances.editor1.getData()
document.getElementById("show").innerHTML = data
domChanged();
}
</script>
</head>
<body>
<form action="#">
<textarea rows="20" cols="70" class="ckeditor" id="editor1" name="test1">
</textarea>
<input type="button" value="save" onclick="onSubmit()">
</form>
<div id="show" id='ed2'></div>
<script>
CKEDITOR.replace('editor1', {
extraPlugins: 'mathjax',
mathJaxLib: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-AMS_HTML',
height: 320
});
if (CKEDITOR.env.ie && CKEDITOR.env.version == 8) {
document.getElementById('ie8-warning').className = 'tip alert';
}
function domChanged() {
renderMathInElement(document.body);
}
</script>
</body>
</html>
Good luck !!!
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 tried to write an AJAX-type form with Twitter Bootstrap, but the updated div element disappears. Can I fix that?
<!DOCTYPE html>
<html>
<head><link href="bootstrap.min.css" rel="stylesheet" media="screen"></head>
<script>
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud";}
</script>
<body>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap.min.js"></script>
<div id="cloud"></div>
<form onsubmit="wordCloud()">
<fieldset>
<button type="submit" class="btn">Submit</button>
</fieldset>
</form></body>
</html>
Change as follows.
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud";}
replace
function wordCloud(){document.getElementById("cloud").innerHTML = "WordCloud"; return false; }
and
<form onsubmit="wordCloud()">
replace
<form onsubmit="return wordCloud()">
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.. :-)