medium-editor
medium-editor copied to clipboard
HTML class attribute is stripped with custom button
The way my custom button works is:
- Highlight text
- Click custom button in toolbar
- prompt modal appears
- Enter classname (e.g. typing foo into prompt should result in
<code class="foo">...</code>
However, the entire class attribute is stripped and I'm not sure why. cleanPastedHtml
is set to false.
Code
var CodeButton = MediumEditor.extensions.button.extend({
// Should match what you add to the Statamic object below, and the button name.
name: 'codeButton',
tagNames: ['code'],
contentDefault: '<span class="icon icon-code"></span>',
aria: 'Code',
handleClick: function () {
const myClass = this.getMyClass();
if (!myClass) return;
const selection = this.base.options.contentWindow.getSelection().toString().trim();
const html = `<code class="${myClass}">${selection}</code>`;
this.base.pasteHTML(html);
this.base.checkContentChanged();
},
getMyClass: function () {
// Get the classname from a modal, etc.
return prompt('Code type (php, file, js, terminal)?');
}
});
// Add it to the Statamic object.
Statamic.MediumEditorExtensions.codeButton = CodeButton;
Result:
<code>Text I selected</code>
Desired Result:
<code class="foo">Text I selected</code>
Did you resolve this issue? I have the exact same problem!
@Vingtoft This medium editor was part of a CMS I was using at the time. The CMS authors ended up going with a better alternative for their WYSIWYG editor. I was unable to solve the problem. Sorry!