NicEdit detect when toolbar setting has changed

210 Views Asked by At

How to detect if some toolbar settings have been applied on NicEdit editor (like font size, font family, etc.)? I'm trying to show a real-time changes, not when the user has lost focus or has clicked outside the editor.

$.getScript("https://cdnjs.cloudflare.com/ajax/libs/NicEdit/0.93/nicEdit.min.js", function ( data, textStatus, jqxhr ) {
    var _content = "";
    var slideContent = new nicEditor({
        iconsPath: 'https://cdn.jsdelivr.net/nicedit/0.9r24/nicEditorIcons.gif'
    }).panelInstance('slide_content');
    
    // fix width
    $('.nicEdit-panelContain').parents('div:first').css('width', '100%');
    $('.nicEdit-main').css('width', '100%').css('minHeight', '54px').parents('div:first').css('width', '100%').css('minHeight', '54px');

    $("div.nicEdit-main").bind('keyup', function () {
        _content = $(this).html();
        setOutput(_content);
    });

    slideContent.addEvent('blur', function () {
        _content = $("div.nicEdit-main").html();
        setOutput(_content);
    });

    slideContent.addEvent("focus", function () {
        _content = $("div.nicEdit-main").html();
        setOutput(_content);
    });
    
});

function setOutput(content) {
   $("#output").html(content);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group">
   <label>Content:</label>
   <textarea id="slide_content" class="form-control"></textarea>
</div>
<br>
Test output: <br><br>
<div id="output"></div>

0

There are 0 best solutions below