yabwe / medium-editor

Medium.com WYSIWYG editor clone. Uses contenteditable API to implement a rich text solution.
https://yabwe.github.io/medium-editor/
Other
16.05k stars 1.85k forks source link

HTML class attribute is stripped with custom button #1452

Open chrisburton opened 6 years ago

chrisburton commented 6 years ago

The way my custom button works is:

  1. Highlight text
  2. Click custom button in toolbar
  3. prompt modal appears
  4. 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>
Vingtoft commented 3 years ago

Did you resolve this issue? I have the exact same problem!

chrisburton commented 3 years ago

@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!