data-ipsTooltip stripped from ckeditor button

[Meddysong]

I've bitten the bullet and tried my hand at creating a (sort of) plugin, ie adding a button to my editor. What I wanted to achieve was something like this, where a user could add an explanation about a word if it were difficult. (The site is for language learners so articles are supposed to be in easy language.)

Here's the code from my button:

<a href='#' title='{option}' data-ipsTooltip>{content}</a>

But what I'm getting is this:

and the reason is because my data-ipsTooltip isn't present:

If I change the code in my browser, then everything is fine:

So the problem centres on data-ipsTooltip being stripped. Why is that? And how can I work around it?

[Meddysong]

It's not just my data-ipsToolbar. I've just tried to add a CSS class and that got stripped too. Why is that? More importantly, how can I work around it?

[Daniel F]

The editor is stripping everything what's not whitelisted because of security reasons.

You can whitelist the css and js stuff in your ACP => Customization => Editor Settings

[Meddysong]

Thank you, Daniel. I've got CSS working but am not having any luck with JS. I tried entering "data-ipsTooltip" in the JS field, since that seemed the likeliest thing. Do I need to enter it differently?

[princeton]

you may need to look into ckeditor config.allowedContent (just do a search on the Web for it)

basically, you will have to edit your ckeditor config file

[bfarber]

3 hours ago, Meddysong said:

Thank you, Daniel. I've got CSS working but am not having any luck with JS. I tried entering "data-ipsTooltip" in the JS field, since that seemed the likeliest thing. Do I need to enter it differently?

The setting lets you specify additional allowed data controllers (e.g. values that can be used in data-controller).

You will need to create a plugin on \IPS\Text\Parser against the _htmlPurifierModifyHtmlDefinition() method to allow any new attributes. You'll probably be looking at something like

	/**
	 * Customize HTML Purifier HTML Definition
	 *
	 * @param	HTMLPurifier_HTMLDefinition	$def	The definition
	 * @return	void
	 */
	protected function _htmlPurifierModifyHtmlDefinition( \HTMLPurifier_HTMLDefinition $def )
	{
		parent::_htmlPurifierModifyHtmlDefinition( $def );

		/* Allow the data-ipstooltip attribute on 'a' tags */
		$def->addAttribute( 'a', 'data-ipstooltip', 'Bool' );
	}

 

[Meddysong]

2 minutes ago, bfarber said:

You'll probably be looking at something like

I think I'll probably need to have somebody else looking at that! My first attempt at a "plugin" (ie creating a simple button) seems to have morphed into actually needing a plugin. 

Thank you for the push into the right direction 🙂