nhn / tui.editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible.
http://ui.toast.com/tui-editor
MIT License
17.17k stars 1.75k forks source link

Allow passing in custom handlePaste() #2684

Open whendon opened 2 years ago

whendon commented 2 years ago

Version

3.2.0

Development Environment

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.

kl4n4 commented 1 year ago

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

haozit146 commented 1 year ago

It's a useful feature.