JSFiddle - React, Tailwind, and code Playground

by Сергей Тарасевич

HTML

<link rel="stylesheet" href="http://d0gmatist.pro/templates/madison2/media_catalog/trumbowyg/ui/trumbowyg.min.css">
<link rel="stylesheet" href="http://d0gmatist.pro/templates/madison2/media_catalog/trumbowyg/plugins/colors/ui/trumbowyg.colors.min.css">
<script src="http://d0gmatist.pro/templates/madison2/media_catalog/trumbowyg/trumbowyg.min.js"></script>
<script src="http://d0gmatist.pro/templates/madison2/media_catalog/trumbowyg/plugins/colors/trumbowyg.colors.min.js"></script>
<script src="http://d0gmatist.pro/templates/madison2/media_catalog/trumbowyg/langs/ru.min.js"></script>
<div id="add_comment"></div>
<div data-add_comment="btn">add_comment</div>===========================================
<div id="editor"></div>
<div data-add_comment="btn2">add_comment2</div>

JavaScript

$('#add_comment').trumbowyg({
    btnsDef: {
        // Customizables dropdowns
        image: {
            dropdown: ['insertImage', 'upload', 'base64'],
            ico: 'insertImage'
        }
    },
    resetCss: true,
    lang: 'ru',
    btns: ['viewHTML', '|', 'formatting', '|', 'btnGrp-design', '|', 'link', '|', 'image', '|', 'btnGrp-justify', '|', 'btnGrp-lists', '|', 'foreColor', 'backColor', '|', 'horizontalRule']
});

$(document).on('click', '[data-add_comment="btn"]', function () {
    var a = $('#add_comment').trumbowyg('html');

});

$(document).on('click', '[data-add_comment="btn2"]', function () {
    var $modal = $("#editor").trumbowyg("openModal", {
        title: "A title for modal box",
        content: "<p>Content in HTML which you want include in created modal box</p>"
    });

});

// Listen clicks on modal box buttons
$modal.on('trumbowyg-confirm', function (e) {
    // Save datas
    $("#editor").trumbowyg("closeModal");
});
$modal.on('trumbowyg-cancel', function (e) {
    $("#editor").trumbowyg("closeModal");
});