I am building an application which uses the Summernote editor (https://summernote.org/).
It works pretty well, and now I want to handle the paste event. Idea is I want to paste content as plain text. A bit of Googling results in this page: Paste content as plain text in summernote editor .
This leads to my problem - I have tried to implement this without success.
MY CODE:
I have implemented the Summernote in my Bootstrap / ASP.NET MVC application like this (I use Summernote 0.8.8):
<div class="form-group mb-3">
@Html.LabelFor(c => c.Content)
<div class="card-body">
<form class="form-horizontal form-bordered">
<div class="form-group row">
<div class="col-sm-12">
<textarea name="Content" id="summernote" class="summernote" data-plugin-summernote data-plugin-options='{ "height": 180, "codemirror": { "theme": "ambiance" } }'>
@Html.Raw(Model.Content)
</textarea>
</div>
</div>
</form>
</div>
I now try to add the following code:
$('#summernote').summernote({
onPaste: function (e) {
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
e.preventDefault();
document.execCommand('insertText', false, bufferText);
}
});
But this is never hit. If I make a console.log()
within the paste function, it never hits.
I then tried to follow the documentation from Summernote website and:
$('#summernote').on('summernote.paste', function(e) {
var bufferText = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text');
e.preventDefault();
document.execCommand('insertText', false, bufferText);
});
Perfect, now the event actually fires. BUT all of these becomes undefined so it fails on GetData:
((e.originalEvent || e).clipboardData || window.clipboardData)
So I get the following error:
Uncaught TypeError: Cannot read property 'getData' of undefined
at HTMLTextAreaElement.<anonymous> (UpdateCommunication?communicationId=65925cb9-4300-439c-8f96-e00de78e1727:291)
at HTMLTextAreaElement.dispatch (jquery-1.10.2.js:5109)
at HTMLTextAreaElement.elemData.handle (jquery-1.10.2.js:4780)
at Object.trigger (jquery-1.10.2.js:5021)
at HTMLTextAreaElement.<anonymous> (jquery-1.10.2.js:5705)
at Function.each (jquery-1.10.2.js:671)
at init.each (jquery-1.10.2.js:280)
at init.trigger (jquery-1.10.2.js:5704)
at Context.triggerEvent (summernote-bs4.js:1707)
at HTMLDivElement.<anonymous> (summernote-bs4.js:4422)
So the problem I have is that the suggested solution on StackOverflow never fires for me - the callback never hits. If I follow the summernote.paste function
, https://summernote.org/deep-dive/#onpaste, the paste values seems to be undefined!
You're lucky I got to play with this tonight :)
Seems that summernote.paste event gets 2 arguments back
Instead of
$('#summernote').on('summernote.paste', function(e) {
use
$('#summernote').on('summernote.paste', function(e, ne) {
and use 'ne' instead of the 'e' in the fn body
found the solution here: https://github.com/summernote/summernote/issues/303#issuecomment-229823549