locked
Rich text editor not working on razor pages but works on plain html pages RRS feed

  • Question

  • User-973886032 posted

    Hi guys

    I found a free Rich text editor here https://summernote.org/getting-started/#without-bootstrap

    which works with plain html pages, and there is a bootstrap v4 version which does not seem to work in my razor pages, as I added the cdn links on the razor pages and tried adding also in the layout pages, but neither works

    here is my code (with 2 options below)

    OPTION 1 - keep every script in my layout page (Added scripts are in yellow) I already have bootstrap 4, so just added boostrap.js and the external scripts

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - Xxxh</title>
    
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <link href="~/lib/x/css/main.css" rel="stylesheet" />
    
            <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpy akNTNrHIW2I5f" crossorigin="anonymous"></script>
    
    
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
    
            <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
    
     
            <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
            <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
    
     
    
            <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
        </environment>
    
    </head>
    <body>
    
     <main role="main" class="pb-3">
                @RenderBody()
            </main>
        </div>
    
        <footer class="border-top footer text-muted">
            <div class="container">
                <partial name="_CookieConsentPartial" />
                &copy; 2019 - X - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> | <a asp-area="" asp-controller="Home" asp-action="Support">Support</a> | <a asp-area="" asp-controller="Home" asp-action="Affiliates">Affiliates & Resellers</a>
            </div>
        </footer>
    
        <environment include="Development">
          
            <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
        </environment>
        <environment exclude="Development">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha256-FgpCb/KJQ RdAu8=">
            </script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                    crossorigin="anonymous"
                    integrity="sha384-xrR8PRhcEn3czEjhAO9o">
            </script>
        </environment>
        <script src="~/js/site.js" asp-append-version="true"></script>
    
        @RenderSection("Scripts", required: false)
    </body>
    </html>
    
    
    
    my razor page is below

    @section scripts { } <script> $(document).ready(function () { $('#summernote').summernote({ placeholder: 'Hello stand alone ui', tabsize: 2, height: 100 }); </script> }); } <h1>Editor</h1> <!DOCTYPE html> <div id="summernote"></div>

    OPTION 2 - Add my scripts to my razor page and not layout page

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>@ViewData["Title"] - Xxxh</title>
    
        <environment include="Development">
            <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
            <link href="~/lib/x/css/main.css" rel="stylesheet" />
    
            <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha384-xBuQ/xzmlsLoJpy akNTNrHIW2I5f" crossorigin="anonymous"></script>
    
            <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
            <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
    
     
    
            <script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>
        </environment>
    
    </head>
    <body>
    
     <main role="main" class="pb-3">
                @RenderBody()
            </main>
        </div>
    
        <footer class="border-top footer text-muted">
            <div class="container">
                <partial name="_CookieConsentPartial" />
                &copy; 2019 - X - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a> | <a asp-area="" asp-controller="Home" asp-action="Support">Support</a> | <a asp-area="" asp-controller="Home" asp-action="Affiliates">Affiliates & Resellers</a>
            </div>
        </footer>
    
        <environment include="Development">
          
            <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
        </environment>
        <environment exclude="Development">
            <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha256-FgpCb/KJQ RdAu8=">
            </script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"
                    asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"
                    asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                    crossorigin="anonymous"
                    integrity="sha384-xrR8PRhcEn3czEjhAO9o">
            </script>
        </environment>
        <script src="~/js/site.js" asp-append-version="true"></script>
    
        @RenderSection("Scripts", required: false)
    </body>
    </html>


    add the external Rich text editor scripts to my razor page

    @section scripts
    {
    ///I removed the boostrap duplicate which exisit in the layout page above
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
    <script>
    $(document).ready(function () {
    
    $('#summernote').summernote({
    placeholder: 'Hello stand alone ui',
    tabsize: 2,
    height: 100
    
    
    });
    </script>
    });
    
    }
    <h1>Editor</h1>
    
    <!DOCTYPE html>
    
    
    
    <div id="summernote"></div>

    this is a working plain html page

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <title>bootstrap4</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
      </head>
      <body>
        <div id="summernote"></div>
        <script>
          $('#summernote').summernote({
            placeholder: 'Hello bootstrap 4',
            tabsize: 2,
            height: 100
          });
        </script>
      </body>
    </html>

    Friday, August 23, 2019 9:08 PM

Answers

  • User-973886032 posted

    
    
    
    my razor page is below
    
    
    @section scripts
        {
      
       
       }
        <script>
            $(document).ready(function () {
    
                $('#summernote').summernote({
                    placeholder: 'Hello stand alone ui',
                    tabsize: 2,
                    height: 100
    
                     });
                });
        </script>
    });
    
    }
    <h1>Editor</h1>
    
    <!DOCTYPE html>
    
    
    
    <div id="summernote"></div>
    

    sorry ignore this thread, I found the solution, I did not terminate the script which I have highlighted in yellow above. Its working now. 

    many thanks

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, August 24, 2019 7:20 AM