Join us this Friday for AI in Action at the Virtual Happy Hour! This free virtual event is open to all—enroll now on Academy and don’t miss out.

 

Rendering of HTMLPropertyFor

Vote:
 

On one of the page where there is a a href tag within a <p> tag, it doesn't render a href tag as a tag but as plain text:

How do I fix this issue where the a href tag renders inside the p tag as well as follows

#297398
Feb 28, 2023 4:21
Vote:
 

How do you render that?

Typically razor require a HtmlString to render content raw. Either output your IHtmlContent using @Html.Raw or convert it to a HtmlString

// Not tested
public static string ToHtmlString(this IHtmlContent content)
{
    if (content is HtmlString htmlString)
    {
        return htmlString.Value;
    }

    using (var writer = new StringWriter())
    {
        content.WriteTo(writer, HtmlEncoder.Default);
        return writer.ToString();
    }
}
#297402
Feb 28, 2023 9:07
Vote:
 

If you decide to use @Html.Raw to render the string you can still keep the On Page Editing capabilties by using the @Html.EditAttributes within the paragraph tag. 

i.e. 

                                    <address @Html.EditAttributes(m => m.CurrentPage.PracticeAddress)>
                                        @Html.Raw(Model.CurrentPage.PracticeAddress.ToHtmlString)
                                    </address>

Another option although might be a little late would be to change your property type from string to XhtmlString with a really stripped down version of the TinyMCE Editor so only allowing the Link plugin and nothing else (might also make it easier to use for your Editors) 

#297408
Feb 28, 2023 11:44
Vote:
 

I would echo Minesh's sentiment here that you should ideally use the TinyMCE editor here.  I have multiple defininitions for TinyMCE that I have created as editor descriptors which inherit the XHtmlStringEditorDescriptor which helps with readability of the code.

[EditorDescriptorRegistration(TargetType = typeof(XhtmlString), EditorDescriptorBehavior = EditorDescriptorBehavior.OverrideDefault, UIHint = RichTextEditors.BasicEditor)]
public class BasicRichTextXhtmlStringEditorDescriptor : XhtmlStringEditorDescriptor
{
    public BasicRichTextXhtmlStringEditorDescriptor(ServiceAccessor<TinyMceConfiguration> tinyMceConfiguration) : base(tinyMceConfiguration)
    {
    }

    public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
    {
        base.ModifyMetadata(metadata, attributes);

        if (!metadata.EditorConfiguration.ContainsKey("settings"))
        {
            return;
        }

        if (metadata.EditorConfiguration["settings"] is TinyMceSettings settings)
        {
            settings.BlockFormats("Paragraph=p;")
                    .Toolbar("formatselect | bold italic underline | superscript subscript",
                             "epi-personalized-content | removeformat | undo redo searchreplace | fullscreen help")
                    .DisableMenubar();
        }
    }
}

I then decorate the individual XHtmlString property with a UI Hint ... not that in the following example I'm using a nullable context and I've added Validators that check for blocks and media that have been dragged into the RTE and raises an error if they are detected.

    [Display(
        Name = "Intro Text",
        Description = "Optional rich text content to display below the subtitle.",
        GroupName = GroupNames.Content,
        Order = 30)]
    [CultureSpecific]
    [UIHint(RichTextEditors.BasicEditor)]
    [NoMediaInRichText]
    [NoBlocksInRichText]
    public virtual XhtmlString? IntroText { get; set; }

If you did chose to then go down this route instead, it is possible to write a MigrationStep that loads and iterates through all the instances of your content type and then converts the old string value to the new XHtmlString value.  I would add that this would require the new XHtmlString property to be a new property and the old String property to be marked with [ScaffoldColumn(false)] to hide it from the CMS editor.  Once you're live you can then remove the old property and the migration step.

#297465
Mar 01, 2023 9:00
* 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.