samclarke / SCEditor

A lightweight HTML and BBCode WYSIWYG editor
http://www.sceditor.com/
Other
643 stars 186 forks source link

[Question] <figure><figcaption><blockquote> how to replace with bbcode? #942

Open Globulopolis opened 1 year ago

Globulopolis commented 1 year ago

Hi! As you can see in title the question is simple but I cannot implement it in the code. HTML I have:

<figure>
    <figcaption class="quote">Cite test:</figcaption>
    <blockquote class="text-muted"><div>extended quote<br></div></blockquote>
</figure>
<figure>
    <figcaption class="quote">Quote:</figcaption>
    <blockquote class="text-muted"><div>simple quote<br></div></blockquote>
</figure>

And JS:

sceditor.formats.bbcode.set('quote', {
    tags: {
        'figure': null,
        'figcaption': null,
        'blockquote': null
    },
    allowedChildren: ['figcaption', 'blockquote'],
    format: function (element, content) {
        // TODO Did not work as expected.
        if (element.tagName.toLowerCase() === 'blockquote') {
            return '[quote name=""]' + content + '[/quote]';
        }
    },
    html: function (token, attrs, content) {
        let name = Joomla.Text._('COMMENT_TEXT_QUOTE');

        if (Object.keys(attrs).length > 0) {
            name = (Joomla.Text._('COMMENT_TEXT_QUOTE_EXTENDED')).replace('%s', attrs.name);
        }

        return '<figure>' +
            '<figcaption class="quote">' + name + '</figcaption>' +
            '<blockquote class="text-muted"><div>' + content + '</div></blockquote>' +
        '</figure>';
    }
});
sceditor.command.set('quote', {
    exec: function () {
        let before = '<figure><figcaption class="quote">',
            middle = '</figcaption><blockquote class="text-muted">',
            end = '</blockquote></figure>';

        if (this.getRangeHelper().selectedHtml() === '') {
            before = before + Joomla.Text._('COMMENT_TEXT_QUOTE') + middle;
            end = '<br />' + end;
        } else {
            before = before + Joomla.Text._('COMMENT_TEXT_QUOTE') + middle + this.getRangeHelper().selectedHtml() + end;
            end = null;
        }

        this.wysiwygEditorInsertHtml(before, end);
    }
});

In WYSIWYG mode HTML is good. But when I switch to Source mode I see undefined instead of [quote] tags. What's wrong?