We use Drupal to allow each department writing each own contents in their web pages. We installed TinyMCE to help them formatting text, but we expect also that HTML code, created by the editor, were XHTML compliant in our pages. Usually the employee who has to update contents is not familiar with HTML tags and so on and it's hard to explain him everything behind the scenes.
Actually the code created by TinyMCE is quite good, but the really issue is the temptation to paste contents from Office Word or other not XHTML compliant editors.

Here I describe how I succeed in preventing end user to paste HTML contents with Drupal5.x for Firefox 2.0 (FF) and Internet Explorer 7 (IE)

  • TinyMCE configuration
    at http://mysite/?q=admin/settings/tinymce/edit/mcedit_profile I setted:
    • Buttons and plugins - Paste plugin:
      you have to install paste TinyMCE plugin. I selected also "Paste text/word" command so that when I try to paste something using CTRL + V, FF show me a simple text box and IE paste only the text.
    • Buttons and plugins - Context menus:
      this setting is necessary only for FF; you have to select "Context menu" otherwise if your end user try to right click on the editor, he'll be able to select paste command from normal menu bypassing Drupal settings. In IE there is no way to do this.
    • Cleanup and output - Verify HTML: true
    • Cleanup and output - Preformatted: false
    • Cleanup and output - Preformatted: false
    • Cleanup and output - Convert tags to styles: true
    • Cleanup and output - Remove linebreaks: false
    • Cleanup and output - Apply source formatting: true
  • Patch tinymce.module
    near line 120 in drupal5/modules/tinymce/tinymce.module I added these lines to call another function whenever end user try to paste HTML contents:
    $tinymce_invoke = <<<EOD
    
      tinyMCE.init({
        paste_insert_word_content_callback : "convertText",
        paste_auto_cleanup_on_paste : true,
        paste_remove_styles : true,
        $tinymce_settings
      });
    
    EOD;
    
  • Patch editor_plugin.js
    at the begining of drupal5/modules/tinymce/tinymce/jscripts/tiny_mce/plugins/pasteeditor_plugin.js I added:
    function convertText(type, content) {
    	switch (type) {
    		// Gets executed before the built in logic performes it's cleanups
    		case "before":
    			var re= /<\S[^><]*>/gi;
    			content = content.replace ("<br />", "\n");
    			content = content.replace ("<br/>", "\n");
    			content = content.replace ("<br>", "\n");
    			content = content.replace(re, "");
    			content = content.replace ("\n", "<br />");
    			break;
    
    		// Gets executed after the built in logic performes it's cleanups
    		case "after":
    			break;
    	}
    	return content;
    }
    

To Do:

  • still there is a possibility, only in FF, to paste HTML content selecting Paste command from FF window menu.
  • the lines added in tinymce.module are specific for paste TinyMCE plugin and will generate a Javascript error without this plugin.

Comments

lewmich’s picture

"Buttons and plugins - Paste plugin:
you have to install paste TinyMCE plugin. I selected also "Paste
text/word" command so that when I try to paste something using CTRL+ V, FF
show me a simple text box and IE paste only the text."

Could you please chech is it realy working and decribe more precisely how
you managed to make CTRL+V work as "paste text/word". When I activate
"Paste text/word" in ""Buttons and plugins" I only get "Paste W" icon in
the menu... But when I use CTRL+V it pastes everything from MS Word as it
was before I activated "Paste text/word".

I would be really thankful if you could help me solve this problem.
Unfortunatelly many users still use the simplest CTRL+V and pastes all MS
Word dirty html code...

Best regards,
Michal Lewczuk