Virtual Happy Hour this month, Jun 28, we'll be getting a sneak preview at our soon to launch SaaS CMS!

Try our conversational search powered by Generative AI!

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.

Edited, Apr 12, 2019 12:26

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

Apr 12, 2019 12:38

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.

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.

Edited, Apr 12, 2019 15:13

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:

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)
                    new { title = "More button", inline = "span", styles = new { background = "#f00" }, classes = "more-button" }
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:
< span class="my-vision">My Vision< /span>

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

Apr 12, 2019 16:08


Apr 12, 2019 19:20

Nice work David

Apr 15, 2019 15:15
This topic was created over six months ago and has been resolved. If you have a similar question, please create a new topic and refer to this one.
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.