javascriptjqueryhtmlcontenteditablenicedit

nicEditor and onchange event using JQuery


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


Solution

  • 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>