TinyMCE行内编辑器未触发input事件问题求助

问题原因 #

TinyMCE的工具栏格式化操作（加粗、下划线、列表等）是通过编辑器内部API修改内容，不会触发原生input事件，因此你绑定在元素上的oninput回调只会在手动输入文本时执行，工具栏操作时不会触发。

解决方案 #

利用TinyMCE自身提供的内容变更事件来监听所有编辑操作（包括工具栏按钮点击），替代原生input事件：

修改后的JavaScript代码 #

$(window).on("load",function(){
    tinymce.init({
        selector:'.editable',
        menubar: false,
        statusbar: false,
        plugins: "lists",
        inline: true,
        toolbar: [
            'bold italic underline | numlist bullist'
        ],
        valid_elements: 'p[style],strong,em,span[style],a[href],ul,ol,li',
        // 添加setup回调注册编辑器事件
        setup: function(editor) {
            // 监听节点变化（工具栏操作会触发此事件）
            editor.on('NodeChange', function() {
                var id = editor.id.replace('editable', '');
                updateTextarea(id);
            });
            // 监听输入类操作（和原生input事件触发时机类似）
            editor.on('Input', function() {
                var id = editor.id.replace('editable', '');
                updateTextarea(id);
            });
        }
    })
})

function updateTextarea(id){
    // 用TinyMCE API获取内容，比直接取DOM更可靠
    var newText = tinymce.get('editable'+id).getContent();
    // textarea用val()设置内容，而非html()
    $('#textarea'+id).val(newText);
}

修改后的HTML代码 #

移除DOM上的oninput绑定，避免重复触发：

<script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/tinymce.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/jquery.tinymce.min.js"></script>

<div class="editable" id="editable1">
Edit this text. It will update the textarea. Make it bold, Target wont update
</div>

<br><br>

<strong>Target Textarea:</strong>

<textarea id="textarea1" style="width:100%;height:40px;"></textarea>

关键说明 #

1. 编辑器事件选择：NodeChange会在编辑器内元素节点发生变化时触发（比如加粗生成<strong>标签、插入列表），Input则对应文本输入、删除等操作，两者结合可覆盖所有编辑场景。
2. 内容获取方式：使用tinymce.get(id).getContent()获取编辑器内容，能确保拿到经过编辑器处理后的正确HTML，比直接读取DOM的innerHTML更可靠。
3. textarea赋值：textarea的内容由value属性控制，因此要用val()方法设置，而非html()。

内容的提问来源于stack exchange，提问作者Ali Sheikhpour