1

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.

saimcan
  • 1,706
  • 7
  • 32
  • 64
  • First of all, check what comes out of your request when the problem occurs (`console.log( data )`). Secondly, make sure [CKEditor instance exists and it's ready](http://stackoverflow.com/questions/18461206/how-to-retrieve-the-ckeditor-status-ready/18464877#18464877) to obtain data at that moment. By the way, why do you call [`editor.updateElement()`](http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-updateElement) before `editor.setData()`? – oleq Jan 13 '15 at 11:20
  • @oleq i tried many combinations so i left it like that. I tried updateElement after editor.setData too. But hasn't changed. I'll try this console.log(data) thing. For your information, i can get the data with alert(data['stringValue']). So i can get my data but cannot set in the CKEditor. – saimcan Jan 13 '15 at 11:25

0 Answers0