nicEditor and onchange event using JQuery

Question

我在应用程序中使用了超过 5 个 nicEditors。下面是我的代码

$(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')
            )
        );
    });
});

在我想添加 onchange 事件与 textarea.onchange 的文本drag_words_paragraph它将在一个div. 中添加。我试过这样

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
    });
});

但是我无法得到确切的结果，而是我收到错误 removeInstance（） 不是一个函数。请任何人帮助我。我一直在为这个错误而苦苦挣扎。提前致谢

Answer 1

在您的代码中，您多次为同一 ID 声明新的 PaneInstance。

尝试更改代码，如下所示

//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;
                  }
                });
            )
        );
    });

您的代码似乎正在工作。

正如Richard Welsh在本 http://wiki.nicedit.com/w/page/518/Editor%20Events 中所评论

的那样

根据他的解决方法检查下面的代码段。

$(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>

Answer 2

试试这个：

document.querySelector('.nicEdit-main').addEventListener("input", function(e) {
   console.log(e.target.innerHTML)
}, false);