How to make Editor to keep all of the custom tag attributes on insert?

1 Answer 304 Views
Editor Wrappers for React
Andrei
Top achievements
Rank 1
Iron
Iron
Iron
Andrei asked on 06 Jan 2023, 12:16 PM
Hello, i am using KendoReact Editor as a wysiwyg html editor, for some reason editor removes non-standart tag attributes, for example:



  

 

<div class="tomorrow"
           data-location-id="067285,067285,067285,067285,067285,067285"
           data-language="EN"
           data-unit-system="METRIC"
           data-skin="light"
           data-widget-type="aqi6"
           style="padding-bottom:22px;position:relative;"
        >
</div>

after insertion this tag becomes

<div style="padding-bottom:22px;position:relative;" class="tomorrow"></div>



is there a way to make that so editor keeps any tags on html elements on insert, because i can't predict user input i want to allow any tags on html elements(allowing specific tags won't work here), i know that this is not secure, but only selected users will have access so this is ok for me, could you please provide a code example where Editor keeps all of the custom tags on insert?

1 Answer, 1 is accepted

Sort by
0
Konstantin Dikov
Telerik team
answered on 10 Jan 2023, 08:21 AM

Hello Andrei,

Thank you for contacting us.

I have to say that the custom attributes are removed by the ProseMirror default scheme and in order to allow them you need to modify the scheme as shown in the following example:

You will notice that the scheme is customized so it can support the "dir" property. The same approach should be used for any other property that needs to be supported or you can try to modify the ProseMirror scheme in a way that will parse all attributes. Here is a link to the ProseMirror scheme documentation that you can use as a reference:

Hope this helps.

Regards,
Konstantin Dikov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Andrei
Top achievements
Rank 1
Iron
Iron
Iron
commented on 10 Jan 2023, 11:07 AM

As i already stated i can't predict user input so i can't modify schema as in the example, because set of the supported attributes is not defined, thats why i need to support any attribute. I have researched ProseMirror forums and documentation and my qualification is clearly not enough to dive that deep into Editor insides and learn a whole new framework to provide this one single feature, i am sure i am not the only one who need this kind of behaviour from kendoEditor, could you possible help me and provide implementation for the desired behaviour? ( if needed i can submit this request as a support ticket )
Konstantin Dikov
Telerik team
commented on 12 Jan 2023, 09:28 AM

Hi Andrei,

The customization of the scheme is something that is considered to be related with the ProseMirror and not the KendoReact Editor, even though it is being used by the component.

I have done extensive research on this matter and from what I understood, each attribute that will be persisted must be declared explicitly for each node type in the "attrs" object.

I will do more tests and reading, but once again, customizing the ProseMirror scheme is not within out scope.

Tags
Editor Wrappers for React
Asked by
Andrei
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Konstantin Dikov
Telerik team
Share this question
or