0

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?

3 Answers 3

0

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' );
1
  • is it possible to have keyboard shortcut? Preferably expanding span.a to <span class="a"></span> on the spot?
    – Ooker
    Dec 11, 2021 at 7:14
0

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
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.