Using jodit-react, how can I specify the specific allowTags for the cleanHTML plugin?

167 Views Asked by At

I'm using jodit-react, and have noticed that when toggling on 'source' view, it runs the cleanHTML plugin, which deletes things like empty <span> tags.

In the docs for the underlying Jodit library, it appears easy to set the specific tags that cleanHTML will allow: https://xdsoft.net/jodit/docs/modules/plugins_clean_html.html

I'm trying to figure out how I can do this in the react wrapper. Has anyone got any idea?

I tried disabling the cleanHtml plugin all together and it stopped deleting the empty elements, but I don't want to disable it if I don't have to.

This is my code:

const EditorConvertToHTML: React.FC<editorConvertToHTMLProps> = ({
  myRef,
  value,
  onHandleChange,
  fieldName,
  index,
 }) => {
  const toolbarButtons = [
    "bold",
    "ul",
    "source"
  ];

  const config: IJoditEditorProps["config"] = {
    readonly: false, 
    buttonsMD: toolbarButtons,
  };

  return useMemo(
    () => (
      <div>
        <JoditEditor
          ref={myRef}
          value={value || ""}
          config={config}
          onChange={(newContent) => {
            onHandleChange(fieldName)(newContent, index);
          }}
        />
      </div>
    ),
    []
  );
};

I tried this but it didn't work:

{
  name: "source",
  cleanHTML: {
    allowTags: { span: true },
  },
}
0

There are 0 best solutions below