{"id":82779,"date":"2025-06-24T10:31:03","date_gmt":"2025-06-24T10:31:03","guid":{"rendered":"https:\/\/mailinvest.blog\/index.php\/2025\/06\/24\/bootstrap-wysiwyg-editor\/"},"modified":"2025-06-24T10:32:31","modified_gmt":"2025-06-24T10:32:31","slug":"bootstrap-wysiwyg-editor","status":"publish","type":"post","link":"https:\/\/mailinvest.blog\/index.php\/2025\/06\/24\/bootstrap-wysiwyg-editor\/","title":{"rendered":"Bootstrap WYSIWYG Editor"},"content":{"rendered":"<\/a>\n<\/p>\n

LIVE PREVIEW<\/a>BUY FOR $13<\/a><\/p>\n

<\/p>\n

Getting Began<\/h2>\n

Necessities<\/h3>\n

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!<\/p>\n

On this model, the contenteditable<\/code> ingredient is inside an iframe<\/code>. Because of this, the editable content material shall be remoted from the remainder of the web page.<\/p><\/blockquote>\n

Set up<\/h3>\n

Putting in Bootstrap WYSIWYG Editor is fairly straight ahead. Merely embrace the jQuery, Bootstrap 5, Bootstrap WYSIWYG Editor and CSS library file, like so:<\/p>\n

<hyperlink rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.internet\/npm\/bootstrap@5.3.3\/dist\/css\/bootstrap.min.css\" kind=\"textual content\/css\" media=\"display screen\" \/>\n<hyperlink rel=\"stylesheet\" href=\"css\/wmwysiwygeditor.css\" kind=\"textual content\/css\" media=\"display screen\" \/>\n\n<script kind=\"textual content\/javascript\" src=\"https:\/\/code.jquery.com\/jquery-3.0.0.min.js\"><\/script>\n<script kind=\"textual content\/javascript\" src=\"https:\/\/cdn.jsdelivr.internet\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js\"><\/script>\n<script kind=\"textual content\/javascript\" src=\"js\/wmwysiwygeditor.js\"><\/script><\/code><\/pre>\n
Discover the jQuery library I included was google code library, We advocate utilizing newest model.<\/p>\n
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><\/code> tag. This ensures that every one content material is loaded earlier than manipulation of the DOM happens.<\/p>\n
Utilization<\/h2>\n
Fundamental<\/h3>\n
Create your <div><\/code> with an ID or Class.<\/p>\n
<div id=\"wmwysiwyg-basic-use\"><\/div><\/code><\/pre>\n
Now activate the Bootstrap WYSIWYG Editor like this<\/p>\n
$('#wmwysiwyg-basic-use').wmwysiwyg();<\/code><\/pre>\n
With choices<\/h3>\n
One other instance with some choices outlined.<\/p>\n
$('#wmwysiwyg-with-options').wmwysiwyg({\n    class: 'border-primary',\n    toolbar_class: 'text-center border-primary bg-primary',\n    statusbar_class: 'border-primary bg-primary text-white',\n    toolbar_btn_class: 'btn-sm btn-primary',\n    top: 300,\n    btns: [\n        'fullScreen',\n        'formatting', 'fontSize',\n        'bold', 'italic', 'underline', \n        'foreColor', 'backColor',\n        'link', 'insertImage', 'createTable',\n        'textAlignment',\n        'indent', 'outdent', \n        'ul', 'ol', 'hr',\n        'removeFormat',\n    ]\n});<\/code><\/pre>\n

\n\"Bootstrap
\n<\/a><\/p>\n
\n