Visual Editor

Topics: Visual editor
Jul 19, 2011 at 4:09 AM

When creating page content in the visual  editor mode, everything is set within <p> tags by default.  This is leaving us with undesired styles.  Is there a way to make the default a <span> or <div>?   It is frustrating when you create a change to a page and get spacing that was not intended.

Thanks

Rob

Jul 19, 2011 at 9:00 AM

Hello,

Look at this discussion - http://compositec1.codeplex.com/discussions/249837

Jul 19, 2011 at 9:00 AM
Edited Jul 19, 2011 at 9:00 AM

Hi c2w

I can suggest a quick workaround:

1. Edit this file : ~\Frontend\Config\VisualEditor\common.xml
2. Find this snippet:

<format id="p" label="Paragraph" image="" notes="Paragraph" block="p">
 <select />
</format>

3. Right below, add something like this:

<format id="div" label="Div" image="" notes="Div" block="div">
  <select />
</format>

4. Clear the browser cache.
5. Edit the page.
6. Select the text full of <p></p>'s
7. Apply your new style "Div" to it (from the dropdown on the Content tab's toolbar)

All <p></p> should be repaced with <div></div>

For more information on customizing Visual Editor, you can read http://docs.composite.net/CustomizingVisualEditor

/Vitaly

 

Jul 19, 2011 at 9:06 AM

@wysocki and you suggest that you should instruct the editors in doing this everytime they edit a page just before they save it?

Jul 19, 2011 at 9:09 AM
burningice wrote:

@wysocki and you suggest that you should instruct the editors in doing this everytime they edit a page just before they save it?


never :)

this is just a quick workaround.

Inna's link above works much better

Aug 5, 2011 at 10:01 PM

Hi All,

How can i give users possibility to use CSS classes from drop-down lists? (or other way in Visual mode)

I created 2 new classes in VisualEditor.common.css - 'heading' and 'content'.

When i use Source mode to change page - all is ok. Code like this:

    <p class="heading">Header-1</p>
    <p class="content">Text-1</p>
    <p class="heading">Header-2</p>
    <p class="content">Text-2</p>

When i switch to Visual mode - i see correct formatting for the created items.

Then i type new text - 'Header-3' and i want to format it in Visual mode.

I tried to add followng code into VisualEditor.config.xml (read in FAQ):

<XhtmlEditorElementClassConfigurations>

<ClassConfiguration ConfigurationName="common" ElementName="p" ClassName="heading" />

<ClassConfiguration ConfigurationName="common" ElementName="p" ClassName="content" />

</XhtmlEditorElementClassConfigurations>

I expected to see the classes in drop-down list. But i don't see them.

How i can add the functionality?

Thanks!

Aug 5, 2011 at 10:37 PM

You shouldn't be adding anything in VisualEditor.config.xml, its common.xml you should be looking at. For instance you can add this to one of the radiogroup, to let the user add your two classes when they mark a p-element in the visual editor

 

<format id="heading" label="Heading" image="" notes="" classes="heading" selector="p">
  <select />
</format>
<format id="content" label="Content" image="" notes="" classes="content" selector="p">
   <select />
</format>

 

 

Aug 5, 2011 at 11:26 PM

It works! Thank you a lot!

Aug 8, 2011 at 8:09 AM
olga_titova wrote:

I tried to add followng code into VisualEditor.config.xml (read in FAQ):

 

<XhtmlEditorElementClassConfigurations>

<ClassConfiguration ConfigurationName="common" ElementName="p" ClassName="heading" />

<ClassConfiguration ConfigurationName="common" ElementName="p" ClassName="content" />

</XhtmlEditorElementClassConfigurations>


Hello, Olga

This FAQ you found was dedicated to the C1 old Visual editor and is not relevant now. Read this article  http://docs.composite.net/C1/Console/CustomizingVisualEditor.aspx to know how to customize C1 new Visual editor.