Summernote in Asp.Net MVC

Question

I tried implementing summernote wysiwyg editor in my Asp.Net MVC project as per the tutorial here.

I thought I was getting the same issue as this guy and implemented the suggestions but still no avail.

I've also ammended my web.config file as per here to try to fix the glyphicons problem but also to no avail.

If anyone can tell me what I'm doing wrong it'd be greatly appreciated.

See the text area in the text area and the button icons not rendering

Rendered HTML according to Chrome Debugger

.cshtml

<div class="form-group">
            @Html.LabelFor(model => model.Recipe.Instructions, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.TextAreaFor(model => model.Recipe.Instructions, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessageFor(model => model.Recipe.Instructions, "", new { @class = "text-danger" })
            </div>
        </div>

bundle

 public class BundleConfig
    {
        // For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
        public static void RegisterBundles(BundleCollection bundles) {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
                      "~/Scripts/bootstrap.js",
                      "~/Scripts/respond.js"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                      "~/Content/bootstrap.css",
                      "~/Content/font-awesome.css",
                      "~/Content/site.css",
                      "~/Content/globalStyles.css"));

            bundles.Add(new StyleBundle("~/Content/summernote").Include(
                "~/Content/summernote/summernote.css"
                ));

            bundles.Add(new ScriptBundle("~/bundles/summernote").Include(
               "~/Content/summernote/summernote.js"
               ));
        }
    }

file structure

chrome errors

I don't know anything about summernote, but `@Html.TextAreaFor(model => model.Recipe.Instructions, new { htmlAttributes = new { @class = "form-control"} })` looks very wrong. Perhaps you meant `@Html.TextAreaFor(model => model.Recipe.Instructions, htmlAttributes: new { @class = "form-control"})`? — Paul Abbott, Apr 21 '16 at 17:54
And don't post code as images, it helps absolutely no one doing a search (and forced me to type all of that by hand) — Paul Abbott, Apr 21 '16 at 17:55
@PaulAbbot `new { htmlAttributes = new { @class = "form-control"} })` was generated by vs2015. I tried the older way and it made no difference. Changing my question now to replace screenshots with code — rory, Apr 21 '16 at 18:00

score 0 · Accepted Answer · answered Apr 21 '16 at 18:19

I ammended my scripts section in my cshtml file to include the css bundle like so

@section Scripts {
    @Scripts.Render(
        "~/bundles/jqueryval",
        "~/bundles/summernote",
        "~/Scripts/recipeCreate.js",
        "~/Scripts/wysiwyg.js");
    @Styles.Render(
        "~/Content/summernote"
    );
}

score 0 · Answer 2 · answered Apr 28 '17 at 08:33

I have changed bundle.config

bundles.Add(new StyleBundle("~/Content/summernote/summernote.css").Include( "~/Content/summernote/summernote.css" ));

And changed using this bundle in _Layout.cshtml

`@Styles.Render("~/Content/summernote/summernote.css")`

Summernote in Asp.Net MVC

2 Answers2