The editor design gives advanced users flexible configuration options and users who don't want to deal with custom config.js files some simple options.

N2CMS ships with CKEditor 4.1.3-full. The full edition is included because of the toolbar configuration option (see EditableFreeTextAreaAttribute)

I've tried to include most of the configuration options as available in the CKEditor in-page configuration.

Using a Local Copy of CKEditor

By default, CKEditor is loaded from a CDN resource. However, if you want to have your own local copy of CKEditor, a local copy can be obtained from Nuget. At the package manager console, run the following command to get the latest version of ckeditor.

Install-Package ckeditor-full

This will install ckeditor files to ~/Scripts/ckeditor.

Now, update the path to CKEditor, which is defined in the n2 <resources> element in your web.config file. It is defined by the ckEditorPath attribute.

<configuration>
   <n2 xmlns="http://n2cms.com/schemas/configuration/v3">
      <!-- ... -->
      <resources ckEditorPath="/N2/Resources/ckeditor/ckeditor.js" />
      <!-- ... -->
    </n2>
</configuration>

Note: Make sure not to clobber any other attributes, such as jQueryPath, etc.

Features

1. Editor Mode

There are three predefined, integrated Editor Modes, which modify the ckeditor toolbars.

Some notes about this:

• The editor mode is configurable as EditableFreeTextAreaAttribute.
• The default mode is Standard.

We have projects with different areas, in some areas the user is allowed to change styles or format the text freely. And in other areas he should be restricted to simple formatting. So with these options we are flexible.

2. Custom config.js configuration element

It is possible to use the ckeditor configuration element (again, in web.config) to specify a custom config.js file outright. This can replace and override any other options you've set in other ckeditor configuration settings, but it is possible to create conflicts, so take care when using this option.

Example:

<configuration>
  <n2 xmlns="http://n2cms.com/schemas/configuration/v3">
    <edit>
      <!-- ckConfigJsPath Path to custom config.js
           overwriteStylesSet Use stylesset named my_styles (defined in custom config.js)
           overwriteFormatTags Overwrite default format tags (p;h1;h2;h3;pre) with specified
           contentsCssPath Path to custom contents.css
           advancedMenus Enable advanced menus
       -->
      <ckeditor ckConfigJsPath="/scripts/ckconfig.js" overwriteStylesSet="my_styles" overwriteFormatTags="p;h1" contentsCssPath="/scripts/contents.css" advancedMenus="true" />
    </edit>
  </n2>
</configuration>

3. Format dropdown

You can set common formats with web.config yet retain the flexibility to set special format values on a page.

• The overwriteFormatTags configuration element allows one to override the pre-defined format values (p;h1;h2;h3;pre).

• The EditableFreeTextArea also has a property called AdditionalFormats. If specified, the given formats will be added in addition to the default values to the format dropdown.

• Default option in all dropdowns are h1;p and for the EditableFreeTextAre with set AdditionalFormats h1;h2;h3;p

Example:

<ckeditor overwriteFormatTags="p;h1" /> <!-- AdditionalFormats:="h2;h3" --> 

4. advancedMenus

The advanced menus can be specified via in-line configuration or

Example:

<ckeditor advancedMenus="false" />

5. Custom contents.css

This configuration element allows you to specify the path to a custom contents.css file.

Example:

<ckeditor contentsCssPath="/scripts/contents.css" /> 

6. Custom Styles

To fill custom styles into the styles dropdown you have to integrate a custom config.js file. In this file you could add your own style sets, it's not limited to one. I've integrated a sample into config.js and commented it out. You can copy this config.js file to your own location, uncomment the block which adds the custom styles. Add your own style set(s).

• Link to file on Github: https://github.com/andy4711/n2cms/blob/5700a3feaeadff9a5568533af84eee7176bcb299/src/Mvc/MvcTemplates/N2/Resources/ckeditor/config.js
• Just in case the link breaks, the original version of the file is also attached to this Wiki page.

There is a default option in web.config which points ckeditor to the custom style. You can override this option with an EditableFreeTextArea property for special pages.

Example

Note: This example assumes the style I put as sample into config.js and copied into my own location.

<ckeditor ckConfigJsPath="/scripts/ckconfig.js" overwriteStylesSet="my_styles" /> 

With these configuration options and the custom config.js file all editors are using the style set my_styles.

Now you can integrate a second style set named styles_productspage into /scripts/ckconfig.js and set UseStylesSet:=productspage in EditableFreeTextArea.

7. Localization

To localize ckeditor into your language you have two options. First install nuget Management Localization package or copy the corresponding ckeditor language file into the lang folder ~/N2/Resources/ckeditor/lang/.

1. N2cms tries to load the language file based on the detected culture
2. You could overwrite the language detection with a configuration element.

Example

Note: This example assumes the it.js file is copied into the lang folder.

<ckeditor overwriteLanguage="it" /> 

Additional Resources

https://n2cms.codeplex.com/discussions/445836

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles