I have used More than 5 nicEditors in my application.Below is my code
$(document).ready(function() {
bkLib.onDomLoaded(function() {
nicEditors.editors.push(
new nicEditor().panelInstance(
document.getElementById('single_answer_description')
)
);
});
bkLib.onDomLoaded(function() {
nicEditors.editors.push(
new nicEditor().panelInstance(
document.getElementById('multiple_answer_description')
)
);
});
bkLib.onDomLoaded(function() {
nicEditors.editors.push(
new nicEditor().panelInstance(
document.getElementById('drag_words_paragraph')
)
);
});
bkLib.onDomLoaded(function(){
var myInstance = new nicEditor().panelInstance('drag_words_paragraph');
myInstance.addEvent('blur', function() {
alert("m");
});
});
bkLib.onDomLoaded(function() {
nicEditors.editors.push(
new nicEditor().panelInstance(
document.getElementById('drop_words_paragraph')
)
);
});
});
In that I want to add onchange event with drag_words_paragraph textarea.onchange of text it will add in one div..I tried like this
bkLib.onDomLoaded(function(){
var myInstance = new nicEditor().panelInstance('drag_words_paragraph');
myInstance.addEvent('blur', function() {
// Your code here that is called whenever the user blurs (stops editing) the nicedit instance
});
});
But I can't get exact result instead im getting error removeInstance() is not a function.Please anyone help me.I am struggling for this errorlongtime.Thanks in advance
In your code you are declare new PaneInstance for same ID more than once.
try changing your code as below
//declare a global variable to store the editor text
var drag_words_paragraph;
$(document).ready(function() {
// assign the text to variable
window.drag_words_paragraph = $('#drag_words_paragraph').text();
bkLib.onDomLoaded(function() {
nicEditors.editors.push(
new nicEditor().panelInstance(
document.getElementById('single_answer_description')
)
);
});
bkLib.onDomLoaded(function() {
nicEditors.editors.push(
new nicEditor().panelInstance(
document.getElementById('multiple_answer_description')
)
);
});
bkLib.onDomLoaded(function() {
nicEditors.editors.push(
var myInstance = new nicEditor().panelInstance('drag_words_paragraph');
myInstance.addEvent('blur', function() {
debugger;
var text = this.instanceById('drag_words_paragraph').getContent();
if (window.drag_words_paragraph == text) {
//Text has not been changed
return false;
} else {
//Text has been changed
//You can call your functions here.
alert('text changed');
window.drag_words_paragraph = text;
}
});
)
);
});
Your code seems to be working.
As commented by Richard Welsh
in this http://wiki.nicedit.com/w/page/518/Editor%20Events
Check the snippet below based on his workaround.
$(function() {
$('#drag_words_paragraph_text').text($('#drag_words_paragraph').text());
var myInstance = new nicEditor({
iconsPath: 'https://cdn.jsdelivr.net/nicedit/0.9r24/nicEditorIcons.gif'
}).panelInstance('drag_words_paragraph');
myInstance.addEvent('blur', function() {
debugger;
var hiddenElem = $('#drag_words_paragraph_text');
var text = this.instanceById('drag_words_paragraph').getContent();
if ($(hiddenElem).text() == text ) {
return false;
} else {
alert('text changed');
$(hiddenElem).text(text);
}
});
});
function changeText(){
var newText = $('#change_text').val();
nicEditors.findEditor('drag_words_paragraph').setContent(newText);
}
body {
min-height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/nicedit/0.9r24/nicEdit.js"></script>
<textarea class="form-control" style="width: 300px; height: 100px;" name="drag_words_paragraph" id="drag_words_paragraph">
Some random text
</textarea>
<div style="display:none" id="drag_words_paragraph_text"></div>
<br/>
<textarea id="change_text" placeholder="enter some text here" ></textarea>
<button id="change_text_btn" onclick="changeText();">change text</button>