How to use richText.insert to insert HTML ?

  • Hello, here’s what I tried, but it adds the HTML code as simple text, not as a HTML element:

    ( function( wp ) {
	var withSelect = wp.data.withSelect;
	var ifCondition = wp.compose.ifCondition;
	var myCustomButton = function( props ) {
		return wp.element.createElement(
			wp.blockEditor.RichTextToolbarButton, {
				icon: 'editor-code',
				title: 'saws',
				onClick: function() {
					props.onChange( wp.richText.insert(
						props.value,
						'<span class="test">text</span>'
					) );
				},
				isActive: props.isActive,
			}
		);
	}

	wp.richText.registerFormatType(
		'dammaj-editor/saws-output', {
			title: 'saws',
			tagName: '<span class="test">text</span>',
			className: null,
			edit: myCustomButton,
		}
	);
} )( window.wp );
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter pierrealfiransi

    (@pierrealfiransi)

    I had made a mistake in the quote, I edited it.

    Thread Starter pierrealfiransi

    (@pierrealfiransi)

    I tried this, but it still doesn’t work, because it adds “& lt;” instead of “<” in the tags that I want to insert:

    
( function( wp ) {
	var withSelect = wp.data.withSelect;
	var ifCondition = wp.compose.ifCondition;
	var compose = wp.compose.compose;
    var el = wp.richText.create({html: '<span class="testClass">test</span>'});
	var MyCustomButton= function( props ) {
		return wp.element.createElement(
			wp.blockEditor.RichTextToolbarButton, {
				icon: 'editor-code',
				title: 'test',
				onClick: function() {
					props.onChange( wp.richText.insert(
						props.value,
						wp.richText.toHTMLString({value: el}),
					) );
				},
				isActive: props.isActive,
			}
		);
	}

	wp.richText.registerFormatType(
		'test-plugin/test-output', {
			title: 'test',
			tagName: 'span',
			className: "testClass",
			edit: MyCustomButton,
		}
	);
} )( window.wp );
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to use richText.insert to insert HTML ?’ is closed to new replies.