Hello, i am using KendoReact Editor as a wysiwyg html editor and when I insert script tag and push update
script tag is automatically removed, i tried to add script tag to editor's schema
but it had no effect, maybe i am doing something wrong? Please tell me how can i add support for script tag?
1 Answer, 1 is accepted
Hello, Andrei,
As per your assumption, the Editor applies certain rules to the HTML in order to achieve consistency but you can change that behavior by customizing the default schema based on your own requirements. For convenience, I have created a sample demonstrating a possible option to allow the `script` tags, you can test it here (refer the schema.ts file):
Please, give this example a try and let me know if I can assist you any further on this matter.
Regards,
Vessy
Progress Telerik
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.
Rank 1
Iron
Iron
Iron
Thank you Vessy, script tag works very well, could you help me with another issue related to 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;"
>
after insertion this tag becomes
<div style="padding-bottom:22px;position:relative;" class="tomorrow"></div>
is there a way to avoid this kind of behaviour and make so editor pass all the attributes as they are?
Hi, Andrei,
The allowed attributes also can be configured through the schema, for convenience, I have updated the provided sample to showcase how to allow the listed data- attributes for the <div>:
div: {
content: 'inline*',
group: 'block',
attrs: {
...commonAttributes(),
'data-language': { default: null },
'data-unit-system': { default: null },
'data-skin': { default: null },
'data-widget-type': { default: null },
},
parseDOM: [
{
tag: 'div',
getAttrs: getAttributes,
},
],
toDOM: (node) =>
hasAttrs(node.attrs, false)
? ['div', getAttrs(node.attrs, false), hole]
: ['div', hole],
},
Rank 1
Iron
Iron
Iron
Hi, Andrei,
The desired behavior can be achieved by defining a custom NodeView for the rendering of the elements where you want to allow all kind of attributes (e.g. for `div`) and override the div definition in the schema. Please, have in mind that allowing all attributes of an element could lead to many security issues, and we strongly do not recommend it.