Search code examples
javascriptlaravelckeditor

CKEditor4 Laravel Not Parsing HTML, Rather Outputs the Tags like <p>, <h1> etc


My CKEditor displays just fine but when I modify text to be bold, italisized, etc... it doesn't render properly and just outputs with tags like so:

<p>&nbsp; &nbsp; <u><em><strong>This is a test of the editor</strong></em></u>

I want these styles applied via the editor but it isn't working correctly. I'm using phpMyAdmin to test my website via localhost. This is a fresh installation of CKeditor.

Here is how the form is coded:

    <div class="content" style="width: 50%;">
    <h1>Create Post</h1>
    <div class="create-post-form">
        {!! Form::open(['action' => 'App\Http\Controllers\PostsController@store', 'method' => 'POST']) !!}
            <div class="form-group">
                {{Form::label('title', 'Title')}}
                {{Form::text('title', '', ['class' => 'form-control', 'placeholder' => 'Title'])}}
            </div>
            <div class="form-group">
                {{Form::label('body', 'Body')}}
                {{Form::textarea('body', '', ['id' => 'editor', 'class' => 'form-control', 'placeholder' => 'Body Text'])}}
            </div>
            {{Form::submit('Submit', ['class'=>'btn btn-primary'])}}
        {!! Form::close() !!}
    </div>
</div>

Here is the create function in my controller:

        //creating the posting
    $post = new Post;
    $post->title = $request->input('title');
    $post->body = $request->input('body');
    $post->save();

    return redirect('/posts')->with('success', 'Post created successfully!');

Thanks in advance


Solution

  • This sounds like the correct behavior for CKEditor. If you ask it to give you formatted HTML, it will store the data in the DB/variable exactly as you have shown above.

    If you are asking to render to the page from Laravel's Blade along with the styles you have set, this is where you will need to make a change. If you are seeing the HTML tags, you are escaping the text.

    Change

    {{ $yourTextFromCKEditorPassedFromYourController }}

    To:

    {!! $yourTextFromCKEditorPassedFromYourController !!}

    Standard warnings should be heeded here for displaying entries without cleaning or escaping if they are from an un-trusted source