Search code examples
laravelrich-text-editorsummernote

Display images inside summernote from db in laravel


I'm working on a laravel project which should fetch content of home page (HTML Content) from database and display it inside Summernote rich text editor. Summernote displays my HTML Content well but doesnot display images. On checking code displayed in summernote, It had replaced / character with "". The same image gets displayed if pasted directly inside textarea and not fetched from dB. I tried some solutions found online and on stackoverflow but they didn't work for me.

 $(document).ready(function() {
  $('#summernote').summernote(
      {
        tabsize: 2,
        height: 400
      });
});
<form method="post">
                <div>
                    <textarea class="summernote" id="summernote" name="editordata"><div class="row-iconbox our-support-block">
                  {!!$cms_home->homepage_content!!}
                    </textarea>
                </div>
</form>


Solution

  • Digging deeper into / character being replaced by "" , MySQL had put \ before every " while storing or updating hence the image address could not be found while loading HTML content from database.

    sample HTML

    <img src="/storage/img/icon1.svg" height="100" width="100"/>
    

    HTML content after storing in dB

    <img src=\"/storage/img/icon1.svg\" width=\"100\" height=\"100\" />
    

    Solution

    1. Check UTF encoding

    Open Mysql in terminal and replace DATABASE_NAME, TABLE_NAME with your db_name and table_name respectively.

    SELECT CCSA.character_set_name FROM information_schema.`TABLES` T,information_schema.`COLLATION_CHARACTER_SET_APPLICABILITY` CCSA WHERE CCSA.collation_name = T.table_collation AND T.table_schema = "DATABASE_NAME" AND T.table_name = "TABLE_NAME";
    

    2. If Encoding is not utf8, alter database and table to utf8 encoding

    see how to do this

    3. Add this code to your <head> in HTML

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">