How to implement summernote and post data to database.

Don't use a div, use a textarea with the class of summernote. Then init summernote in jQuery.

Then you can pick it up in Laravel as you normall would.

It is working fine but I cannot return the old input of the form before submission in case of any error. To do something like {{ old('body') }} And I think it hides the element with the id of summernote. That is why the form does not submit.

You're trying to set the html on an input. Use val() on inputs to set their value.

$('.note-codable').val(the value);

Hope you don't have more than one element with the classname .note-codable. You really should use an ID for that.

@Cronix, it not working. i just want the data to even post

not sure then. You're using a javascript plugin, so I assume that's where the issue is. This isn't something that laravel is causing.

Look at the docs for summernote. It shows how to get and set the contents. http://summernote.org/getting-started/#get--set-code

I have done exactly what should be done. Can you briefly write how the html should look like so I can compare...

I don't use or have the plugin. I was just looking at their docs.

How are you initializing the plugin into your page?

If your HTML is:

<textarea id="summernote"></textarea>

then if you do:

<textarea id="summernote">Foo body</textarea>

It works?

PS: This is not laravel related, you should being searching through summernote's forum.

It's really not rocket science. Remove all of the Javascript you have for summernote and start again.

<textarea name="myNameForLaravelToPickUpOnTheInput" class="summernote"></textarea>

// to receive and display the old input

<textarea name="myNameForLaravelToPickUpOnTheInput" class="summernote">{{ old('myNameForLaravelToPickUpOnTheInput') }}</textarea>

$('.summernote').summernote(); // initialise summernote for the class .summernote

If it's not posting, then you've obviously got an incorrect route or validation setup.

Yeah i have done that but still not the name does not appear on my html. Have a look at a screenshot https://prnt.sc/gbz31s When you look at the developer console you will find out that the 1st textarea with the id of summernote has a style="display: none;"

Check the dev tools > console to check for any errors.

That Textarea that is hidden is normal I believe, as Summernote will use it's own textarea and then insert the content into your defined textarea.

Make sure that you haven't got another Summernote defined on that page too, as since you're using ID's (for an unknown reason) you can only have one.

Also make sure your backend is correct, validation, routing etc

I'm using Summernote so I know exactly the problem you're running into. Below is how I solved it.

Right before triggering the default form action (a patch request to /blog/xx, in my case), we will set the request['body'] variable ourselves using a hidden input with name "body".

Make a separate .js file called summernote-init.jsor whatever, and invoke it in your blade template using:

@push('scripts')
<script src="/js/summernote-init.js"></script>
@endpush

Of course, you'll need to include a @stack('scripts') in one of the parent template files. Make sure your script is being loaded after jquery, otherwise the $ will be undefined.

The contents of summernote-init.js:

var $summernote = $('#summernote');
var isCodeView;

$(() => {
  $summernote.summernote({
    height: 300,
    focus: true
  });
});

/* Our form won't send data properly while we are in code view mode (HTML editor as opposed to the WYSIWYG editor). It does, however, work in editable (WYSIWYG) mode. Therefore, in case we are in code view, we will toggle it back before submitting our form. In order to do that, we set a boolean true or false depending on the editor state. */

$summernote.on('summernote.codeview.toggled', () => {
  isCodeView = $('.note-editor').hasClass('codeview');
});

$("#edit").submit( (event) => {

  if (isCodeView == true) {
    $summernote.summernote('codeview.toggle');
  }
  
  var body = $summernote.summernote('code');
  document.getElementById('body').setAttribute('value', body);
  
});

Use this form HTML in your template.blade.php, or whatever:

    <form id="edit" method="POST" action="/blog/{{ $post->id }}">

            {{ csrf_field() }}
            {{ method_field('PATCH') }}

            <div class="form-group">
                <input type="text" class="form-control" name="title" id="title" value="{{ $post->title }}" required>
            </div>

            <input type="hidden" id="body" name="body" value="" />

            {{--  placeholder for Summernote editor, will get swapped out by summernote-init.js  --}}
            <textarea id="summernote">{{ $post->body }}</textarea>

            <button type="submit" class="btn btn-primary">Update</button>

        </form>

@push('scripts')
<script src="/js/summernote-init.js"></script>
@endpush

When the Submit button is clicked, the script calls our function before the default action is sent. Hope that helps.

See this tutorial. It's simple to follow and covers everything regarding using summernote with laravel. https://www.kerneldev.com/2018/01/11/using-summernote-wysiwyg-editor-with-laravel/

@RONAKLODAYA - Thank you @ronaklodaya <3

Here the best example to follow and integrate laravel sumernote with step by step guide to install use and save records sin database:

https://codingdriver.com/how-to-use-summernote-editor-in-laravel-example.html