CODEWITHSUNDEEP
javascripthtmllaravelckeditorlaravel-blade
Sylent
Sylent

Reputation: 514

Inserting html in ckeditor causes syntaxerror ( laravel )

I'm trying out the CKeditor in laravel and I encountered an issue inserting html into the editor. After appending the editor I'd like to set the value so you can edit the already existing values.

HTML:

@if (!empty($proposal->reference_sites))
    <div class="form-group row mb-4">
        <label for="reference_sites" class="col-sm-3 col-form-label form-control-lg">Reference sites:</label>
        <div class="col-sm-10" id="reference_sites"></div>
    </div>
@endif

JS:

if($('#reference_sites').length){
    $output = "<textarea id='ckeditor-rs' name='ckeditor-rs' rows='10' cols='80'></textarea>";
    $('#reference_sites').append($output);
    CKEDITOR.replace('ckeditor-rs');

    var editor = CKEDITOR.instances['ckeditor-rs'];
    editor.setData("{!!html_entity_decode($proposal->reference_sites)!!}");

    }else{
        console.log("couldn't append ckeditor in rs");
    }

As you see I'm trying to decode the HTML and set that as the HTML of the CKeditor.

$proposal->reference_sites contains this HTML:

<ul>
    <li>site one</li>
    <li>site two</li>
    <li>site 3</li>
</ul>

Error: Uncaught SyntaxError: Invalid or unexpected token <

I'm not entirely sure what causes this error since when I only decode a variable which contains <p>some text</p> it inserts some text into the editor.

Any help is greatly appreciated!

Upvotes: 1

Views: 424

Answers (2)

Manisha
Manisha

Reputation: 80

You can try this one code:

if($('#reference_sites').length){
    $output = "<textarea id='ckeditor-rs' name='ckeditor-rs' rows='10' cols='80'></textarea>";
    $('#reference_sites').append($output);
    CKEDITOR.replace('ckeditor-rs');

    for (var i in CKEDITOR.instances) {
        CKEDITOR.instances[i].on('change', function() { 
            CKEDITOR.instances[i].updateElement() 
        });
    }
}else{
    console.log("couldn't append ckeditor in rs");
}

Upvotes: 0

Jatin Parmar
Jatin Parmar

Reputation: 2900

try the following one,

if($('#reference_sites').length){
$output = "<textarea id='ckeditor-rs' name='ckeditor-rs' rows='10' cols='80'></textarea>";
$('#reference_sites').append($output);
CKEDITOR.replace('ckeditor-rs');

var editor = CKEDITOR.instances['ckeditor-rs'];
editor.setData("{{$proposal->reference_sites}}");

}else{
    console.log("couldn't append ckeditor in rs");
}

Upvotes: 1

Related Questions