TinyMCE onPaste dilemma

Why isn't the text available on paste? Why does Ctrl+V trigger a change event?

by Gerald Fullam

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/3.5.8/tiny_mce.min.js"></script>
<p><em>Copy &amp; Paste me.</em>
</p>
<ol>
    <li>Paste with key combo <em>Ctrl+V</em>
    </li>
    <li>Paste with mouse by <em>right-click</em>, then select <em>Paste</em> from context menu.</li>
</ol>
<p>Open your console and compare the value of <code>ed.getContent();</code> in each fired event.</p>
<form>
    <textarea name="content"></textarea>
</form>

CSS

textarea {
    width: 100%;
    height: 100px;
}

JavaScript

tinymce.init({
    selector: 'textarea',
    language: false, // Prevents language packs from loading
    inline_styles: false, // Don't convert defined styles into inline style attributes
    valid_elements: 'p,br,span[!class]', // HTML whitelist. elem[!attr] = Required attribute
    theme: function (editor, target) {
        var dom = tinymce.DOM,
            editorContainer;

        // Generate UI
        editorContainer = dom.insertAfter(dom.create('div', {
            style: 'border: 1px solid gray'
        },
            '<div>' +
                '<button data-mce-command="bold">B</button>' +
                '<button data-mce-command="italic">I</button>' +
                '<button data-mce-command="mceInsertContent" data-mce-value="Hello">Insert Hello</button>' +
            '</div>' +
            '<div style="border-top: 1px solid gray"></div>'), target);

        // Set editor container size to target element size
        dom.setStyle(editorContainer, 'width', target.offsetWidth);

        // Return editor and iframe containers
        return {
            editorContainer: editorContainer,
            iframeContainer: editorContainer.lastChild,

            // Calculate iframe height: target height - toolbar height
            iframeHeight: target.offsetHeight - editorContainer.firstChild.offsetHeight
        };
    },
    setup: function (editor) {
        var dom = tinymce.DOM, // Object for DOM manipulation and retrival
            bindButtons = function (editor) {
                tinyMCE.each(dom.select('button', editor.editorContainer), function (button) {

                    // Bind events for each button
                    dom.bind(button, 'click', function (e) {
                        e.preventDefault();
                        var cmd = dom.getAttrib(e.target, 'data-mce-command'),
                            val = dom.getAttrib(e.target, 'data-mce-value');

                        // Execute editor command based on data parameters
           ...