Skip to content

Chrome adds styles on copy paste #1593

@Maria0701

Description

@Maria0701

In Chromium browsers paste (width Ctrl+V) Suneditor adds exact classes of the of the pasted text/

For example when pasting
<h3>The Suneditor is based on pure JavaScript, with no dependencies.</h3>

Image

to my code I get the following code
<h3 style="box-sizing: border-box; -webkit-user-drag: none; overflow: visible; font-family: &quot;Helvetica Neue&quot;; font-size: 1.17em; color: rgb(51, 51, 51); margin-block: 1em; display: block; margin-inline: 0px; font-weight: 700; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; white-space: normal; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">The Suneditor is based on pure JavaScript, with no dependencies.</h3>

Image

The code I use to initiate Suenditor is below

export const initiateEditors = (classList) => { const editors = document.querySelectorAll(classList); const options = (itemLink) => ({ plugins: [image, list, video, link, align, fontColor, fontSize, font, formatBlock, hiliteColor, horizontalRule, paragraphStyle, lineHeight, table, template, textStyle, blockquote], buttonList: [ ['undo', 'redo'], ['font', 'fontSize', 'formatBlock'], ['paragraphStyle', 'blockquote'], ['bold', 'underline', 'italic', 'strike', 'subscript', 'superscript'], ['fontColor', 'hiliteColor'/**, 'textStyle'*/], ['removeFormat'], '/', // Line break ['outdent', 'indent'], ['align', 'horizontalRule', 'list', 'lineHeight'], ['table', 'link', 'image', 'video', /**'audio' ,'math' */], // You must add the 'katex' library at options to use the 'math' plugin. /** ['imageGallery'] */ // You must add the "imageGalleryUrl". ['fullScreen', 'showBlocks', 'codeView'], ['preview', 'print'], /** ['dir', 'dir_ltr', 'dir_rtl'] */ // "dir": Toggle text direction, "dir_ltr": Right to Left, "dir_rtl": Left to Right ], fontSize: [ 8, 10, 14, 18, 24, 36 ], width: '100%', height: '300px', videoWidth: '80%', defaultTag: '', imageUrlInput: true, // imageUploadHeader: {}, // imageUploadUrl: itemLink, imageGalleryUrl: itemLink, strictMode: false, strictHTMLValidation: false, attributesWhitelist: { 'all': 'contenteditable|colspan|rowspan|target|href|download|rel|src|alt|class|type|controls|style', }, // lineAttrReset: 'class|style', placeholder: 'Start typing something...', // allowedClassNames: '^', templates: [ { name: 'Template-1', html: '<p>HTML source1</p>' } ], // codeMirror: CodeMirror, });

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions