jQuery Plugins › jQuery Text Plugins › jQuery A4 WYSIWYG Editor

MS Word Style WYSIWYG Editor with jQuery and Bootstrap - A4 WYSIWYG Editor

File Size: 7.39 KB
Views Total: 10679
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE9+, FireFox, Opera, Safari#Bootstrap#editor#WYSIWYG Editor
MS Word Style WYSIWYG Editor with jQuery and Bootstrap - A4 WYSIWYG Editor

A4 WYSIWYG Editor is a jQuery & Bootstrap plugin for displaying a MS Word style WYSIWYG editor for your editable content.

How to use it:

1. Load jQuery library and Twitter's Bootstrap 3 framework in the html page.

<script src="/path/to/jquery.min.js"></script>
<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<script src="/path/to/bootstrap.min.js"></script>

2. Load the jQuery Bootstrap A4 WYSIWYG Editor's files in the page.

<link rel="stylesheet" href="bootstrap-a4-wysiwyg.css">
<script src="bootstrap-a4-wysiwyg.js"></script>

3. Create a WYSIWYG editor for your content with the contenteditable="true"attribute.

<div id="wysiwygEditor"> 
  
  <!-- Modal Image -->
  <div class="modal fade" id="wysiwygImage" role="dialog">
    <div class="modal-dialog"> 
      
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Insert An Image</h4>
        </div>
        <div class="modal-body">
          <div class="input-group"> <span class="input-group-addon" id="basic-addon1">URL</span>
            <input type="text" class="form-control wysiwyg-url" placeholder="http://">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default wysiwyg-save-image" data-dismiss="modal">Insert</button>
        </div>
      </div>
    </div>
  </div>
  <!-- Modal Link -->
  <div class="modal fade" id="wysiwygLink" role="dialog">
    <div class="modal-dialog"> 
      
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Insert A Link</h4>
        </div>
        <div class="modal-body">
          <div class="input-group"> <span class="input-group-addon" id="basic-addon1">URL</span>
            <input type="text" class="form-control wysiwyg-url" placeholder="http://">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default wysiwyg-save-link" data-dismiss="modal">OK</button>
        </div>
      </div>
    </div>
  </div>
  <div class="wysiwyg-toolbar">
    <button class="btn btn-wysiwyg wysiwyg-change"><span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span></button>
    <button class="btn btn-wysiwyg wysiwyg-change"><span class="glyphicon glyphicon-arrow-right" aria-hidden="true"></span></button>
    <span class="separator"></span>
    <div class="dropdown wysiwyg-font-family">
      <button class="btn btn-wysiwyg dropdown-toggle" style="margin-right:0" type="button" data-toggle="dropdown"><span class="glyphicon glyphicon-font" aria-hidden="true"></span> <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li style="font-family:Arial, sans-serif">Arial</li>
        <li style="font-family:Comic Sans MS, sans-serif">Comic Sans MS</li>
        <li style="font-family:Courier New, sans-serif">Courier New</li>
        <li style="font-family:Times New Roman, sans-serif">Times New Roman</li>
        <li style="font-family:Verdana, sans-serif">Verdana</li>
      </ul>
    </div>
    <div class="dropdown">
      <button class="btn btn-wysiwyg dropdown-toggle" style="margin-right:0" type="button" data-toggle="dropdown"><span class="glyphicon glyphicon-text-height" aria-hidden="true"></span> <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li class="wysiwyg-font-size" data-size="8pt" style="font-size:8pt">8pt</li>
        <li class="wysiwyg-font-size" data-size="10pt" style="font-size:10pt">10pt</li>
        <li class="wysiwyg-font-size" data-size="12pt" style="font-size:12pt">12pt</li>
        <li class="wysiwyg-font-size" data-size="14pt" style="font-size:14pt">14pt</li>
        <li class="wysiwyg-font-size" data-size="18pt" style="font-size:18pt">18pt</li>
        <li class="wysiwyg-font-size" data-size="24pt" style="font-size:24pt">24pt</li>
        <button class="wysiwyg-font-size" data-size="36pt" style="font-size:36pt">36pt</button>
      </ul>
    </div>
    <button class="btn btn-wysiwyg wysiwyg-font-weight"><span class="glyphicon glyphicon-bold" aria-hidden="true"></span></button>
    <button class="btn btn-wysiwyg wysiwyg-font-style"><span class="glyphicon glyphicon-italic" aria-hidden="true"></span></button>
    <div class="dropdown">
      <button class="btn btn-wysiwyg dropdown-toggle" style="margin-right:0" type="button" data-toggle="dropdown"><span class="glyphicon glyphicon-text-color" aria-hidden="true"></span> <span class="caret"></span></button>
      <div class="dropdown-menu">
        <button class="wysiwyg-color" style="background-color:#ffffff" data-color="#ffffff"></button>
        <button class="wysiwyg-color" style="background-color:#d3d3d3" data-color="#d3d3d3"></button>
        <button class="wysiwyg-color" style="background-color:#808080" data-color="#808080"></button>
        <button class="wysiwyg-color" style="background-color:#000000" data-color="#000000"></button>
        <button class="wysiwyg-color" style="background-color:#ff0000" data-color="#ff0000"></button>
        <button class="wysiwyg-color" style="background-color:#ffa500" data-color="#ffa500"></button>
        <button class="wysiwyg-color" style="background-color:#ffff00" data-color="#ffff00"></button>
        <button class="wysiwyg-color" style="background-color:#00ff00" data-color="#00ff00"></button>
        <button class="wysiwyg-color" style="background-color:#00ffff" data-color="#00ffff"></button>
        <button class="wysiwyg-color" style="background-color:#0000ff" data-color="#0000ff"></button>
        <button class="wysiwyg-color" style="background-color:#9c00ff" data-color="#9c00ff"></button>
        <button class="wysiwyg-color" style="background-color:#ff00ff" data-color="#ff00ff"></button>
      </div>
    </div>
    <div class="dropdown">
      <button class="btn btn-wysiwyg dropdown-toggle" style="margin-right:0" type="button" data-toggle="dropdown"><span class="glyphicon glyphicon-text-background" aria-hidden="true"></span> <span class="caret"></span></button>
      <div class="dropdown-menu">
        <button class="wysiwyg-background" style="background-color:#ffffff" data-color="#ffffff"></button>
        <button class="wysiwyg-background" style="background-color:#d3d3d3" data-color="#d3d3d3"></button>
        <button class="wysiwyg-background" style="background-color:#808080" data-color="#808080"></button>
        <button class="wysiwyg-background" style="background-color:#000000" data-color="#000000"></button>
        <button class="wysiwyg-background" style="background-color:#ff0000" data-color="#ff0000"></button>
        <button class="wysiwyg-background" style="background-color:#ffa500" data-color="#ffa500"></button>
        <button class="wysiwyg-background" style="background-color:#ffff00" data-color="#ffff00"></button>
        <button class="wysiwyg-background" style="background-color:#00ff00" data-color="#00ff00"></button>
        <button class="wysiwyg-background" style="background-color:#00ffff" data-color="#00ffff"></button>
        <button class="wysiwyg-background" style="background-color:#0000ff" data-color="#0000ff"></button>
        <button class="wysiwyg-background" style="background-color:#9c00ff" data-color="#9c00ff"></button>
        <button class="wysiwyg-background" style="background-color:#ff00ff" data-color="#ff00ff"></button>
      </div>
    </div>
    
    <div class="dropdown wysiwyg-list-style-type">
      <button class="btn btn-wysiwyg dropdown-toggle" style="margin-right:0" type="button" data-toggle="dropdown"><span class="glyphicon glyphicon-list" aria-hidden="true"></span> <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li style="font-size:8pt">8pt</li>
        <li style="font-size:10pt">10pt</li>
        <li style="font-size:12pt">12pt</li>
        <li style="font-size:14pt">14pt</li>
        <li style="font-size:18pt">18pt</li>
        <li style="font-size:24pt">24pt</li>
        <li style="font-size:36pt">36pt</li>
      </ul>
    </div>
    <span class="separator"></span>
    <button class="btn btn-wysiwyg wysiwyg-text-align"><span class="glyphicon glyphicon-align-left" aria-hidden="true"></span></button>
    <button class="btn btn-wysiwyg wysiwyg-text-align"><span class="glyphicon glyphicon-align-center" aria-hidden="true"></span></button>
    <button class="btn btn-wysiwyg wysiwyg-text-align"><span class="glyphicon glyphicon-align-right" aria-hidden="true"></span></button>
    <button class="btn btn-wysiwyg wysiwyg-text-align"><span class="glyphicon glyphicon-align-justify" aria-hidden="true"></span></button>
    <span class="separator"></span>
    <button class="btn btn-wysiwyg wysiwyg-link"><span class="glyphicon glyphicon-link" aria-hidden="true"></span></button>
    <button class="btn btn-wysiwyg wysiwyg-image"><span class="glyphicon glyphicon-picture" aria-hidden="true"></span></button>
  </div>
  <div class="wysiwyg-page" contenteditable="true"> Editable Content Here </div>
</div>

4. Active the WYSIWYG editor.

var myWysiwyg = new Wysiwyg({
    template: 'flat'
});


var pageEditor = $('#wysiwygEditor');

pageEditor.on('mouseup', function() {
    myWysiwyg.select();
});

5. All default options.

wysiwygType: 'default',
template: 'default', // or flat
wysiwygChange: true,
fontFamily: true,
fontSize: true,
fontWeight: true,
fontStyle: true,
color: true,
background: true,
listStyleType: true,
textAlign: true,
link: true,
image: true,
margin: true

Change log:

2015-11-30

  • update margin and build page number system

This awesome jQuery plugin is developed by wroblja. For more Advanced Usages, please check the demo page or visit the official website.