Search code examples
javascriptasp.net-mvctailwind-csstextareasummernote

How to embed summernote to a asp.net project with tailwindcss

I am trying to embed summernote to my project and I am using tailwindcss. I followede the guide to installing summernote to a project but it still does not work.

I added these lines to my _Layout.cshtml under '<head> tag:

    <link href="/node_modules/summernote/dist/summernote.css" rel="stylesheet">
    <script src="/node_modules/summernote/dist/summernote.js"></script>

then in my Index.cshtml i tried to initialize summernote using javascript:

<script>
    $(document).ready(function () {
        $('#proposed').summernote
    });
</script>

then made an id for my '<textarea> tag:

<div class="mx-2" >
   <textarea id="proposed" class="resize-none w-full h-52 p-2 mb-2 border-2 border-gray-200"></textarea>
</div>

but did not work, this was from the guide from youtube, and even though i tried the guide from here

https://summernote.org/getting-started/#get-summernote

it didn't work since it is for bootstrap.

Is there a way to embed summernote?

Solution

  • Since I am not using bootstrap, I found a way to embed summernote to a project in asp.net and it is by using summernote-lite.js and summernote-lite.css I have to add this to my libraries.

    then add these lines to the '<head>' tag in _Layout.cshtml:

    <link href="summernote-bs5.css" rel="stylesheet">
<script src="summernote-bs5.js"></script>

    then manually add this script to your index/view page:

    $('#proposed').summernote({
    tabsize: 2,
    height: 120,
    toolbar: [
        ['style', ['style']],
        ['font', ['bold', 'underline', 'clear']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['table', ['table']],
        ['insert', ['link', 'picture', 'video']],
        ['view', ['fullscreen', 'codeview', 'help']]
    ]
});

    Using this method it has worked for me while using tailwindcss