How I can detect a value has changed upon a textarea that has been initialized using easyeditor?

Question

I have initialized a rich text editor for a textarea using the easyeditor library:

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

And I want upon a change into the textarea to trigger some logic (eg. form validation) how I can do this?

Answer 1

Upon multiple attempts to solve the issue, the only any event listener for textarea using this libraries does not work. But using an EasyEditor instance you can get a div element instead of the textarea. The textarea element is hidden via css.

Upon this element you can place the input method event listener:

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

In the example above the editor.elem is the editor element that Easyeditor initializes. This one is a div element having contenteditable true. The underlying textarea is hidden and upon input value the textarea one is syncronized via the Easieditor.

Therefore you can place an input event listener on editors div, as shown in the example above. Then you can retrieve the value from the text area.

---

If triggering an ajax values is reccomended to debounce the event callback first. Also for the latest value use the innerHTML of the editor.elem. Using the text area you may not be able to read the latext content especially when user continiously provided input.

/**
 * 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>