dynamic create multiple ckeditor onclick event using jquery
<!DOCTYPE html>
<html>
<head>
<title>New Ckeditor Instance Dynamically</title>
<script type="text/javascript" src="ckeditor_3.5/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" src="ckeditor_3.5/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.jquery_ckeditor').ckeditor();
});
</script>
<script>
function newCkeditor(){
$('<div><textarea><\/textarea><\/div>')
.appendTo('#body').find('textarea').ckeditor();
}
function clicked(){
for ( instance in CKEDITOR.instances ){
alert("ckeditor values : " + CKEDITOR.instances[instance].getData());
}
}
</script>
</head>
<body>
<form id="one" method="post">
<div class="module">
<div class="banner" id="banner">
<span>Ckeditor</span>
</div>
<div class="body" id="body">
<textarea class="jquery_ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea><br/><br/>
</div>
</div>
</form>
<p><input type="button" value="Create New Ckeditor Instance Dynamically" onclick="javascript:newCkeditor()"></button></p>
<input type="submit" value="Submit" onClick="clicked()"/>
</body>
</html>
Ck editor libraries urls:
https://cdnjs.com/libraries/ckeditor
<html>
<head>
<title>New Ckeditor Instance Dynamically</title>
<script type="text/javascript" src="ckeditor_3.5/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" src="ckeditor_3.5/ckeditor/adapters/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('.jquery_ckeditor').ckeditor();
});
</script>
<script>
function newCkeditor(){
$('<div><textarea><\/textarea><\/div>')
.appendTo('#body').find('textarea').ckeditor();
}
function clicked(){
for ( instance in CKEDITOR.instances ){
alert("ckeditor values : " + CKEDITOR.instances[instance].getData());
}
}
</script>
</head>
<body>
<form id="one" method="post">
<div class="module">
<div class="banner" id="banner">
<span>Ckeditor</span>
</div>
<div class="body" id="body">
<textarea class="jquery_ckeditor" cols="80" id="editor1" name="editor1" rows="10"></textarea><br/><br/>
</div>
</div>
</form>
<p><input type="button" value="Create New Ckeditor Instance Dynamically" onclick="javascript:newCkeditor()"></button></p>
<input type="submit" value="Submit" onClick="clicked()"/>
</body>
</html>
Ck editor libraries urls:
https://cdnjs.com/libraries/
Comments
Post a Comment