如何检测使用 easyeditor 初始化的文本区域上的值已更改？

Question

我已经使用 easyeditor 库初始化了文本区域的富文本编辑器：

$(document).ready(function(){
    $("#editor").easyEditor({
         buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'h4', 'alignleft', 'aligncenter', 'alignright']
     });
})

<link rel="stylesheet" href="https://unpkg.com/[email protected]/src/easyeditor.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/src/jquery.easyeditor.js"></script>

<textarea id="editor"></textarea>

我想更改

textarea

来触发一些逻辑（例如表单验证）我该如何做到这一点？

Answer 1

经过多次尝试解决该问题，使用此库的文本区域的唯一任何事件侦听器都不起作用。但是使用

EasyEditor

实例，您可以获得 div 元素而不是文本区域。 textarea 元素通过 css 隐藏。

在此元素上，您可以放置输入法事件监听器：

$(document).ready(function(){
   const editor = new EasyEditor("#editor",{
         buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'h4', 'alignleft', 'aligncenter', 'alignright']
     });
     
     $(editor.elem).on('input',function(e){
        const target = e.target;
        console.log(e.target);
        document.getElementById("valueDisplay").innerText = $("#editor").val();
     });
})

<link rel="stylesheet" href="https://unpkg.com/[email protected]/src/easyeditor.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/src/jquery.easyeditor.js"></script>

<textarea id="editor"></textarea>

<div id="valueDisplay"></div>

在上面的示例中，

editor.elem

是Easyeditor初始化的编辑器元素。这是一个具有

div

true 的

contenteditable

元素。底层文本区域被隐藏，并且根据输入值，文本区域通过 Easieditor 同步。

因此，您可以在编辑器上放置一个输入事件监听器

div

，如上面的示例所示。然后您可以从文本区域检索值。

---

如果触发 ajax 值，建议首先消除事件回调。另外，对于最新值，请使用

editor.elem

的innerHTML。使用文本区域，您可能无法阅读乳文内容，尤其是当用户连续提供输入时。

/**
 * Debounce function as described into:
 * https://www.freecodecamp.org/news/javascript-debounce-example/
 *
 * It delays the execution of a function func after wait miliseconds (?)
 * Usefull for avoiding multiple ajax requests triggered from user Input
 *
 * @param func
 * @param wait
 * @return {(function(...[*]): void)|*}
 */
function debounce(func, wait) {
    let timeout;
    return function (...args) {
        const context = this;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
    };
}


$(document).ready(function(){
   const editor = new EasyEditor("#editor",{
         buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'h4', 'alignleft', 'aligncenter', 'alignright']
     });
     
     $(editor.elem).on('input',debounce(function(e){
        const target = e.target;
        console.log(e.target);
        document.getElementById("valueDisplay").innerText = editor.elem.innerHTML
     },100));
})

<link rel="stylesheet" href="https://unpkg.com/[email protected]/src/easyeditor.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://unpkg.com/[email protected]/src/jquery.easyeditor.js"></script>

<textarea id="editor"></textarea>

<div id="valueDisplay"></div>