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.
<!-- HTML -->
<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 MW WYSIWYG Editor example.
Options
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{
}
