Adding <span> to TinyMCE

 

I have a requirement to allow editors to insert a "More" link inside an accordion (to encourage users to open the accordion), but my problem is the client's branding/css requires the "More" to be inside a <span>, which should itself be inside the last <p> tag (or whatever tag is the last block in the text).

So I'd like the editor to be able to insert their own <span> tag just as they can insert an <a> tag or similar, i.e. highlight the text and hit a button. From there I can add a custom style they can apply to the <span> tag to accomplish the "More" requirement.

I've also considered adding the "More" in code, but it's a difficult task trying to figure out which is the last paragraph or element in the XhtmlString.

#203234
Edited, Apr 12, 2019 12:28
 

ok, more complications to this... given the option to edit source code, TinyMCE anutomatically removes empty span tags, so editing the source only works if I add the span with the class, an empty span instantly removed :-(

#203235
Apr 12, 2019 12:38
Paul Gruffydd
Member since: 2008
 

Hi Noel,

To allow users to wrap text in a span tag with a specific class, you should be able to set that up as a custom style either within the editor stylesheet (for the older version of tinyMCE) or programmatically (in tinyMCE 2). That said, for this kind of scenario I'd usually use JavaScript to add the "more" link, particularly if it's only used to trigger a JavaScript function.

#203240
Apr 12, 2019 14:55
 

Hi Paul, I've already explorer TinyMCE and it's config, cant find anything to allow what you are saying, hence this forum post. Can you show me some code?

This is a new build so it's using the lastest version of TinyMCE.

#203241
Edited, Apr 12, 2019 15:14
Paul Gruffydd
Member since: 2008
 

For TinyMCE 1 you can add something like the following to the editor css file:

span.more-button {
    EditMenuTitle: Buttons;
    EditMenuName: More button;
    ChangeElementType: true;
    background: #f00;
}

For TinyMCE 2 you need to configure custom styles in an IConfigurableModule:

[ModuleDependency(typeof(TinyMceInitialization))]
public class CustomizedTinyMceInitialization : IConfigurableModule
{
    public void Initialize(InitializationEngine context)
    {
    }
 
    public void Uninitialize(InitializationEngine context)
    {
    }
 
    public void ConfigureContainer(ServiceConfigurationContext context)
    {
        context.Services.Configure<TinyMceConfiguration>(config =>
        {
            config.For<StandardPage>(t => t.MainBody)
                .Toolbar("styleselect")
                .StyleFormats(
                    new { title = "More button", inline = "span", styles = new { background = "#f00" }, classes = "more-button" }
                );
        });
    }
}
#203243
Apr 12, 2019 15:41
 

David! Awesome answer, fixed my issue completely! Thank you!

#203244
Apr 12, 2019 16:08
Paul Gruffydd
Member since: 2008
 

David?

#203250
Apr 12, 2019 19:20
Scott Reed
Member since: 2010
 

Nice work David

#203280
Apr 15, 2019 15:15