I have used CKEditor a year now and everything has worked as it should.
Now I need to change the text in the textarea using javascript.
I have created an example that illustrates my problem.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
function othertext() {
document.getElementById('button').value = 'xxx';
document.getElementById('noteditor').innerHTML = '<h1>Hello other world!</h1><p>I'm also an instance of CKEditor.</p>';
document.getElementById('editor').innerHTML = '<h1>Hello other world!</h1><p>I'm also an instance of CKEditor.</p>';
CKEDITOR.replace('editor');
}
</script>
</head>
<body id="main">
<input type="button" id="button" onclick="othertext();" value="NewText" />
<br>
<textarea id=noteditor>
<h1>
Hello world!
</h1>
<p>
I'm an instance of CKEditor.
</p>
</textarea>
<br>
<textarea name=text id=editor>
<h1>
Hello world!
</h1>
<p>
I'm an instance of CKEditor.
</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor');
</script>
</body>
</html>
When I click the button, the value of the button changes, the same with the first textarea (id=noteditor).
But textarea (id=editor) is not affected.
Why?
In debugger, when the line "CKEDITOR.replace('editor1');" in function othertext is executed I get <exception>:TypeError.
What am I doing wrong?
I found a solution to my problem!
By chance I found the answer to my question here: http://sdk.ckeditor.com/samples/api.html under "Using CKEditor API".
I have rewritten my first code here below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor Sample</title>
<script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
function SetContents() {
// Get the editor instance that you want to interact with.
var editor = CKEDITOR.instances.editor_Area1;
var value = document.getElementById('HTMLArea' ).value;
// Set editor content (replace current content).
// http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-setData
editor.setData( value );
}
</script>
</head>
<body id="main">
<input type="button" id="button" onclick="SetContents();" value="Set text" />
<br>
<textarea id=HTMLArea>
<h1>
Hello other world!
</h1>
<p>
I'm an other instance of CKEditor.
</p>
</textarea>
<br>
<textarea name=text id=editor_Area1>
<h1>
Hello world!
</h1>
<p>
I'm an instance of CKEditor.
</p>
</textarea>
<script type="text/javascript">
CKEDITOR.replace('editor_Area1');
</script>
</body>
</html>
When clicking on the button, the content of the editor-area is replaced by the html from the textarea "HTMLArea".
Related
Hello I'm practice on XSS-Attack in an HTML Page that I created, but it doesn't work for me.
This is the HTML Page:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Try to XSS this!</title>
<script language="javascript" type="text/javascript">
var send = function () {
var data = document.getElementById("msg").value;
document.getElementById("demo").innerHTML = data;
}
</script>
</head>
<body>
<p>Enter an XSS exploit here:</p>
<textarea id="msg" rows="10" cols="20"></textarea>
<br />
<input type="button" id="send" onclick="send();"/>
<br>
<p id="demo"></p>
</body>
</html>
This is the XSS-Exploit (I write it in the <textarea>):
hello</p>
<script>alert("XSS");</script>
<p>
And this is the result (I show the <p id="demo"></p> part):
<p id="demo">
"hello"
<p></p>
<script>alert("XSS");</script>
<p></p>
</p>
And the command alert("XSS"); doesn't work. What did I do wrong?
Script tags only run on page load; when you dynamically inject them into the page, script tags aren't run. The common bypass to this is to use onerror or onload like <img src=x onerror='alert(1)'> or <svg onload='alert(1)'></svg>
Why won't the code display the text from the textbook in the paragraph tag? I tried to take the code from the text box by using the onclick command and the function getVal() but it won't work.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script src="test.js">
function getVal1(){
var text = document.getElementById('text').value;
var par = document.getElementById('par');
par.innerHTML=text
}
</script>
</head>
<body>
<form>
<input type="text" id="text">
<input type="submit" value="Submit" onclick="getVal1()">
</form>
<p id="par"></p>
</body>
</html>
It cant work because you submit (which includes a reload) of the page.
Take a input type="button"instead.
function getVal1() {
var text = document.getElementById('text').value;
var par = document.getElementById('par');
par.innerHTML = text
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form>
<input type="text" id="text">
<input type="button" value="Submit" onclick="getVal1()">
</form>
<p id="par"></p>
</body>
</html>
I am trying to open a popup by clicking on a button.
Please check my below code and tell me why it isn't working.
I am using getreponse popup
http://www.reussirlegmat.com/2499-2/
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<button id="button" >Show it</button>
<script type="text/javascript" src="https://app.getresponse.com/view_webform_v2.js?u=BaAuE&webforms_id=7152504">{
"name": "myuniqueform2"
}
</script>
<script>
var myform = GRWF2.get('myuniqueform2'),
element = document.getElementById('button');
element.addEventListener("click", function(){
myform.show();
});
</script>
</body>
</html>
On your website, something has put <p>...</p> tags around every line of your script.
<p><script type="text/javascript" src="https://app.getresponse.com/view_webform_v2.js?u=BaAuE&webforms_id=7152504">{</p>
<p>"name": "myuniqueform2" </p>
<p>} </p>
<p></script> </p>
<p><script> </p>
<p>var myform = GRWF2.get('myuniqueform2'),</p>
<p>element = document.getElementById('button');</p>
<p>element.addEventListener("click", function(){ </p>
<p>myform.show(); </p>
<p>}); </p>
<p></script> </p>
<p></body></p>
<p></html></p>
Those are causing parse errors. Get rid of them.
I have no idea how you did this -- I suspect you edited the code with a word processor and then told it to export to HTML.
I am new to Javascript, but basically I want to take the users text, and once they hit the button, be able to output it below the button. This is what I have so far:
<html lang="en">
<head>
<meta charset="utf-8" />
<title>title</title>
<link rel="stylesheet" href="main.css">
<script>
var message = "#";
$("#message").text(message);
</script>
</head>
<body>
<div id="wrapper">
<var id="message"></var><textarea rows="4" cols="50" placeholder="Enter their post here, exactly word for word." id="post"></textarea></var>
<button type="button">Submit</button>
</div>
</div>
</body>
</html>
$("#button").click(function(){
var text = document.getElementById("post").value;
$("#message").html(text);
});
<div id="wrapper">
<textarea rows="4" cols="50" placeholder="Enter their post here, exactly word for word." id="post"></textarea>
<button id="button" type="button">Submit</button>
</div>
<span id="message"></span>
Result: http://jsfiddle.net/YoshiMaster/1r177khr/4/
This is without jQuery.
Add an id to your button and create the empty text area with id 'textDiv' and try this.
<script type="text/javascript">
var button = document.getElementById('button_ID');
button.addEventListener('click',showText);
function showText() {
document.getElementById('textDiv').innerHTML = 'new text';
}
</script>
please look at the following sample code:
<html>
<head>
<script type="text/javascript">
function myfun()
{
alert('hi');
}
</script>
</head>
<body>
<h1> Hello </h1>
<input type="button" value="MyButton" onClick="myfun()"/>
</body>
</html>
When I run this using php, and when I click on the button, the alert box doesn't come up. However, if I write onclick="alert(hi')" it works fine. What might be the reason?
<html>
<body>
<h1> Hello </h1>
<input type="button" value="MyButton" onClick="alert('hi')"/>
</body>
</html>
Missing a ' in your code...