XhtmlString inside IList removes html attributes

Vote:
 

I'm on version 11.20.11

I have a model that looks like this:

public class ListModel
    {
        public XhtmlString XhtmlContent { get;set; }
    }
    
    [PropertyDefinitionTypePlugIn]
    public class ListModelProperty : PropertyListBase<ListModel>
    {
    }
    
    public class PropertyListBase<T> : PropertyList<T>
    {
        public PropertyListBase()
        {
            _objectSerializer = this._objectSerializerFactory.Service.GetSerializer("application/json");
        }

        private Injected<ObjectSerializerFactory> _objectSerializerFactory;
        private IObjectSerializer _objectSerializer;

        protected override T ParseItem(string value)
        {
            return _objectSerializer.Deserialize<T>(value);
        }
    }

And a property

[EditorDescriptor(EditorDescriptorType = typeof(CollectionEditorDescriptor<ListModel>))]
 public virtual IList<ListModel> XhtmlStringCollection { get; set; }

If I add a new item to the collection, and add a block to the text field, it gets saved as <div data-contentlink="31223" data-classid="36f4349b-8093-492b-b616-05d8964e4c89" class="epi-contentfragment" contenteditable="false">Test</div> in the list.

This stays fine until i publish the page. When I publish, all attributes but the class are removed from the div, making the block invalid. Is there a way to prevent this?

I would rewrite it to use a contentarea instead, but this is on an existing project, so I don't want to lose data.

#275310
Edited, Mar 02, 2022 13:01
Vote:
 

Hi,

I never tried this with IList but you can try extending valid elements attributes extended_valid_elements for XhtmlString property using TinyMCE configuration and add your custom data attributes as valid elements

.AddSetting("extended_valid_elements", // List of valid elements in the editor, this includes scritps (for js), iframe, and several others. What you send inside the [] are the allowed inner elements for that tag 
                        "script[language|type|src],iframe[src|alt|title|width|height|align|name|style],picture,source[srcset|media],a[id|href|target|onclick|class],span[*],div[*]")

https://www.cdisol.blog/2020/01/26/allow-javascript-and-iframes-in-tinymce-editor-for-episerver-cms-11/

#275318
Mar 02, 2022 15:01
Ted
Vote:
 

Do you get the same behavior if you add the following attributes to your XhtmlContent property?

public class ListModel
{
    [JsonProperty]
    [JsonConverter(typeof(XhtmlStringJsonConverter))]
    public XhtmlString XhtmlContent { get;set; }
}
#275401
Mar 02, 2022 19:26
Vote:
 

Thanks for the tips! The JsonConverter worked!

#275583
Mar 03, 2022 8:01
Ted - Mar 03, 2022 8:27
Glad to hear it!
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.