The question:
Using Foundation 5’s accordion, and the data-accordion html data attribute in:
<dl class="accordion" data-accordion>
gets removed when a user only edits a page with the Visual Editor.
Does anyone know of a way to keep this from happening?
I noticed this link that allows you to Register Additional HTML Attributes for TinyMCE and WP KSES, though I’m not sure where I’d place data-accordion
in that code.
The Solutions:
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
Method 1
Here is an example of How to Update kses and TinyMCE to allow select data-* attributes in WordPress. Reference
add_action( 'after_setup_theme', 'x_kses_allow_data_attributes_on_links' );
function x_kses_allow_data_attributes_on_links() {
global $allowedposttags;
$tags = array( 'a' );
$new_attributes = array(
'data-foo' => array(),
'data-bar' => array(),
);
foreach ( $tags as $tag ) {
if ( isset( $allowedposttags[ $tag ] ) && is_array( $allowedposttags[ $tag ] ) )
$allowedposttags[ $tag ] = array_merge( $allowedposttags[ $tag ], $new_attributes );
}
}
add_filter( 'tiny_mce_before_init', 'x_tinymce_allow_data_attributes_on_links' );
function x_tinymce_allow_data_attributes_on_links( $options ) {
if ( ! isset( $options['extended_valid_elements'] ) )
$options['extended_valid_elements'] = '';
$options['extended_valid_elements'] .= ',a[data-foo|data-bar|class|id|style|href]';
return $options;
}
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0