react-summernote icon indicating copy to clipboard operation
react-summernote copied to clipboard

Insert html on pasting some image and text not working

Open aadil-reckonsys opened this issue 6 years ago • 0 comments

I was trying to copy and paste formatted content with images but it is only pasting text format.

<ReactSummernote
        className="form-summernote"
        value={input.value}
        options={{
          height: 200,
          dialogsInBody: true,
          disableResizeEditor: true,
          buttons,
          toolbar,
        }}
        onChange={this.onEditorChange}
        onBlur={this.onEditorBlur}
        onFocus={this.onEditorFocus}
        onImageUpload={this.onImageUpload}
        ref={(el) => { this.summernoteComponentRef = el }}
      />

This is preview of my react component. I tried handling onPaste event myself with function below but copied content is getting paste twice like plain text + formatted text

onEditorPaste(event) {
    event.preventDefault();
    var pastedText = ''
    if (window.clipboardData && window.clipboardData.getData)// IE
        pastedText = window.clipboardData.getData('Text');
    else if (event.originalEvent.clipboardData && event.originalEvent.clipboardData.getData)
        pastedText = event.originalEvent.clipboardData.getData('text/html');
    event.currentTarget.innerHTML = pastedText
  }

<ReactSummernote
        className="form-summernote"
        value={input.value}
        options={{
          height: 200,
          dialogsInBody: true,
          disableResizeEditor: true,
          buttons,
          toolbar,
        }}
        onChange={this.onEditorChange}
        onBlur={this.onEditorBlur}
        onFocus={this.onEditorFocus}
        onImageUpload={this.onImageUpload}
        onPaste={this.onEditorPaste}
        ref={(el) => { this.summernoteComponentRef = el }}
      />

I looked inside source code of project there is not insertHTML function. Are we missing it or there is another way around to do it?

aadil-reckonsys avatar Mar 22 '19 07:03 aadil-reckonsys