Alter default InitOptions for TinyMCE in EPiServer 6

The default config options set by CreateDefaultInitOptions() aren't really what you need to help editors create correctly marked up content. Luckily the guys at EPiServer have a way to tweak 'em.

You just need to add a class and decorate it with some plugin magic. Here's a proof of concept of how to go about it:

namespace Krompaco.Plugins
{
  using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Web;
  using EPiServer;
  using EPiServer.Editor.TinyMCE;

  [TinyMCEPluginNonVisualAttribute(
      AlwaysEnabled = true,
      PlugInName = "OptimizedEditor",
      DisplayName = "Custom editor init options",
      Description = "Loads custom editor init options.",
      EditorInitConfigurationOptions = @"{
        paste_auto_cleanup_on_paste : true,
        valid_elements : ""a[href],strong/b,em/i,br,ul,ol,li,-h2,-h3,-h4,-h5,-h6,-p"",
        theme_advanced_blockformats : ""h2,h3,h4,h5,h6,p"",
        theme_advanced_resizing : false,
        body_class : ""module-text""
      }"
  )]
  public class OptimizedEditor
  {
  }
}

Code is tested using EPiServer CMS 6 R1 and 6 R2.

Added Thursday 20 May 2010 16:15 — Tags for this page: EPiServer, Development, TinyMCE

Comments

  1. Pingback Monday 25 October 2010 17:19

    http://www.jonathansewell.co.uk/index.php/2010/10/25/remove-h1-from-episerver-6-tinymce/

    [...] Vig, Marcus Lindblom, and Johan Kronberg have covered this in blog [...]

  2. Niklas Ringdahl Tuesday 14 December 2010 13:58

    Hi.

    I don't understand where to use this code, could you please explain a bit more?

    - Niklas

  3. Author Comment Tuesday 14 December 2010 15:29

    Hi Niklas,

    Just put the code in a new CS-file somewhere in your EPiServer Visual Studio-project.

    Since it has AlwaysEnabled = true it should be used by all XhtmlString-properties after you Build the project. You can verify this by viewing the HTML source of the Edit frame of a page in Edit-mode.

  4. Peter Wednesday 3 August 2011 10:45

    Any idea why I get a 404 on the page http://localhost/util/Editor/tinymce/plugins/OptimizedEditor/editorplugin.js

  5. Author Comment Wednesday 3 August 2011 12:53

    Peter: Thanks for mentioning that.

    Normally a plugin contains JS, CSS and HTML that is put in a folder that shares name with the class. I don't think you can specify that the plugin has no "external" files.

    You can just create a blank text file that is placed on that path to get rid of the 404 error.

Add Your Comment