I am using Summernote text editor for getting input from user i.e i am getting HTML back from the user.Now i want to get all images that user give and store them in file. Here's my jquery code:

The value variable contain the html user is giving.

I want to know what must be the next step i.e i want to get all images from the value variable using jquery

$(document).ready(function () {
    $('#qsform').on('submit', function () {

        var value = $('#summernote').val();
        var images = value.$('img');
        var srcList = [];
        for (var i = 0; i < images.length; i  ) {
            srcList.push(images[i].src);
        }
        alert(srcList)
    })
});

and here's my .cshtml file:

@model QuoraForPucit.Models.Question
@{       
    ViewData["Title"] = "Ask Question";
}
@section links{
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2 poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ n" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/summernote-lite.min.js"></script>
    <link rel="stylesheet" href="@Url.Content("~/css/AskQs.css")"/>
    <script defer src="~/js/askqs.js"></script>
}
<div asp-validation-summary="All" role="alert" style=""></div>
<div >
        <h1>Ask a Public Question</h1>
        <form id="qsform"  method="post" action="/User/AskQuestion"  style="flex-direction: column;">
            <div >
                <label asp-for="Title">Question Title:</label>
                <br>
                <input type="text" asp-for="Title" id="title1">
                <br>
                <span asp-validation-for="Title" ></span>
            </div>
            <div >
                <label asp-for="Description">Description:</label>
                <br>
                <textarea asp-for="Description" id="summernote"></textarea>
                <br>
                <span asp-validation-for="Description" ></span>
            </div>
            <div >
                <label asp-for="Subject">Choose Subject:</label>
                <br>
                <select asp-for="Subject" id="subject">
                    <option selected="selected" value="Exam">Exam</option>
                    <option value="Admission">Admission</option>
                    <option value="Job">Job</option>
                    <option value="Study">Study</option>
                    <option value="Information">Information</option>
                    <option value="Information">Information</option>
                    <option value="Events">Events</option>
                </select>
            </div>
            <button  value="submit">Submit</button>
        </form>
    </div>
    <script>
              $('#summernote').summernote({
        placeholder: 'Description goes here....',
        height:'25vh',
        toolbar: [
          ['style', ['style']],
          ['font', ['bold', 'underline', 'clear']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
          ['table', ['table']],
          ['insert', ['link', 'picture']],
          ['view', ['fullscreen', 'codeview', 'help']]
        ]
      });
    </script>

CodePudding user response：

You can get all the images src by:

$(document).ready(function () {
    $('#qsform').on('submit', function (e) {
        e.preventDefault();
        var srcList = [];
        var rawHtml = $($('#summernote').summernote('code'));
            rawHtml.find('img').each(function (i,data) {
                srcList.push(data.src)
            });
        //do your stuff...
                
    })
});