How to add custom HTML tags in the visual mode via keyboard only?

Question

Let say I want to insert different inline formatting texts. I can do that by opening the HTML mode, but is there a way to do it directly in the visual mode? For example, if I type span.a in a paragraph block then it will insert <span class="a"></span> in HTML, similarly how the formatting buttons like bold or italic do. Or perhaps at least a hotkey button to apply custom formatting, like Ctrl+B. Is that possible?

Or to take it to another level, is there a way to implement Emmet in WordPress?

Answer 1

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' );

Answer 2

For code mode only

The Custom HTML Block Extension plugin supports Emmet.

Also, you can use AutoHotkey to insert formatting around the selected text. Here is my example:

#SingleInstance force
`::suspend 
1::
    clipboard := ""  ; Start off empty to allow ClipWait to detect when the text has arrived.
    Send ^c
    ClipWait  ; Wait for the clipboard to contain text.
    clipboard := "<span class='has-extra-small-font-size'>"  . clipboard . "</span>" 
    Send ^v
return

2::
    clipboard := ""  ; Start off empty to allow ClipWait to detect when the text has arrived.
    Send ^c
    ClipWait  ; Wait for the clipboard to contain text.
    clipboard := "<span class='node'>"  . clipboard . "</span>" 
    Send ^v
return

Answer 3

Better solution

If you need to have a shortcut to accelerate the formatting, then perhaps it's a better idea to automatically wrapping them. Here is my current solution:

Step 1: Prepare all the strings you need to replace in a file. In my case it's a JSON file with this structure:

[
  {
    "n.name": "name1",
    "n.section": ["section1"
    ]
  },
  {
    "n.name": "name2",
    "n.section": ["section2a", "section2b"]
  },

Step 2: Putting this code into your custom plugin:

function removeBOM($data) {
    if (0 === strpos(bin2hex($data), 'efbbbf')) {
       return substr($data, 3);
    }
    return $data;
}

function replace_content( $text_content ) {
    $input = file_get_contents(__DIR__ . "/node.json");
    $inputclean = removeBOM($input);
    $data = json_decode($inputclean, true);
    $textlist = array();
    foreach($data as $item) {
        $text_content = str_ireplace( $item['n.name'], "<span class='beliefnode'>" . $item['n.name'] .'</span>', $text_content );
    }
    return $text_content;
}
add_filter( 'the_content', 'replace_content' );