javascript - Paste from Word to TinyMCE - Stack Overflow

admin管理员组

文章数量:1187350

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:

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:

• TinyMCE Paste As Plain Text
• RegEx to remove all styles but leave color and background-color if they exist
• Regex: match everything but

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:

• TinyMCE Paste As Plain Text
• RegEx to remove all styles but leave color and background-color if they exist
• Regex: match everything but

• javascript
• jquery
• regex
• tinymce

Share Improve this question Follow edited May 23, 2017 at 11:48 CommunityBot 111 silver badge asked May 2, 2015 at 3:00 RachelDRachelD 4,08999 gold badges4343 silver badges7070 bronze badges 5

• Can you post an example of "garbage markup" ? – Pedro Lobito Commented May 4, 2015 at 14:59
• @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 Commented May 4, 2015 at 22:00
• Take a look here, it may be a good start for you – Pedro Lobito Commented May 4, 2015 at 22:30
• @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 Commented May 4, 2015 at 22:53
• 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 Commented Jul 5, 2015 at 14:58

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 25 +25

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

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.

本文标签： javascriptPaste from Word to TinyMCEStack Overflow