Hi, is there any way to extend the rich text editor and add your own shortcuts. Like the B shortcut will surround the selection with strong tags. I'd like to create my own shortcut that will surround a selection with a span and a given class.
I tried the same thing in 9 but it throws an error in the backoffice,
An error occurred
Cannot create instance of type 'System.String' because it is missing a public parameterless constructor.
I have now set mine to do set the style_formats automatically while allowing me to use a nice json file to maintain it in. Instructions in the link below
I am using this simple extension method to read a json file with the rte style formats and update the app configuration accordingly:
using System.Text.Json;
namespace Website
{
/// <summary>
/// Provides extension method to update <see cref="IConfiguration"/> values.
/// </summary>
public static class IConfigurationExtensions
{
/// <summary>
/// Update Umbraco RTE style formats from json file
/// </summary>
/// <param name="config">The <see cref="IConfiguration"/> object of the app.</param>
/// <param name="pathToUmbracoRtfStyleFormatsJsonFile">The file with the formats json.</param>
/// <exception cref="ArgumentNullException"></exception>
public static async void UpdateUmbracoRteStyleFormats(
this IConfiguration config,
string pathToUmbracoRtfStyleFormatsJsonFile
)
{
const string UmbracoRteStyleFormatsKey =
"Umbraco:CMS:RichTextEditor:CustomConfig:style_formats";
if (config is null)
{
throw new ArgumentNullException(nameof(config));
}
if (pathToUmbracoRtfStyleFormatsJsonFile is null)
{
throw new ArgumentNullException(nameof(pathToUmbracoRtfStyleFormatsJsonFile));
}
// get the rte style config
using var reader = new StreamReader(pathToUmbracoRtfStyleFormatsJsonFile);
var rteStyleFormatsJson = await JsonDocument.ParseAsync(reader.BaseStream);
// serialize into string
var rteStyleFormatsAsString = JsonSerializer.Serialize(rteStyleFormatsJson);
// update config
config[UmbracoRteStyleFormatsKey] = rteStyleFormatsAsString;
}
}
}
Example rte style formats json file "rteStyleFormats.json" in application root:
Calling the extension method from startup to process file "rteStyleFormats.json" in application root:
public class Startup
{
private readonly IWebHostEnvironment _env;
private readonly IConfiguration _config;
/// <summary>
/// Initializes a new instance of the <see cref="Startup" /> class.
/// </summary>
/// <param name="webHostEnvironment">The web hosting environment.</param>
/// <param name="config">The configuration.</param>
/// <remarks>
/// Only a few services are possible to be injected here https://github.com/dotnet/aspnetcore/issues/9337.
/// </remarks>
public Startup(IWebHostEnvironment webHostEnvironment, IConfiguration config)
{
_env = webHostEnvironment ?? throw new ArgumentNullException(nameof(webHostEnvironment));
_config = config ?? throw new ArgumentNullException(nameof(config));
_config.UpdateUmbracoRteStyleFormats("rteStyleFormats.json");
}
....
}
Extend Rich Text Editor
Hi, is there any way to extend the rich text editor and add your own shortcuts. Like the B shortcut will surround the selection with
strongtags. I'd like to create my own shortcut that will surround a selection with aspanand a given class.I'm also struggling with this, in Umbraco 8 I was using the style_formats custom config but have so far failed to get it to work in Umbraco 9 :(
This is an example of what I had in 8
I tried the same thing in 9 but it throws an error in the backoffice, An error occurred Cannot create instance of type 'System.String' because it is missing a public parameterless constructor.
Hi, I didn't know this existed. But I found this answer: https://our.umbraco.com/forum/umbraco-9/106837-tinymceconfig-where-to-find-it-in-umbraco-9#comment-332731
Ha Ha, just found that myself :D
That is going to look very nasty and unmaintainable for a large config section like I have.
Do you perhaps have the link on the tinyMce documentation on how this works and how I can configure my own tags in there?
What exactly do you need to do?
Hi Roy,
Based on your inital question, you can do the following
This will give you an entry under 'Formats' that will wrap your selection in a span with the class red
I have now set mine to do set the style_formats automatically while allowing me to use a nice json file to maintain it in. Instructions in the link below
https://umbraco.themediawizards.co.uk/the-grimoire/formatting-for-richtexteditor-config/
I am using this simple extension method to read a json file with the rte style formats and update the app configuration accordingly:
Example rte style formats json file "rteStyleFormats.json" in application root:
Calling the extension method from startup to process file "rteStyleFormats.json" in application root:
is working on a reply...