Contribute to Docs Contribute to Docs

Tiny MCE

Tiny MCE has been the de facto standard for WYSIWYG editors for many years and is a very powerful editor. Piranha CMS currently supports version 5.0.3 of Tiny MCE and the editor is used in inline mode for all editors in the interface.

Installation

The Tiny MCE editor can be installed by adding the following NuGet package:

<PackageReference Include="Piranha.Manager.TinyMCE" Version="7.1.0" />

Default Editor Tools

By default the following tools are enabled by the editor:

Bold & Italic
Unordered & Ordered Lists
Horizontal Line
Left, Center & Right Alignment
Standard Header & Block Formats
Link Editor with CMS integration
Image picker with CMS integration

Configuring The Editor

The editor can be customized either through code, or by creating a JSON config file with the editor configuration.

Configure with JSON config

// editorconfig.json
{
  "plugins": "autoresize autolink code hr paste lists piranhalink piranhaimage",
  "toolbar": "bold italic | bullist numlist hr | alignleft aligncenter alignright | formatselect | piranhalink piranhaimage",
  "blockformats": "Paragraph=p;Header 1=h1;Header 2=h2;Header 3=h3;Header 4=h4;Code=pre;Quote=blockquote",
  "styleformats": [
    {
      "title": "Lead",
      "tag": "p",
      "type": "block",
      "classes": "lead"
    }
  ]
}

The configuration is the applied from the method Configure in your Startup.cs.

// Startup.cs
public void Configure(IApplicationBuilder app, IApi api)
{
    ...

    Piranha.Manager.Editor.EditorConfig.FromFile("editorconfig.json");

    ...
}

Configure through code