tui.editor icon indicating copy to clipboard operation
tui.editor copied to clipboard

Allow passing in custom handlePaste()

Open whendon opened this issue 2 years ago • 2 comments

Version

3.2.0

Development Environment

  • OS: Windows
  • Browser: Brave/Chromium
  • Version: Brave v1.42.88 Chromium 104.0.5112.81

Current Behavior

The current behavior is that you cannot set a custom method to handle paste events. Paste events are very clunky, and I would like to attempt to exercise some more control about what is allowed to be pasted into the field. For example, I can disable lists in the toolbar, and I can set the html sanitizer to remove lists, yet the editor allows you to paste in a list and the sanitizer somehow misses what was pasted.

Also, if you copy/paste text styled black from somewhere else, it gets pasted into the editor with style tags. I do not use the color widget, so I have no way to recolor text, and the black styled text can sometimes be displayed on a black background, so it cannot be black. Again - the HTMLSanitizer is set to strip out style tags, but it ignores pasted text.

Expected Behavior

New option for editorOptions handlePaste which can be passed in with the other options

Sample usage of new editor option (at bottom of config):

this.editor = new Editor({
    el: this.$refs['my-wysiwyg'],
    height: '400px',
    initialValue: this.value || "",
    initialEditType: 'wysiwyg',
    previewStyle: 'vertical',
    theme: 'dark',
    toolbarItems: [
        ['bold', 'italic', 'strike'],
        ['link']
    ],
    events: {
        change: () => {
            this.$emit('input', this.editor['getHTML']());
        }
    },
    customHTMLSanitizer: html => {
        return DOMPurify.sanitize(html, {
            ALLOWED_TAGS: ['b', 'i', 'del', 'a'],
            FORBID_TAGS: ['ul', 'li', 'ol'],
            FORBID_ATTR: ['style']
        })
    },
    hideModeSwitch: true,
    usageStatistics: false,

    // NEW FEATURE
    customHandlePaste: this.myCustomHandlePasteMethod
})

Please let me know if I can help in any way or provide more details.

whendon avatar Aug 16 '22 23:08 whendon

we are running into the same issue - and such a callback would be extremely useful

kl4n4 avatar Jul 18 '23 08:07 kl4n4

It's a useful feature.

haozit146 avatar Oct 10 '23 03:10 haozit146