TinyMCE: Copy-Paste from Google Docs

7
votes

Folks,

My company needs to support the following workflow: - There's rich content getting created in Google Docs (with simple formatting - bold/italic, as well as hyperlinks) - That content is then pasted into an internal CMS that uses TinyMCE.

Problem: all formatting gets lost when pasting stuff in.

Already tried the "paste from Word" plugin - it doesn't work.

Please advise. Thank you!

UPDATE: I narrowed the problem down to Google Chrome. Firefox works just fine. I also used the paste_pre_processing() callbacks - the data gets corrupted before getting in there.

3
tinymcecopy-pastegoogle-docs
+1 good question, but not an easy one. can you show us what gets pasted into the editor, how did you configure tinymce? – Thariama
I also have problems when pasting from Google Docs. Sometimes content will just get "deleted" when pasting or submitting to DB. I tested some just now and it seemed to be working fine, but it feels unreliable, which is a problem. Any luck so far? – Sam

3 Answers

4
votes

I ended up giving up on the Paste plugin into TinyMCE. Instead, I used the undocumented valid_styles property of TinyMCE. This solved the problem fine for my scenario. Here's the config snippet we ended up using: 

valid_elements: "a[href|title|target],del,b,strong,del,i,blockquote,p,br,em,ul,li,ol,span[style]",
valid_styles : { '*' : 'font-weight,font-style,text-decoration' },
2
votes

I know this question was asked a long time ago however I am making an application that requires a copy and paste from google drive into tiny mce. This is actually fairly simple with the free paste plugin. Simply remove the filters so that it can copy in all of the data.

 tinymce.init({
    selector: 'textarea',
    plugins: "paste",
    paste_data_images: true,
    paste_enable_default_filters: false,
    paste_remove_styles_if_webkit: false
 });
1
votes

Your problem is a somewhat complex issue.

First you need to make sure that tinymce does not remove tags and tag-attributes that it recognises as invalid (have a closer look at the tinymce configuration options valid_elements and valid_children).

Second you will have to implement an own handling of the paste process. There are three way to do this. The most time consuming option is to write an own custom paste plugin and replace the given one. The other options are ways to configure the paste plugins and define own functions to interact with and change the pasted content. The seetings paste_pre_processing and paste_post_processing are the way to go here.