Adding &lt;span&gt; to TinyMCE

Adding to TinyMCE

Noel Sefton

Vote:

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 , which should itself be inside the last tag (or whatever tag is the last block in the text).

So I'd like the editor to be able to insert their own 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 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:26

Noel Sefton

Vote:

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

Vote:

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

Noel Sefton

Vote:

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:13

Paul Gruffydd

Vote:

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

Pinkesh Jain - Oct 03, 2022 7:14

I just added a class to the span tag and it did not get removed upon publish. Something like this:
My Vision

Noel Sefton

Vote:

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

#203244

Apr 12, 2019 16:08

Paul Gruffydd

Vote:

David?

#203250

Apr 12, 2019 19:20

Scott Reed

Vote:

Nice work David

#203280

Apr 15, 2019 15:15

Try our conversational search powered by Generative AI!

Adding <span> to TinyMCE