Appending HTML content using custom plugin

Hello. I have successfully created a custom plugin, everything works fine if I’m only typing text. I however have a scenario where I declare a title variable, then concatenate the contents of the input field in the custom editor.

This appends even HTML tags into the editor, not the clean, formatted text. Here is my onClick property of the plugin:

onClick: function () {
        this.history.push(true);

        const initialEditorContent = this.getContents();
    
        const title = initialEditorContent.search('Resolutions') === -1 ? '<h4><u>Resolutions</u></h4>' : '';

        if(this.context.custom.textElement.value.length > 0) {
            // Get Input value
            const value = this.util.createTextNode(title.concat('<br />', this.context.custom.textElement.value));
            
            // insert
            this.insertNode(value);

            // set range
            this.setRange(value, value.length, value, value.length);

           // clear content
            this.context.custom.textElement.value = null;
        }

        // submenu off
        this.submenuOff();

        // focus
        this.focus();
    } 

Here is the text I’m typing:

When I click Done, here is what is added to the editor:

@JiHong88 , how do I insert that text, well edited without the HTML tags?

[JiHong88]

Hi sorry for the late reply. The util.createTextNode method only creates text nodes. You must create a tag with the util.createElement method.

const title = initialEditorContent.search('Resolutions') === -1 ? '<h4><u>Resolutions</u></h4>' : '';

if(this.context.custom.textElement.value.length > 0) {
	// Get Input value
	let value = title;
	const lines = this.context.custom.textElement.value.split('\n');
	for (let i = 0, len = lines.length; i < len; i++) {
		value += '<p>' + lines[i] + '</p>';
	}

	// rendering
	const template = this.util.createElement('DIV');
	template.innerHTML = value;
	
	// insert
	const children = template.children;
	let after, child;
	while (children[0]) {
		child = children[0];
		this.insertNode(child, after);
		after = child;
	}

	// set range **(It is not necessary this code in the next version)**
	this.setRange(after, 1, after, 1);
	
	// clear content
	this.context.custom.textElement.value = null;
}

In the current version, lines may overlap, but It will be fine in the next version.

[ghilaslinz]

Hi @aderaHenry, Could you please share us your code about list hierarchy.

1.Where it does come
   1.1
        1.1.1
   1.2
2

Best regardss