Suneditor: use editor's styles for content copied from html sources

[s-kris]

When we copy content from other sources like google docs or a webpage and paste it into suneditor, how to make sure that the pasted content will use styles of the suneditor?

Thank you!

[JiHong88]

@s-kris All content is modified for "suneditor" style.

[s-kris]

Sorry, I tried copying from medium, google docs, other websites etc.. the pasted content retains the original style.
Is there a config variable?

[JiHong88]

Paste it here http://suneditor.com/sample/index.html
Are there any differences?

[s-kris]

Yes. I tested this.

http://suneditor.com/sample/index.html --> pasted content's styles are changed to suneditor's

but for my editor, they remain the same.

[JiHong88]

Show me the options you are using.

[s-kris]

    <SunEditor
        setDefaultStyle=""
        placeholder="Word your thoughts here..."
        setOptions={{
            minHeight: 500,
            height: 'auto',
            buttonList: [
                ['formatBlock', 'bold', 'italic', 'underline', 'list'],
                ['link', 'image', 'video'],
                ['align', 'horizontalRule'],
                ['undo', 'redo'],
            ],
            imageAccept: 'image/.jpg, .jpeg, .png, .gif',
            imageUrlInput: false,
            showPathLabel: false,
            formats: [
                {
                    tag: 'p',
                    name: 'Normal',
                    command: 'replace',
                    class: '',
                },
                {
                    tag: 'h2',
                    name: 'Heading',
                    command: 'replace',
                    class: '',
                },
                {
                    tag: 'h3',
                    name: 'Subheading',
                    command: 'replace',
                    class: '',
                },
                'blockquote',
                'pre',
            ],
            linkRel: ['nofollow'],
            attributesWhitelist: {
                img: 'alt',
                p: 'style|text-align',
            },
        }}
        onChange={handleEditorChange}
        disable={props.readonly}
        setContents={props.postContent}
        onImageUploadBefore={(files, info, uploadHandler) => {
          // img-uploader
        }}
    />

[JiHong88]

Try it to below options

attributesWhitelist: {
  img: 'alt',
  p: 'text-align',
},

[s-kris]

Awesome, this converts content pasted from medium and substack to suneditor's format.
But content from google docs and few other websites, keeps original format.

[JiHong88]

It is correct that the accepted format is maintained.
Please show me the example.

[s-kris]

Google docs

suneditor

Medium

suneditor

I want to convert content copied from google docs also to suneditor's format. :)

[JiHong88]

@s-kris Sorry, I don't understand.
How do I have to change it?
Can you share the Google file?

[s-kris]

Apologies. When content is copied from medium page and pasted in the editor, text is converted to suneditor's format.
But when the content is copied from google docs and pasted in the editor, text is NOT converted to suneditor's format.

Please find word doc attached below
[word doc] (https://github.com/JiHong88/SunEditor/files/6141563/Copy.of.Tips.to.increase.fashion.store.sales.docx)

[JiHong88]

Paste is well worked.
It removes the disallowed tags, but nothing is transformed into another tag.
What exactly does the suneditor format mean?

[s-kris]

Thanks!
I meant, if we copy-paste something from word doc or other sources - text size, font style etc should look according to default styles of the editor.

[JiHong88]

Yes All styles are currently being removed.
Does mean that all text should be marked with a P tag?

[s-kris]

Yes.
Right now, font-sizes and colors are retained.

[JiHong88]

The style of the span tag is preserved.
You can remove the "span" tag when pasting with the "pasteTagsWhitelist" option setting, but the "span" tag will disappear even when you paste text in the editor.
Currently, it cannot be applied differently by determining whether it is an external source or an internal source when pasting.
In version 3.0.0, I will add a method to customize this part.

suneditor.create('..', {
  pasteTagsWhitelist: 'br|p|div|pre|blockquote|h[1-6]|ol|ul|li|hr|figure|figcaption|img|iframe|audio|video|source|table|thead|tbody|tr|th|td|a|b|strong|var|i|em|u|ins|s|strike|del|sub|sup|code|svg|path'
})

[s-kris]

That's fantastic! Thank you 🙏🏻