GetmeUK / ContentTools

A JS library for building WYSIWYG editors for HTML content.
http://getcontenttools.com
MIT License
3.97k stars 399 forks source link

Unwrapping text from an element with an attribute #532

Open ianhatton opened 5 years ago

ianhatton commented 5 years ago

Hi there,

I have the following HTML inside of the editor:

<p><b data-guid="123">This text</b> is bold.</p>

My problem is, if I select the contents of the <b> tag and try to un-bold it, the tag is never removed and the HTML is unchanged.

Expected result:

<p>This text is bold.</p>

Actual result:

<p><b data-guid="123">This text</b> is bold.</p>

If I manually remove the data-guid attribute on the <b> tag before loading the HTML into the editor, un-bolding works as expected. Is there any way of forcing ContentTools to unwrap some text even if the tag we're unwrapping it from has an attribute on it?

Many thanks in advance!

anthonyjb commented 5 years ago

Hi @ianhatton,

So there is, the underlying HTMLString.String library's unformat method is used to remove the tag data from a selection of HTML. If you look here you can see its use in the bold tool.

Because in this instance we pass a complete tag instance to the unformat method it will only remove tabs that match exactly, e.g <b> if instead of sending a tag you send a string 'b' this will match any bold tag no matter it's attributes.

To changes this behaviour you'd need to override the apply method of the ContentTools.Tools.Bold class but you can do with simple assignment:

ContentTools.Tools.Bold.apply = ...my new function...