Paste from word in RichTextArea

Hello,

we have a issue with the rich text area.
When users paste from MS office 2007/2010 applications, we receive a lot of garbage html in the text area.

We know that this is a issue in almost all html online editors and CKEditor and TinyMCE have special paste code to remove these stupid MS html tags.
Is there a way to filter them in vaadin rich text area too ?

Example of such a paste from word:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="ProgId" content="Word.Document"><meta name="Generator" content="Microsoft Word 10"><meta name="Originator" content="Microsoft Word 10"><link rel="File-List" href="file:///C:%5CDOCUME%7E1%5Cns40042%5CLOCALS%7E1%5CTemp%5Cmsohtml1%5C01%5Cclip_filelist.xml"><!--[if gte mso 9]
><xml>
 <w:WordDocument>
  <w:View>Normal</w:View>
  <w:Zoom>0</w:Zoom>
  <w:Compatibility>
   <w:BreakWrappedTables/>
   <w:SnapToGridInCell/>
   <w:WrapTextWithPunct/>
   <w:UseAsianBreakRules/>
  </w:Compatibility>
  <w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel>
 </w:WordDocument>\n</xml><![endif]
--><style>
<!--
 /* Style Definitions */
 p.MsoNormal, li.MsoNormal, div.MsoNormal
	{mso-style-parent:"";
	margin:0cm;
	margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:12.0pt;
	font-family:"Times New Roman";
	mso-fareast-font-family:"Times New Roman";}
@page Section1
	{size:612.0pt 792.0pt;
	margin:72.0pt 90.0pt 72.0pt 90.0pt;
	mso-header-margin:36.0pt;
	mso-footer-margin:36.0pt;
	mso-paper-source:0;}
div.Section1
	{page:Section1;}
-->
</style><!--[if gte mso 10]
>
<style>
 /* Style Definitions */
 table.MsoNormalTable\
{mso-style-name:"Table Normal";
	mso-tstyle-rowband-size:0;
	mso-tstyle-colband-size:0;
	mso-style-noshow:yes;
	mso-style-parent:"";
	mso-padding-alt:0cm 5.4pt 0cm 5.4pt;
	mso-para-margin:0cm;
	mso-para-margin-bottom:.0001pt;
	mso-pagination:widow-orphan;
	font-size:10.0pt;
	font-family:"Times New Roman";}
</style>
<![endif]
-->

<p class="MsoNormal" style=""><sub><span style="font-family: Arial;" lang="DE-CH">Dieser Artikel
wird direkt vom Lieferanten verschickt. Eine Postsuche ist nicht möglich.</span></sub><span style="" lang="DE-CH"><o:p></o:p></span></p>

The “real” content of the field should only be:

Dieser Artikel
wird direkt vom Lieferanten verschickt. Eine Postsuche ist nicht möglich
André

Hi André,

RichTextArea didn’t have that kind of feature as is. Did you allready tryid
TinyMCE Vaadin Wrapper
? Not sure if it has that feature but atleast it might be easily added to it. If the TinyMCE Vaadin wrapper doesn’t fit your needs, you might consider extending the RichTextArea functionality. Easiest but not fanciest way to do it would be just add valueChangeListener to the field in the server side and parse all junkies away in it.

Johannes already mentioned TinyMCE Vaadin wrapper, But there is also
CKEditor wrapper for Vaadin
in Directory.

Hello Johannes and Herni,

thanks for your followups.

Yes, I know of the TinyMCE and CKEditor component (And they handle these MS office pastes correctly)

I just wondered if other also stumbled over this potential issue with the RichTextArea.

André

Please guys, how to use the CKEditor in vaadin, like using the RichTextArea?

Is there a way to remove a junk like this?

  • To improve information dissemination to all targeted users.
  • The real String should be : “To improve information dissemination to all targeted users”

    How can I remove those HTML tag…any code formatting?

    Thanks… :slight_smile:

    note that CKEditor is not yet supported on Android