I'm having problem with setting data into my existing CKEditor editors.
It's long, but i cannot figure out what is wrong.
Problem is, i am getting html data from database, but when i refresh the page repeatedly, system sometimes able to, sometimes is not able to setData() (load values from data array) on my current CKEditor text areas.
html file :
<textarea id="myTextAreaID" name="myTextArea"></textarea>
<script type="text/javascript">
$(function () {
var myEditor = $('#myTextAreaID');
myEditor.ckeditor({
height: 200,
extraPlugins: 'wordcount',
maxLength: 2500,
toolbar: 'TinyBare',
toolbar_TinyBare: [
['Bold','Italic','Underline'],
['Undo','Redo'],['Cut','Copy','Paste'],
['NumberedList','BulletedList','Table'],['CharCount']
]
}).ckeditor().editor.on('key', function(obj) {
if (obj.data.keyCode === 8 || obj.data.keyCode === 46) {
return true;
}
if (myEditor.ckeditor().editor.document.getBody().getText().length >= 2500) {
alert('You have reached the maximum value.');
var pureHtmlValue = $('#myTextAreaID').ckeditor().editor.document.getBody().getHtml();
var subbed_html = html_substr(pureHtmlValue, 0, 1000); $('#myTextAreaID').ckeditor().editor.document.getBody().setHtml(subbed_html);
return false;
}
});
});
//using this one to cut extra string values without destroying the HTML tags.
function html_substr( str, start ,count ) {
var div = document.createElement('div');
div.innerHTML = str;
walk( div, track );
function track( el ) {
if( count > 0 ) {
var len = el.data.length;
if(start<=len){
el.data = el.substringData(start,len);
start=0;
} else{
start-=len;
el.data = '';
}
len = el.data.length;
count -= len;
if( count <= 0 ) {
el.data = el.substringData( 0, el.data.length + count );
}
} else {
el.data = '';
}
}
function walk( el, fn ) {
var node = el.firstChild;
do {
if( node.nodeType === 3 ) {
fn(node);
} else if( node.nodeType === 1 && node.childNodes && node.childNodes[0] ) {
walk( node, fn );
}
} while( node = node.nextSibling );
}
return div.innerHTML;
}
</script>
My JS file :
$(document).ready(function(){
$('#myBootstrapTab a').on('load', function (e) {
e.preventDefault();
$(this).tab('show');
},onLoadMyFunction());
}
function onLoadMyFunction(){
$.post("postToGetValuesFromDBRoute",function(data){
CKEDITOR.instances['myTextAreaID'].updateElement();
//myBindedData is in the next file
CKEDITOR.instances['myTextAreaID'].setData(data['myBindedData']);
});
}
Routes.php File
Route::post('postToGetValuesFromDBRoute', array(
'uses' => 'myController@postToGetValuesFromDBRoute',
'as' => 'postToGetValuesFromDBRoute'
));
myController.php File
public function postToGetValuesFromDBRoute(){
$myModelInstance = MyModel::where('id', '=', 'someValue'))->first();
Input::merge(array(
myBindedData => $myModelInstance['myFieldFromEloquentModel'];
));
return Response::json(Input::all());
}
Any help would be appreciated.