Cyber Space Cyber Space - 1 month ago 6
jQuery Question

How to enable and show entered data in CKEDITOR?

In one of my webpage i have a CKEDITOR and two images containing 'onclick' events.When the page loads the editor is disabled.First: I want to enable the editor by pressing the first image having title "Allow edit".However this does not work.

My second problem is, i am not able to show alert message of the data entered into the editor when i remove the disabled attribute. The codes i'm using are given below.Please advise.Thank you.

<html>
<head>
<title>Test</title>
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet">
<script src="../ckeditor/ckeditor.js"></script>
<script src="../ckfinder/ckfinder.js"></script>
</head>
<body>
.......
.......
<img src="../images/allow_edit.gif" alt="" onclick="enableEdit();" class="smallThreeButtons" data-toggle="tooltip" data-placement="left" title="Allow edit"/>&nbsp;
<img src="../images/modify_this.gif" alt="" onclick="saveEditData('txtAreaFullStoryP1');" class="smallThreeButtons" data-toggle="tooltip" data-placement="bottom" title="Save modification"/>&nbsp;
<textarea class="form-control" id="txtAreaFullStoryP1" disabled name="txtAreaFullStoryP1"></textarea>
<script type="text/javascript">
var editor = CKEDITOR.replace( 'txtAreaFullStoryP1', {
filebrowserBrowseUrl : '../ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '../ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '../ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '../ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
CKFinder.setupCKEditor( editor, '../' );
</script>
<script type="text/javascript">
function enableEdit(cs){
document.getElementById('txtAreaFullStoryP1').disabled='';//false <--not working
}

function saveEditData(ctrlNm){
var ctrl_val = document.getElementById(ctrlNm).value;
alert(ctrl_val);//<--not working, showing blank message
}
</script>
</body>
</html>

Answer

to remove disable

document.getElementById('txtAreaFullStoryP1').removeAttribute('disabled');

get textarea data in CKEDITOR

var ctrl_val= CKEDITOR.instances['txtAreaFullStoryP1'].getData()
alert( ctrl_val);