Bootstrap Wysiwyg

A lightweight WYSIWYG editor. Which is compatible wtih Bootstrap 4 and 3!

In eo enim positum est id, quod dicimus esse expetendum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec para/doca illi, nos admirabilia dicamus. Cur fortior sit, si illud, quod tute concedis, asperum et vix ferendum putabit? Frater et T. Quid ei reliquisti, nisi te, quoquo modo loqueretur, intellegere, quid diceret? Duo Reges: constructio interrete. Ergo hoc quidem apparet, nos ad agendum esse natos. Videsne quam sit magna dissensio?

Qui ita affectus, beatum esse numquam probabis;

Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Commoda autem et incommoda in eo genere sunt, quae praeposita et reiecta diximus; Ille enim occurrentia nescio quae comminiscebatur; Sit hoc ultimum bonorum, quod nunc a me defenditur;

  • Et quidem, inquit, vehementer errat;
  • Qui si omnes veri erunt, ut Epicuri ratio docet, tum denique poterit aliquid cognosci et percipi.
  • Cum salvum esse flentes sui respondissent, rogavit essentne fusi hostes.
  1. Rhetorice igitur, inquam, nos mavis quam dialectice disputare?
  2. Nam illud vehementer repugnat, eundem beatum esse et multis malis oppressum.
  3. Dulce amarum, leve asperum, prope longe, stare movere, quadratum rotundum.

Suam denique cuique naturam esse ad vivendum ducem.

Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. Videsne, ut haec concinant? Bonum incolumis acies: misera caecitas. Dempta enim aeternitate nihilo beatior Iuppiter quam Epicurus; Quorum sine causa fieri nihil putandum est. At enim sequor utilitatem. Ita fit beatae vitae domina fortuna, quam Epicurus ait exiguam intervenire sapienti. Consequatur summas voluptates non modo parvo, sed per me nihilo, si potest;

Theophrastum tamen adhibeamus ad pleraque, dum modo plus in
virtute teneamus, quam ille tenuit, firmitatis et roboris.

Non igitur de improbo, sed de callido improbo quaerimus,
qualis Q.

Age nunc isti doceant, vel tu potius quis enim ista melius?

Egone quaeris, inquit, quid sentiam? Quare ad ea primum, si videtur; Cur iustitia laudatur? Ita relinquet duas, de quibus etiam atque etiam consideret. Sed quot homines, tot sententiae; Frater et T. Tum ille: Ain tandem? Quid sequatur, quid repugnet, vident. Quid est enim aliud esse versutum? Occultum facinus esse potuerit, gaudebit; Restinguet citius, si ardentem acceperit.

Quid ergo aliud intellegetur nisi uti ne quae pars naturae neglegatur? Nulla erit controversia. In qua quid est boni praeter summam voluptatem, et eam sempiternam? Ita prorsus, inquam; Nam de isto magna dissensio est.

Getting Started

Requirements

There are a few requirements you need to meet before you can use WM Wysiwyg Editor, those are jQuery library, Bootstrap 4 and Font Awesome. WM Wysiwyg Editor can also be used with Bootstrap 3!

Installation

Installing WM Wysiwyg Editor is pretty straight forward. Simply include the jQuery, Bootstrap 4, Font Awesome, WM Wysiwyg Editor and CSS library file, like so: 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" type="text/css" media="screen" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" media="screen" />
<link rel="stylesheet" href="css/wmwysiwygeditor.css" type="text/css" media="screen" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/wmwysiwygeditor.js"></script>
Notice the jQuery library I included was google code library, We recommend using latest version. It is highly recommended that all JavaScript be placed after all your content at the footer of the page, just before the end </body> tag. This ensures that all content is loaded before manipulation of the DOM occurs.

Usage

Basic

Create your <div> with an ID or Class. 
<div id="wmwysiwyg-basic-use"></div>
Now activate the WM Wysiwyg Editor like this 
$('#wmwysiwyg-basic-use').wmwysiwyg();

With options

Another example with some options defined. 
$('#wmwysiwyg-with-options').wmwysiwyg({
    toolbar_class: 'text-center bg-primary',
    toolbar_btn_size: 'sm',
    toolbar_btn_class: 'btn-primary',
    height: 300,
    btns: [
        'fullScreen',
        'formatting', 'fontSize',
        'bold', 'italic', 'underline', 
        'foreColor', 'backColor',
        'link', 'insertImage', 'createTable',
        'textAlignment',
        'indent', 'outdent', 
        'ul', 'ol', 'hr',
        'removeFormat',
    ],
});

Hey There!

Its another Bootstrap WYSIWYG Editor example.

Options and Methods

Available options and methods :

Name type default description
Options
bootstrap_v number null If you want to use the editor with Bootstrap 3 version, use bootstrap_v: 3.
class string null CSS class for the editor.
toolbar_class string null CSS class for Toolbar.
toolbar_btn_size string null Define Toolbar’s size. Available options sm and lg. For Bootstrap 3 xs, sm, lg and xl
toolbar_btn_class string null CSS class for the buttons. You can use Bootstrap’s button classes.
height numbers null Heights for the editor. For example – 300
btns array/object 
[['source', 'fullScreen'],
['formatting', 'fontSize'],
['bold', 'italic', 'underline', 'strikeThrough'], 
['foreColor', 'backColor'],
['link', 'insertImage', 'createTable'],
'textAlignment',
['subscript', 'superscript'], 
['indent', 'outdent'], 
['ul', 'ol', 'hr'],
'removeFormat']
 Select/Define buttons name to show in Toolbar.
Methods
getContents method 
$('#wmwysiwyg').wmwysiwyg('getContents');
 It returns the contents of the editor.
setContents method 
$('#wmwysiwyg').wmwysiwyg('setContents', html);
 It set the contents of the editor.
destroy method 
$('#wmwysiwyg').wmwysiwyg('destroy');
 Method to destroy the editor.

There are 2 more methods which can be used to add/append contents at cursor/caret position.

$('#wmwysiwyg').wmwysiwyg('createPlaceholder');
$('#wmwysiwyg').wmwysiwyg('replacelaceholder', html);

/* Example of use  */
/* Click on the Blue Button below to test it */
$('#placeholder-action').click(function(){
    $('#wmwysiwyg-placeholder').wmwysiwyg('createPlaceholder');
    var some_html = '<p>Lorem ipsum... Lorem ippsum.</p>';
        some_html += '<blockquote class="blockquote">Its a bootstrap blockquote.</blockquote>';
    $('#wmwysiwyg-placeholder').wmwysiwyg('replacePlaceholder', some_html);
});

Hey There!

Its another MW WYSIWYG Editor example to show use of Placeholder methods.

CSS Style

List of important CSS Classes to change styles

/*WM Wysiwyg Editor's container*/
.wmwysiwyg-container{

}

    /*WM Wysiwyg Editor's toolbar*/
    .wmwysiwyg-toolbar{

    }

    /*WM Wysiwyg Editor's editor*/
    .wmwysiwyg-editor{

    }

/*WM Wysiwyg Editor's container with FullScreen*/
.wmwysiwyg-fullscreen{

}
    
    /*WM Wysiwyg Editor's editor with FullScreen*/
    .wmwysiwyg-fullscreen .wmwysiwyg-toolbar{

    }

More Products

DnD Zone

A tiny vanilla javascript library to create drop zone for input file element and its FREE to use.
Readmore

jQuery Dual List

Its a drop-in stylish replacement for the standard <select> with multiple attribute activated.
Readmore

jQuery Carousel

A lightweight and responsive Carousel.
Readmore