Paste from Word to TinyMCE

15
votes

I am trying to allow my users to paste content from word processors (MS Word, Open Office..) and have it process the garbage markup into valid html.

Here is a fiddle for my code: http://fiddle.tinymce.com/xLeaab

I want to preserve:

  • bold, italic, strike through (done)
  • tables and lists (done)
  • font color, text highlight and alignment (please help)

FYI - I've been looking at these questions on Stackoverflow as part of my current solution, however Im not the best with RegEx so Im having a hard time:

2
javascriptjqueryregextinymce
Can you post an example of "garbage markup" ? – Pedro Lobito
@PedroLobito, OP refers to "garbage markup" bc word uses a superset of html, open xml, and rte formats. So when pasting from word to HTML, as much as preserving proper markup, extra or "garbage markup" must be removed. – Dave Alperovich
Take a look here, it may be a good start for you – Pedro Lobito
@PedroLobito, you have the right idea, but Rachel is using the paste plugin and is trying to properly configure paste_word_valid_elements. Her Fiddle already takes care of many of her desires. Just font-color, highlight, and alignment are not rendered properly. – Dave Alperovich
I never got a response from you about my solution. Did you get a chance to try it? Did it fall short? If so, in what ways? – Dave Alperovich

2 Answers

21
votes

I think I have it, Check Fiddle

Confirmed:

  • Text alignment
  • Fonts
  • Colors
  • Highlights

My changes:

1) commented out your paste_postprocess (it was sanitizing styles)

    //paste_postprocess: function(plugin, args) {
    //    args.node.innerHTML = cleanHTML(args.node.innerHTML);
    //},

2) defined a set of paste_word_valid_elements in init (the allowed list)

    paste_word_valid_elements: "b,strong,i,em,h1,h2,u,p,ol,ul,li,a[href],
          span,color,font-size,font-color,font-family,mark",

3) set paste retain style be to "all" (if you want to be selective, create a custom list)

     paste_retain_style_properties: "all",

:

Fiddle Screen Shot

enter image description here

0
votes

WordPress TinyMCE Users:

Dave's answer above solved my issue with this implementation in WordPress:

(using TinyMCE plugin and Advanced TinyMCE Configuration plugin)

Use the following TinyMCE Config overrides:

Name : Value

keep_styles : true

paste_retain_style_properties : true

Image: The settings page implementation

Big thanks to Dave.