How to change default font size and enable mouse pasting in TinyMCETextFiel


I’m using the TinyMCE Wrapper for Vaadin 7 and it is working fine.
However, I can’t seem to find a way to configure the two things mentioned in the topic of this message, which are:

  1. Changing the default font in the text editor. Now it’s super small, I think 10px.
  2. Pasting text can only be done by Ctrl+V, not by the small menu that appears by right-clicking anywhere in the text editor field.

All the instructions I’ve found are hard to be applied to the Vaadin project environment. For example creating a custom content.css. Where should that be placed in a Vaadin project folder structure?

I am able to configure the TinyMCEditorTextField with the setConfig-method as follows:

    PTinyMCETextField textField;

    static final String configuration =
            "{theme : \"advanced\","
            + "theme_advanced_toolbar_location : \"top\","
            + "theme_advanced_buttons1 : \"bold,italic,underline,bullist,numlist\","
            + "theme_advanced_buttons2 : \"\","
            + "theme_advanced_buttons3 : \"\","
            + "theme_advanced_path : false"
            + "}";  



I think you should pass content_css property to modify the css of the edited text. See:


Hi and thanks for the reply, Matti.

Any ideas where should I place that content_css in a Vaadin project structure and how to give its path
when I pass the content_css property and how to pass it?

Is there a method in the vaadin TinyMCE wrapper that allows me to pass that content_css property? A customer has decided that this default font size is now the most important thing in the project. I’d really like to get this over with. It would be useful to other people as well because the default font-size 10 is very small.

Okay, I changed to CKEditorWrapper and it’s a lot better. That solved all the problems :smiley:

Hi, excellent that you found a solution.

Here are some more tips for TinyMCE wrapper, in case somebody faces the same issue.

The content_css (like all other TinyMCE settings) is given in configuration “JSON string”. See
this example
from the add-on project.

The way how you’d use content_css in Vaadin depends a bit about your setup. The url could be relative to your app (e.g. add the css to your theme directory), relative to server or from totally a separated place (CDN, static file location in possible front proxy) where you host the CSS.