if you are using classic TinyMCE editor then perhaps you can modify it add custom styles.
Following code may help you create visual buttons for adding inline styles.
// Add Formats Dropdown Menu To MCE
if ( ! function_exists( 'mk_style_select' ) ) {
function mk_style_select( $buttons ) {
array_push( $buttons, 'styleselect' );
return $buttons;
}
}
add_filter( 'mce_buttons', 'mk_style_select' );
// Add new styles to the TinyMCE "formats" menu dropdown
if ( ! function_exists( 'mk_cusotm_styles_dropdown' ) ) {
function mk_cusotm_styles_dropdown( $settings ) {
// Create array of new styles
$new_styles = array(
array(
'title' => __( 'Custom Styles', 'pixel-text' ),
'items' => array(
array(
'title' => __('Light','pixel_framework'),
'inline' => 'span',
'classes' => 'light',
),
array(
'title' => __('Regular','pixel_framework'),
'inline' => 'span',
'classes' => 'regular',
),
array(
'title' => __('Medium','pixel_framework'),
'inline' => 'span',
'classes' => 'medium',
),
array(
'title' => __('Bold','pixel_framework'),
'inline' => 'span',
'classes' => 'bold',
),
),
),
);
// Merge old & new styles
$settings['style_formats_merge'] = true;
// Add new styles
$settings['style_formats'] = json_encode( $new_styles );
// Return New Settings
return $settings;
}
}
add_filter( 'tiny_mce_before_init', 'mk_cusotm_styles_dropdown' );