如何检测经easyeditor初始化的textarea内容变化并触发逻辑？

问题描述 #

我使用easyeditor库为textarea初始化了一款富文本编辑器，代码如下：

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

<link rel="stylesheet" href="https://unpkg.com/easyeditor@1.2.0/src/easyeditor.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://unpkg.com/easyeditor@1.2.0/src/jquery.easyeditor.js"></script>

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

我希望在该textarea内容发生变化时触发特定逻辑（如表单验证），请问该如何实现？

解决方案 #

EasyEditor会隐藏原textarea，用可编辑div作为实际编辑区域，直接监听原textarea的change事件无法实时捕获变化，可通过以下两种方式实现需求：

方法一：监听编辑器容器的输入事件 #

初始化后EasyEditor会生成带easyeditor-container类的可编辑div，监听这个div的input事件就能实时捕获内容变化：

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

    // 监听编辑器内容变化
    $('.easyeditor-container').on('input', function() {
        // 同步内容到原textarea，确保表单提交时能获取正确内容
        $('#editor').val($(this).html());
        // 执行自定义逻辑，比如表单验证
        validateForm();
    });
});

// 示例表单验证函数
function validateForm() {
    const content = $('#editor').val().trim();
    if (!content) {
        console.log('内容不能为空');
        // 可在此添加提示样式或其他操作
    } else {
        console.log('内容验证通过');
    }
}

方法二：使用EasyEditor内置回调（版本支持时） #

部分版本的EasyEditor提供了onChange配置项，初始化时直接传入即可：

$(document).ready(function(){
    $("#editor").easyEditor({
         buttons: ['bold', 'italic', 'link', 'h2', 'h3', 'h4', 'alignleft', 'aligncenter', 'alignright'],
         onChange: function(editor) {
             // 获取编辑器内容
             const content = editor.target.html();
             // 同步到原textarea
             $('#editor').val(content);
             // 执行自定义逻辑
             validateForm();
         }
     });
});

注意事项 #

• 建议同步编辑器内容到原textarea，避免表单提交时内容丢失。
• 若页面存在多个EasyEditor实例，可通过原textarea的ID关联对应编辑器容器，避免冲突：

const editorContainer = $('#editor').next('.easyeditor-container');
editorContainer.on('input', function() {
    // 自定义逻辑代码
});

内容的提问来源于stack exchange，提问作者Dimitrios Desyllas