TinyMCE onPaste dilemma
Why isn't the text available on paste?
Why does Ctrl+V trigger a change event?
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/3.5.8/tiny_mce.min.js"></script>
<p><em>Copy & 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',
plugin: 'paste contextmenu',
contextmenu: 'paste',
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
editor.execCommand(cmd, false, val);
});
// Register state change listeners for each button
...