Search code examples
laravelckeditorckeditor5

CKEditor adding extra p tag to before and after my p tag in laravel

I am using CKEditor for textarea. I have added editor class to my textarea. I have a ckeditor folder located in public. I have two files[ckeditor.js and script.js] in that folder. I have added the following codes to layout.blade.php as well.

<script src="/ckeditor/ckeditor.js"></script>
<script src="/ckeditor/script.js"></script>

script.js

ClassicEditor
.create( document.querySelector( '.editor' ), {
    // Editor configuration.
    enterMode: CKEDITOR.ENTER_BR,
    shiftEnterMode: CKEDITOR.ENTER_BR,
    
    
} )
.then( editor => {
    window.editor = editor;
} )
.catch( handleSampleError );

function handleSampleError( error ) {
const issueUrl = 'https://github.com/ckeditor/ckeditor5/issues';

const message = [
    'Oops, something went wrong!',
    `Please, report the following error on ${ issueUrl } with the build id "jmpcmxseambi-nohdljl880ze" and the error stack trace:`
].join( '\n' );

console.error( message );
console.error( error );
}

If I have my codes like this <p>{!!$blog->body!!}</p>, you can see the two p tags, one before my p tag and one after my p tag.

enter image description here

and if I have my codes like this <p>{{$blog->body}}</p>, p tag is visible to the user which I don't want.

enter image description here

I tried searching for it on here but I see suggestions like 'I made config.allowedContent = true;' which I definitely didn't do. I don't have config.js as well in CKEditor folder. I only have webpack.config.js. I am not sure they are the same thing.

I see suggestion like I need to make config.allowedContent = false; but I am not sure where I am supposed to add that line of code.

Please help.

Solution

  • Use div instead of p tag to output the html content saved into the database.

    <div>{!!$blog->body!!}</div>