Styles/colors in TINYMCE editor in VAADIN

I have searched the forum and no one else seems to have complained about my problem, so I probably am doing something wrong. I cannot figure out what it is I am doing wrong.

My problem occurs when I click a color change (foreground or background) or a new style and start typing. The text renders correctly when I type. However, when I click the HTML button or get the text field in my application, the <span … > is not there. I looked into the javascript and found that the data-mce-bogus property within TINYMCe is not getting unset when I type. This is used to avoid placing HTML code for empty areas.

Here is my code. Can anyone see what I am doing wrong?

BTW, I did the same thing in TINYMCE outside of vaadin and it worked fine.


/*******************************************************************************
 * Copyright (c) 20011 Boeing.
 * All rights reserved. This program and the accompanying materials
 * are made available under the terms of the Eclipse Public License v1.0
 * which accompanies this distribution, and is available at
 * http://www.eclipse.org/legal/epl-v10.html
 *
 * Contributors:
 *     Boeing - initial API and implementation
 *******************************************************************************/
package org.eclipse.osee.web.editor;

import org.eclipse.osee.logger.Log;
import org.eclipse.osee.vaadin.HasMultiplePages;
import org.vaadin.tinymceeditor.TinyMCETextField;

import com.vaadin.data.Property;
import com.vaadin.ui.Button;
import com.vaadin.ui.Component;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@SuppressWarnings("serial")
public class EditorWindow extends Window implements HasMultiplePages {

	private VerticalLayout layout;

	private final Log logger;
	
	private final TinyMCETextField tinyMCETextField = new TinyMCETextField();
	
	//private final String widgetURL = 
	//		"/VAADIN/widgetsets/org.vaadin.tinymceeditor.widgetset.TinymceeditorWidgetset/org.vaadin.tinymceeditor.widgetset.TinymceeditorWidgetset.nocache.js?1352142090477";

	public EditorWindow(Log logger) {
		super("OSEE Editor");
		this.logger = logger;
	}

	@Override
	public void attach() {
		super.attach();
		layout = new VerticalLayout();
		setContent(layout);

		layout.setMargin(false);
		layout.setSpacing(true);
		layout.setSizeFull();

		layout.addComponent(new Button("Save"));
		TinyMCETextField tinyMCETextField = new TinyMCETextField();
		
		tinyMCETextField.setHeight("100%");
		layout.addComponent(tinyMCETextField);
		layout.setExpandRatio(layout.getComponent(0), 10);
		layout.setExpandRatio(layout.getComponent(1), 9990);
		

		//tinyMCETextField.setConfig("{theme: 'simple'}");
		
		// General options
		String Config = "{ ";
		Config += " theme : 'advanced', ";
	
	    Config += " plugins : 'autolink,lists,pagebreak,style,layer,table," +
	    		"save,advhr,advimage,advlink,emotions,iespell,inlinepopups," +
	    		"insertdatetime,preview,media,searchreplace,print,contextmenu," +
	    		"paste,directionality,fullscreen,noneditable,visualchars," +
	    		"nonbreaking,xhtmlxtras,template,wordcount,advlist,autosave'" +
	    		","; 
		

		// Theme options
		// Config += " theme_advanced_buttons1 : 'save,newdocument,|,bold,italic,underline,";
		Config += " theme_advanced_buttons1 : 'bold,italic,underline," +
				"strikethrough,|,justifyleft,justifycenter,justifyright," +
				"justifyfull,styleselect,formatselect,fontselect,fontsizeselect'" +
				", ";

		Config += " theme_advanced_buttons2 : " +
				"'cut,copy,paste,pastetext,pasteword,|," +
				"search,replace,|,bullist,numlist,|,outdent," +
				"indent,blockquote,|,undo,redo,|,link," +
				"unlink,anchor,image,cleanup,help,code,|," +
				"insertdate,inserttime,preview,|," +
				"forecolor,backcolor'" +
				",";
		
		Config += " theme_advanced_buttons3 : " +
				"'tablecontrols,|,hr,removeformat,visualaid,|," +
				"sub,sup,|,charmap,emotions,iespell,media," +
				"advhr,|,print,|,ltr,rtl,|,fullscreen'" +
				",";
		
		Config += " theme_advanced_buttons4 : " +
				"'insertlayer,moveforward,movebackward,absolute,|," +
				"styleprops,|,cite,abbr,acronym,del,ins," +
				"attribs,|,visualchars,nonbreaking,template,pagebreak," +
				"restoredraft,visualblocks'" +
				", ";

		Config += " theme_advanced_toolbar_location : 'top',";
		Config += " theme_advanced_toolbar_align : 'left', ";
		Config += " theme_advanced_statusbar_location : 'bottom',";
		Config += " theme_advanced_resizing : true, ";
		Config += " apply_source_formatting : true,";
		Config += " verify_html : true, ";

		// Example content CSS (should be your site CSS)
		// String widgetSet = "com.example.vaadinproj1.widgetset.Vaadinproj1Widgetset";
		String widgetSet = "com.example.debugscripts.widgetset.DebugscriptsWidgetset";
		Config += "document_base_url : 'http://localhost:8089/VAADIN/widgetsets/" +
				widgetSet + 
				"/tiny_mce/', ";

		Config += " content_css : 'css/content.css', ";

		// Drop lists for link/image/media/template dialogs
		Config += " template_external_list_url : 'lists/template_list.js', ";
		Config += " external_link_list_url : 'lists/link_list.js', ";
		Config += " external_image_list_url : 'lists/image_list.js', ";
		Config += " media_external_list_url : 'lists/media_list.js', ";

		// Style formats
		Config += " style_formats : [";
		Config += " {title : 'Bold text', inline : 'b'}, ";
		Config += " {title : 'Red text', inline : 'span', styles : {color : '#ff0000'}}, ";
		Config += " {title : 'Red header', block : 'h1', styles : {color : '#ff0000'}}, ";
		Config += " {title : 'Example 1', inline : 'span', classes : 'example1'}, ";
		Config += " {title : 'Example 2', inline : 'span', classes : 'example2'}, ";
		Config += " {title : 'Table styles'}, ";
		Config += " {title : 'Table row 1', selector : 'tr', classes : 'tablerow1'} ";
		Config += " ] ";

		// Replace values for the template plug-in
		Config += " } ";
		tinyMCETextField.setConfig(Config);
		
	
		tinyMCETextField.setValue("<p>Some test content</p><h1>Vaadin rocks!</h1>");
		
		tinyMCETextField.addListener(new Property.ValueChangeListener() {
			public void valueChange(Property.ValueChangeEvent event) {
				String value = event.getProperty().toString();
				showNotification("Content now: " + value);
			}
		});

		

	}

	@Override
	public void setToDefault() {
		//
	}

	@Override
	public Component getCurrentPage() {
		return layout;
	}
}