Fatal编程技术网
  • javascript/
  • Javascript 使用JQuery的nicEditor和onchange事件

Javascript 使用JQuery的nicEditor和onchange事件

javascript jquery html

Javascript 使用JQuery的nicEditor和onchange事件,javascript,jquery,html,contenteditable,nicedit,Javascript,Jquery,Html,Contenteditable,Nicedit,我在应用程序中使用了5个以上的niceditor。下面是我的代码 $(document).ready(function() { bkLib.onDomLoaded(function() { nicEditors.editors.push( new nicEditor().panelInstance( document.getElementById('single_answer_description')

我在应用程序中使用了5个以上的niceditor。下面是我的代码

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

});
因为我想用drag_words_段落textarea.onchange of text添加onchange事件，它将添加到一个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
    });
});
但是我无法得到确切的结果，因为我得到的错误提示（）不是函数。请任何人帮助我。我一直在为这个错误奋斗。提前感谢您在代码中多次为同一ID声明新的窗格提示

尝试如下更改代码

//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在本文中的评论

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

$（函数（）{
$（'#拖动单词\段落\文本'）.text（$（'#拖动单词\段落'）.text（））；
var myInstance=new nicEditor({
IConPath:'https://cdn.jsdelivr.net/nicedit/0.9r24/nicEditorIcons.gif'
}).panelInstance（'drag_words_段落'）；
addEvent（'blur'，function（）{
调试器；
var hiddenElem=$（'拖动单词\段落\文本'）；
var text=this.instanceById（'drag_words_段落'）.getContent（）；
if（$（hiddenElem）.text（）==文本）{
返回false；
}否则{
警报（“文本已更改”）；
$（hiddenElem）.text（text）；
}
});
});
函数changeText（）{
var newText=$（'#change_text'）.val（）；
nicEditors.findEditor（'drag_words_段落'）.setContent（newText）；
}
正文{
最小高度：500px；
}

一些随机文本



更改代码中的文本
，您将多次为同一ID声明新的窗格实例

尝试如下更改代码

//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在本文中的评论

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

$（函数（）{
$（'#拖动单词\段落\文本'）.text（$（'#拖动单词\段落'）.text（））；
var myInstance=new nicEditor({
IConPath:'https://cdn.jsdelivr.net/nicedit/0.9r24/nicEditorIcons.gif'
}).panelInstance（'drag_words_段落'）；
addEvent（'blur'，function（）{
调试器；
var hiddenElem=$（'拖动单词\段落\文本'）；
var text=this.instanceById（'drag_words_段落'）.getContent（）；
if（$（hiddenElem）.text（）==文本）{
返回false；
}否则{
警报（“文本已更改”）；
$（hiddenElem）.text（text）；
}
});
});
函数changeText（）{
var newText=$（'#change_text'）.val（）；
nicEditors.findEditor（'drag_words_段落'）.setContent（newText）；
}
正文{
最小高度：500px；
}

一些随机文本


更改文本
尝试以下操作：

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

document.querySelector('.nicEdit-main').addEventListener("input", function(e) {
   console.log(e.target.innerHTML)
}, false);
可能与您定义
.panelInstance
s的方式有关，有时作为字符串，有时作为DOM对象。您的
拖动单词\u段落
段落实例看起来不错，但对其他段落不太确定。如果您将它们全部定义为ID字符串，会发生什么情况？您能用代码解释一下吗？我没有理解您对这个文本区域的观点，我用上面的代码添加了nicEditor，例如
new nicEditor（）。panelInstance（document.getElementById（'single\U answer\U description'））
看起来应该是
new nicEditor（）。panelInstance（“单一答案描述”）
根据niceedit wikiOkie，那么我如何在这部分中添加onchange事件。顺便说一下，我在新div中键入的内容可能与您定义
的方式有关。panelInstance
s有时作为字符串，有时作为DOM对象。您的
drag\u words\u段落
段落实例看起来不错，但是不要对你的其他人不太确定。如果你把它们都定义为ID字符串会发生什么？你能用代码解释一下吗？我没有理解你对这个文本区域的观点，我用上面的代码添加了nicEditor，例如
new nicEditor（）.panelInstance（document.getElementById（'single\U answer\U description'））
看起来应该是
new nicEditor（）.panelInstance（'single\u answer\u description'）
根据niceedit wikiOkie，那么如何在此部分添加onchange事件。顺便说一句，我在新的div中键入了它将添加的内容。我尝试了此代码。无论我在哪里单击它都会发生什么，显示警报。我无法从下拉列表中选择任何内容。只有在键入NiceEditor后，它才会发出警报。我的问题解决了吗？你为什么要添加此选择下拉列表ownits只是为了测试而添加的..为了向您显示，当您更改文本并单击其他元素时，您将不会收到警报..（正如您所说，
无论我在何处单击它都会显示警报。我无法从您以前的评论中的下拉列表中选择任何内容）您可以完全删除它..我收到了此错误“nicEdit.js:37未捕获类型错误：A.removeInstance不是函数“我尝试了这段代码。无论我在哪里单击它都会发生什么显示警报。我无法从下拉列表中选择任何内容。只有在键入nicEditor后，它才会发出警报。我的问题解决了吗？为什么要添加此选择下拉列表？它只是为了测试而添加。向您显示，当您更改文本并单击其他元素时，您不会收到警报。”。。（正如你所说，
无论我在哪里单击它都会显示警报。我无法从下拉列表中选择任何内容，
在你之前的评论中）你可以完全删除它..我收到了这个错误“nicEdit.js:37 Uncaught TypeError:A.removeInstance不是一个函数”