tui.editor
tui.editor copied to clipboard
Allow passing in custom handlePaste()
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.
we are running into the same issue - and such a callback would be extremely useful
It's a useful feature.