Dexter Bengil
Dexter Bengil

Reputation: 6625

NicEdit detect when toolbar setting has changed

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>

Upvotes: 1

Views: 218

Answers (0)

Related Questions