LIVE PREVIEWBUY FOR $13

Getting Began

Necessities

There are just a few necessities you want to meet earlier than you should utilize Bootstrap WYSIWYG Editor, these are jQuery (model 3.x.x), Bootstrap 5. Bootstrap WYSIWYG Editor can be used with Bootstrap 4!

On this model, the contenteditable ingredient is inside an iframe. Because of this, the editable content material shall be remoted from the remainder of the web page.

Set up

Putting in Bootstrap WYSIWYG Editor is fairly straight ahead. Merely embrace the jQuery, Bootstrap 5, Bootstrap WYSIWYG Editor and CSS library file, like so: 

<hyperlink rel="stylesheet" href="https://cdn.jsdelivr.internet/npm/[email protected]/dist/css/bootstrap.min.css" kind="textual content/css" media="display screen" />
<hyperlink rel="stylesheet" href="css/wmwysiwygeditor.css" kind="textual content/css" media="display screen" />

<script kind="textual content/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script kind="textual content/javascript" src="https://cdn.jsdelivr.internet/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script kind="textual content/javascript" src="js/wmwysiwygeditor.js"></script>

Discover the jQuery library I included was google code library, We advocate utilizing newest model.

It’s extremely beneficial that every one JavaScript be positioned after all of your content material on the footer of the web page, simply earlier than the tip </physique> tag. This ensures that every one content material is loaded earlier than manipulation of the DOM happens.

Utilization

Fundamental

Create your <div> with an ID or Class. 

<div id="wmwysiwyg-basic-use"></div>

Now activate the Bootstrap WYSIWYG Editor like this 

$('#wmwysiwyg-basic-use').wmwysiwyg();

With choices

One other instance with some choices outlined. 

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


Bootstrap WYSIWYG Editor CTA


Source