SaaS CMS has officially launched! Learn more now.

Adding id to anchor/link tag both through TinyMCE and URL field on episerver page/block

ZZ
ZZ
Vote:
 

Hi,

We want to track our links and for that we need ids to be set on links generates via EPiServer CMS. There are two ways by which we add links. One is via TinyMCE and other is via EPiServer field like Url property on page/block.

How can we add id to our links ? -> 

e.g -> 

<a id="link1" href="https://www.example.com">Visit Example.com</a>

EPiServer.CMS.TinyMce" Version="4.7.1

#324200
Edited, Jun 25, 2024 10:05
Vote:
 

Hi ZZ,

Actually you can do something like this by building a new custom Url with Id attribute and add new dojo js for new one. You can see Url property and dojo js for Url property to build new one based on that.

#324723
Jun 30, 2024 5:26
ZZ
Vote:
 

HI Binh,

Thanks for your input. Do you have any example on how to build it via dojo js ?

#325232
Jul 11, 2024 7:38
Vote:
 

Hi ZZ,

I have just found that you do not need to build your own. You can add more properties into link item via the package Geta.Optimizely.GenericLinks from Geta. You can see this link for more detail https://github.com/Geta/geta-optimizely-genericlinks

#325233
Jul 11, 2024 7:43
ZZ
Vote:
 

Thanks for that. Do you know how can I achieve same when adding link via TinyMCE ? >

#325234
Jul 11, 2024 7:48
ZZ
Vote:
 

#325237
Jul 11, 2024 7:48
ZZ
Vote:
 

I am already inheriting from LinkData to have thumbnails, but when I add LinkId field to this it doesn't shows up ->

public class ThumbnailLinkData : LinkData
{
    [Display(Name = "Thumbnail image", Order = 0)]
    [UIHint("image")]
    public virtual ContentReference Thumbnail
    {
        get => GetAttribute(ContentReference.Parse);
        set => SetAttribute(value, (v) => v.ToString());
    }

// Not working
    [Display(Name = "Link Id", Order = 0)]
    public virtual string LinkId
    {
        get => GetAttribute((value) => value.ToString());
        set => SetAttribute(value, (v) => v.ToString());
    }
}

 

#325238
Jul 11, 2024 8:12
Vote:
 

Hi ZZ,

Actually, this implementation works directly with property with type such as:

public virtual ThumbnailLinkData CustomLink { get; set; }

Or

public virtual LinkDataCollection<ThumbnailLinkData>? ThumbnailLinkCollection { get; set; }

I think the link in tinymce is default link item. It is built as a tinymce plugin to allow to set default Optimizely link item control. If you want to apply the change in tinymce then I suggest that you could add new tinymce plugin like that.

#325328
Edited, Jul 13, 2024 2:12
Vote:
 

Here is the link that you can look to know how to create a new tinymce plug-in https://tedgustaf.com/blog/2022/adding-custom-tinymce-plugin-to-the-html-editor-in-optimizely-cms/

#325329
Jul 13, 2024 2:18
Vote:
 

Hi ZZ,

I have just done some code that meet your requirement to have Link Id in TinyMce here https://world.optimizely.com/blogs/binh-nguyen/dates/2024/7/how-to-have-a-link-plugin-with-extra-link-id-attribute-in-tinymce/

#325339
Jul 13, 2024 9:18
ZZ - Jul 16, 2024 11:43
Hi Binh,
Thanks a lot :)
* 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.