Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Paste from Word to TinyMCE

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
like image 232
RachelD Avatar asked May 02 '15 03:05

RachelD


People also ask

What is PowerPaste in TinyMCE?

The TinyMCE PowerPaste plugin automatically cleans up content from Microsoft Word, Microsoft Excel, and HTML sources to ensure clean, compliant content that matches the look and feel of the site.

Can you copy and paste from Word to WordPress?

Copy text from Word > paste into Notepad or Text Editor. Copy text from Notepad/Text Editor > paste into WordPress. Or, copy text from Word, then go to post editor in WordPress dashboard. Select where to insert text > click Word icon > OK.

How do you upload pictures to TinyMCE editor?

Click the 'Insert/Edit Image' button, then click the 'Upload' tab. Alternatively, drag and drop an image here. All image uploading options are supported, including images_upload_handler (a way to define custom file uploader) and images_upload_credentials .

How do you get text from TinyMCE editor?

The TinyMCE getContent and setContent methods You can do this using the getContent() API method. Let's say you have initialized the editor on a textarea with id=”myTextarea”. This will return the content in the editor marked up as HTML.


1 Answers

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

like image 97
Dave Alperovich Avatar answered Sep 19 '22 15:09

Dave Alperovich