Bootstrap-wysiwyg of Rich Text

BOOTSTRAP-WYSIWYG

The BOOTSTRAP-WYSIWYG plugin has good editing function and display effect.
First, there are many ways to use the Internet, in this record their own use of some of the problems and solutions.

Related dependencies:

Bootstrap-wysiwyg.js    (CORE)
jquery.hotkeys.js       (shortcut key)
prettify.js             

prettify.css
edit.css                (page show effect, customizable)

bootstrap.min.css
font-awesome.css        (font picture style)

bootstrap.min.js
Jquery2.1.4.min.js

Related file address: "Related file Download Address"

Page code:

Toolbar definition <div class= "Btn-toolbar" data-role= "Editor-toolbar" data-target= "#editor" > <div class= "Btn-group" &
        Gt <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&gt
      ; <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= "Dropdo" Wn-menu "> <li><a data-edit=" fontsize 5 "><font size=" 5 "&GT;HUGE&LT;/FONT&GT;&LT;/A&GT;&LT;/LI&G
          T <li><a data-edit= "FontSize 3" ><font size= "3" >Normal</font></a></li> &LT;LI&G
  T;<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)" & Gt;<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=" Striketh Rough "><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=" BT N-group "> <a class=" btn "data-edit=" insertunorderedlist "title=" Bullet "><i class=" Icon-list-ul "&G" t;</i></a> <a class= "btn" data-edit= "insertorderedlist" title= "number List" ><i class= "Icon-li St-ol "></i></a> <a class=" btn "data-edit=" outdent "title=" Reduce indent (shift+tab) "><i cl ass= "Icon-indent-left" &Gt;</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=" just Ifyleft "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-a Lign-justify "></i></a> </div> <div class=" Btn-group "> <a class=" btn Dr Opdown-toggle "data-toggle=" dropdown "title=" Hyperlink "><i class=" Icon-link "></i></a> ;d IV 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= "u Nlink "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" D ata-edit= "Insertimage"/> </div> <div class= "Btn-group" > <a class= "btn" data-edit= "u Ndo "title=" Undo (ctrl/cmd+z) "><i class=" Icon-undo "></i></a> <a class=" btn "data-edit=" red O "title=" Redo (ctrl/cmd+y) "><i class=" icon-repeat "></i></a> </div> <input type= "Text" data-edit= insertText "id=" voicebtn "x-webkit-speech=" "> </div>//Text input area <div id=" Editor "> Input &hellip
    ; </div>

JS Code:

Initialize toolbar 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 ();
    }
    };
        Error prompt 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;</butt
    On> ' + ' <strong>file upload error</strong> ' +msg+ ' </div> '). Prependto (' #alerts ');
    }; InittoolbarbootstraPbindings (); $ (' #editor '). WYSIWYG ({fileuploaderror:showerroralert});

Two, the custom uploads the picture to the server
Main modification of a method in Bootstrap-wysiwyg.js

var readfileintodataurl = function (fileInfo) {//
        original method
//      var loader = $. Deferred (),
//          Freader = new FileReader ();      freader.onload = function (e) {
//          loader.resolve (e.target.result);
//      };      freader.onerror = loader.reject;      freader.onprogress = loader.notify;      Freader.readasdataurl (fileInfo);
return      loader.promise ();

        Custom method
        var form = new FormData ();
        Form.append ("file", fileInfo);
        var xhr = new XMLHttpRequest ();
        Xhr.open ("Post", "/imgupload", false),//Background received method, return the picture path (full path, otherwise the page does not show pictures)
        xhr.send (form);
        return xhr.responsetext;
    };

Examples of methods received in the background:

/** * News picture upload, return full path * @param file picture files * @return Picture Server full path * * @Reques  Tmapping (value = "Imgupload", method = Requestmethod.post) @ResponseBody @LogOperation ("Upload picture file") Public String Imgupload (@RequestPart (required = false, value = "file") Multipartfile file) {String Picurl =
        Null try {fileresult Fileresult = Filefacade.postobject (Category.image, Subcategory.program,
            File.getoriginalfilename (), file.getbytes ());
                if (Fileresult!= null && fileresult.issuccess ()) {String fileName = Fileresult.getfilename (); Get full path Fileresult result = Filefacade.getobject (Category.image, Subcategory.program, Filen
                AME);
            Picurl = Result.getfilename ();
        }}catch (IOException ex) {throw new RuntimeException ("Upload picture failed");
    return picurl; }

Third, pass the parameter

The contents of the input area are received in the back table using jquery
$ ("#editor"). html ();

End:
This is just a simple use example.
There are many more convenient use of skills, want to have experienced friends to leave a message and learn together.