Visual Editor

Topics: General, Visual editor
Oct 17, 2011 at 3:55 PM

I see in the common.xml there are comments about the Format section that fontsize can be added to the options in the visual editor.  I tried to add the format code changing the id, label, notes, inline code to fontsize.  But it didn't work?  Any suggestions?

<format id="fontsize" label="fontsize" image="" notes="fontsize text" inline="code">

Coordinator
Oct 18, 2011 at 6:20 AM

Have you closed your <format> section?

It should be something like this:

        <format id="textwithincode" label="Code text" image="" notes="" inline="code">
          <button label=";)"/>
        </format>

The result of formatting will be like this:

<code>some code text</code>

For more information read this article - http://docs.composite.net/C1/Console/CustomizingVisualEditor.aspx

Oct 18, 2011 at 1:29 PM

Yeah, I forgot to document the closing <format> tag - but I did have it in my code. I guess what I am looking to do is allow the editor to adjust the font size using the visual editor.  Is there a way to add that drop down with a series of fontsizes (10,12,14)?

Coordinator
Oct 18, 2011 at 1:46 PM

You can do it by using Class selector

1) Add next css rules to your CSS file (note: the common CSS file for visual editor and your site), for example:

.font-10 {font-size: 10px; }

.font-12 {font-size: 12px;}

.font-14 {font-size: 14px;}

2) In common.xml add next formats to the class selector radiogroup:

    <radiogroup>
      <!-- Sample classes that show up in the visual editor style selector -->
...
       <format id="font10" label="Font-Size 10" image="" notes="" classes="font-10" selector="p,span">
        <select />
      </format>
        <format id="font12" label="Font-Size 12" image="" notes="" classes="font-12" selector="p,span">
        <select />
      </format>
        <format id="font14" label="Font-Size 14" image="" notes="" classes="font-14" selector="p,span">
        <select />
      </format>
    </radiogroup>

For more information read this article - http://docs.composite.net/C1/Console/CustomizingVisualEditor.aspx