Reputation: 6625
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