locked
Bootstrap.Wysiwyg didnt work well RRS feed

  • Question

  • User2097951763 posted

    I struggled to create a simple asp.net webpages website that had very basic component of CURD. It had 3 root files and a helper file(editor) in App_Code folder. When I creating new content, the bootstrap.wysiwyg editor worked well, I can align the text , upload images and change text's style; but when i edit the content, the bootstrap.wysiwyg editor didn't work, it can't do anything.  Maybe someone can help me to find out the key of success.

    1. GetValue.cshtml for Creating data;

    @{
        Page.title = "Create New Content";
        var content = "";
    
        var db = Database.Open("myconn");
        if (IsPost)
        {
            var insertQuery = "INSERT INTO TEST(Content) VALUES(@0)";
            content = Request.Unvalidated().Form["content"];
            db.Execute(insertQuery, content);
            Response.Redirect(Href("~/ShowValue", db.GetLastInsertId()));
        }
    }
    <h1>@Page.title</h1>
    
    @MyHelpers.Editor(content)

    2. ShowValue.cshtml for Displaying data;

    @{
        Layout = "_Layout.cshtml";
        var contentId = UrlData[0].AsInt();
    
        var db = Database.Open("myconn");
    
        var content = db.QuerySingle("SELECT * FROM Test WHERE Id = @0", contentId);
    }
    
    
    <h1>Stored Content:<small><a href="~/EditValue/@contentId">Edit</a></small></h1>
    @Html.Raw(content.Content)

    3. EditValue.cshtml for Editing data

    @{
        
        Page.title = "Edit Content";
    
        var contentId = UrlData[0].AsInt();
        var db = Database.Open("myconn");
        var selectQueryString = "SELECT Content FROM Test WHERE Id=@0";
        var row = db.QuerySingle(selectQueryString, contentId);
        var content = row.Content;
    
        if (IsPost)
        {
            var updateQueryString =
                "UPDATE Test SET Content=@0 WHERE Id=@1";
            content = Request.Unvalidated().Form["content"];
            db.Execute(updateQueryString, content, contentId);
            Response.Redirect(Href("~/ShowValue", contentId));
        }
    
    }
    <h1>@Page.title</h1>
    
    @MyHelpers.Editor(content)

    4.myhelper

    @helper Editor(string content) {   
            
            <form method="post">
                <div id="alerts"></div>
                <div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="icon-font"></i><b class="caret"></b></a>
                        <ul class="dropdown-menu"></ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="icon-text-height"></i>&nbsp;<b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
                            <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
                            <li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
                        </ul>
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="icon-bold"></i></a>
                        <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="icon-italic"></i></a>
                        <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="icon-strikethrough"></i></a>
                        <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="icon-underline"></i></a>
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="icon-list-ul"></i></a>
                        <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="icon-list-ol"></i></a>
                        <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="icon-indent-left"></i></a>
                        <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="icon-indent-right"></i></a>
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="icon-align-left"></i></a>
                        <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="icon-align-center"></i></a>
                        <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="icon-align-right"></i></a>
                        <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="icon-align-justify"></i></a>
                    </div>
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="icon-link"></i></a>
                        <div class="dropdown-menu input-append">
                            <input class="span2" placeholder="URL" type="text" data-edit="createLink" />
                            <button class="btn" type="button">Add</button>
                        </div>
                        <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="icon-cut"></i></a>
                    </div>
    
                    <div class="btn-group">
                        <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="icon-picture"></i></a>
                        <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
                    </div>
                    <div class="btn-group">
                        <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="icon-undo"></i></a>
                        <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="icon-repeat"></i></a>
                    </div>
                    <input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
                </div>
                <div id="editor" contenteditable="true"> @Html.Raw(content)</div>
                <input type="hidden" name="content" id="content" value="@Request.Unvalidated().Form["content"]">
                <input type="submit" id="submit" value="Submit" class="btn btn-danger">
    
            </form>
    
    
    
            
                <script src="~/Scripts/jquery-3.1.1.min.js"></script>
                <script src="~/Scripts/bootstrap.min.js"></script>
                <script src="Scripts/jquery.hotkeys.js"></script>
                <script src="Scripts/google-code-prettify/prettify.js"></script>
                <script src="Scripts/bootstrap-wysiwyg.js"></script>
                <script type="text/javascript">
            $(function () {
                $("#submit").on('click', function () {
                    $("#content").val($("#editor").html());
                });
            });
                </script>
    
    
                <script>
            $(function () {
                function initToolbarBootstrapBindings() {
                    var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
                        'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
                        'Times New Roman', 'Verdana'],
                        fontTarget = $('[title=Font]').siblings('.dropdown-menu');
                    $.each(fonts, function (idx, fontName) {
                        fontTarget.append($('<li><a data-edit="fontName ' + fontName + '" style="font-family:\'' + fontName + '\'">' + fontName + '</a></li>'));
                    });
                    $('a[title]').tooltip({ container: 'body' });
                    $('.dropdown-menu input').click(function () { return false; })
                        .change(function () { $(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle'); })
                        .keydown('esc', function () { this.value = ''; $(this).change(); });
    
                    $('[data-role=magic-overlay]').each(function () {
                        var overlay = $(this), target = $(overlay.data('target'));
                        overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
                    });
                    if ("onwebkitspeechchange" in document.createElement("input")) {
                        var editorOffset = $('#editor').offset();
                        $('#voiceBtn').css('position', 'absolute').offset({ top: editorOffset.top, left: editorOffset.left + $('#editor').innerWidth() - 35 });
                    } else {
                        $('#voiceBtn').hide();
                    }
                };
                function showErrorAlert(reason, detail) {
                    var msg = '';
                    if (reason === 'unsupported-file-type') { msg = "Unsupported format " + detail; }
                    else {
                        console.log("error uploading file", reason, detail);
                    }
                    $('<div class="alert"> <button type="button" class="close" data-dismiss="alert">&times;</button>' +
                        '<strong>File upload error</strong> ' + msg + ' </div>').prependTo('#alerts');
                };
                initToolbarBootstrapBindings();
                $('#editor').wysiwyg({ fileUploadError: showErrorAlert });
                window.prettyPrint && prettyPrint();
            });
                </script>
            
    }

    Friday, March 31, 2017 12:16 PM

All replies

  • User-2057865890 posted

    Hi webMvc,

    but when i edit the content, the bootstrap.wysiwyg editor didn't work

    If you use any type of JavaScript related code, you may need to check the browser's development tools console (F12) if any errors are present.

    Best Regards,

    Chris

    Monday, April 3, 2017 6:59 AM