November Happy Hour will be moved to Thursday December 5th.
AI OnAI Off
Adding <span> to TinyMCE
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:
[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" }
);
});
}
}
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>
< span class="my-vision">My Vision< /span>
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.
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.