Inserting html in ckeditor causes syntaxerror ( laravel )

Question

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!

returns the same error but instead of html i get <ul> <li>site one</li> <li>site two</li> <li>site 3</li> </ul> — Sylent
– Sylent, Commented Apr 2, 2019 at 11:06
Alright after 3 hours I finally found out what the problem was. In the database you have the "enter" entities too and they messed up the javascript as it would litterally put an enter in there. — Sylent
– Sylent, Commented Apr 2, 2019 at 12:17

Jatin Parmar · Accepted Answer · 2019-04-02 11:20:45Z

1

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");
}

edited Apr 2, 2019 at 11:20

answered Apr 2, 2019 at 11:09

Jatin Parmar

2,9596 gold badges22 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sylent Over a year ago

this inserts {$proposal->reference_sites} as html. Which is the variable name and not the value of the variable.

Jatin Parmar Over a year ago

i assume $proposal->reference_sites contains html,you can try to echo as html string editor.setData("<?php echo $proposal->reference_sites ?>"); if its not,then you are make some syntax error

Sylent Over a year ago

Like I said in the original question the error is: Uncaught SyntaxError: Invalid or unexpected token < line 254

Jatin Parmar Over a year ago

check this ref stackoverflow.com/questions/3143698/…

Jatin Parmar Over a year ago

Let us continue this discussion in chat.

Manisha · Accepted Answer · 2019-04-02 13:02:38Z

0

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");
}

answered Apr 2, 2019 at 13:02

Manisha

808 bronze badges

Collectives™ on Stack Overflow

Inserting html in ckeditor causes syntaxerror ( laravel )

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related