Skip to content

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

Open
@Globulopolis

Description

@Globulopolis

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?

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions