summernote / summernote

Super simple WYSIWYG editor
https://summernote.org
MIT License
11.41k stars 2.24k forks source link

Store editor code in mysql datatase #4598

Closed Brecht272727 closed 3 months ago

Brecht272727 commented 4 months ago

Hi,

I have something strange when i save the editor code into mysql. I use the latest version 0.8.20 and the lite version.

My code from codeview is like this (before storing in database):

<p><img style="width: 352px;" src="assets/uploads/promotions/5fd0b37cd7dbbb00f97ba6ce92bf5add.jpg">&nbsp; &nbsp;<img style="width: 25%;" src="assets/uploads/promotions/a97da629b098b75c294dffdc3e463904.jpg"><br></p>

But when i store it and look what is stored in mysql it is like this:

<p><img style="width: 352px;" src="assets/uploads/promotions/5fd0b37cd7dbbb00f97ba6ce92bf5add.jpg"></p>

But if i remove the &nbsp; &nbsp; between the images it stores correct. How comes?

  $('.summernoteEditPromotionsEN').summernote({
    tabsize: 2,
    height: 250,
    toolbar: [
      ['style', ['style']],
      ['font', ['bold', 'underline', 'italic', 'fontsize', 'clear']],
      ['para', ['ul', 'ol', 'paragraph']],
      ['table', ['table']],
      ['insert', ['link', 'picture', 'video']],
      ['view', ['help', 'codeview']]
    ],
    callbacks: {
      onImageUpload: function(files) {
        for(let i=0; i < files.length; i++) {
          $.upload(files[i]);
        }
      }          
    },
    enterHtml: '<br>'
  });
  $.upload = function (file) {
    let out = new FormData();
    out.append('file', file, file.name);

    $.ajax({
      method: 'POST',
      url: 'assets/ajax/test-upload-image-summernote.php',
      contentType: false,
      cache: false,
      processData: false,
      data: out,
      success: function (img) {
        $('.summernoteEditPromotionsEN').summernote('insertImage', img);
      },
      error: function (jqXHR, textStatus, errorThrown) {
        console.log(textStatus + " " + errorThrown);
      }
    });
  }; 

Ans i save the editor code into mysql with this: $('.summernoteEditPromotionsEN').summernote('code')

DennisSuitters commented 4 months ago

There could be a number of reasons why the code changes, but it looks to me like it's being filtered, and not actually a Summernote issue. So, to me, it looks like it's either an encoding/filter issue when storing the data, or an encoding/filter issue when retrieving and displaying the data. It could also be the coalition format of the database (I used "utf8mb4_unicode_ci", or even the column type and it's encoding, causing the change. For the column where editor data is stored I use "longblob", considering that sometimes users could use inline images.

Brecht272727 commented 4 months ago

Hi, thanks for the answer.

I use for coalition "utf8mb4_general_ci" and column type is "longtext" because there are no images stored into the database. Only the path is stored like this: <img style="width: 352px;" src="assets/uploads/promotions/5fd0b37cd7dbbb00f97ba6ce92bf5add.jpg">

I did some tests:

Before sending with ajax i checked the console with console.log($('.summernoteEditPromotionsEN').summernote('code')); Result is: <p><img style="width: 25%;" src="assets/uploads/promotions/5fd0b37cd7dbbb00f97ba6ce92bf5add.jpg">&nbsp;ghjgjjghjghj&nbsp;<img style="width: 352px;" src="assets/uploads/promotions/96da2f590cd7246bbde0051047b0d6f7.jpg"></p> That's good.

Data coming back from ajax and stored in the database is: <p><img style="width: 25%;" src="assets/uploads/promotions/5fd0b37cd7dbbb00f97ba6ce92bf5add.jpg">

So, what is happens with the part after the &nbsp; ?

Lost data is: &nbsp;ghjgjjghjghj&nbsp;<img style="width: 352px;" src="assets/uploads/promotions/96da2f590cd7246bbde0051047b0d6f7.jpg"></p>

But if you remove the &nbsp; in the editor and put the images next to each other it is good saved... Result: <p><img style="width: 25%;" src="assets/uploads/promotions/5fd0b37cd7dbbb00f97ba6ce92bf5add.jpg"><img style="width: 352px;" src="assets/uploads/promotions/96da2f590cd7246bbde0051047b0d6f7.jpg"></p>

DennisSuitters commented 4 months ago

Something, somewhere must be filtering the entities out. Have you checked what is actually stored in the database, such as viewing the information via phpmyadmin or other SQL management tool, and looking at the raw data? Suggesting that, so you can determine if the data is being removed before insertion, or if it is all being stored, or if the output is modifying the data.

HoffmannTom commented 3 months ago

The ampersand is a special character that signals a new parameter (at least in the URL). I guess there is either an issue with escaping or on the server-side reading. A debugger should tell what happened with the second part. You can also press F12 in the browser and look at the Ajax request and contained data. If all is sent, it is a server-side issue.

DennisSuitters commented 3 months ago

As this has been no more interaction for more than 14 days, I'm going to assume you managed to resolve this. If you still require help, please, reopen, comment, or create a new issue, thank you.