如何在视觉模式下仅通过键盘添加自定义的HTML标签？

时间：2021-12-08 作者：Ooker

假设我想插入不同的内联格式文本。我可以通过打开HTML模式来实现这一点，但是有没有办法直接在视觉模式下实现呢？例如，如果我键入span.a 在段落块中插入<span class="a"></span> 在HTML中，类似于粗体或斜体等格式按钮的工作方式。或者至少是一个热键按钮来应用自定义格式，如Ctrl+B. 这可能吗？

或者将其提升到另一个层次，是否有办法实施Emmet 在WordPress中？

3 个回复

最合适的回答,由SO网友:Ooker 整理而成

更好的解决方案

如果您需要一个快捷方式来加速格式化，那么最好是自动包装它们。以下是我当前的解决方案：

Step 1: 在文件中准备需要替换的所有字符串。在我的例子中，它是一个具有以下结构的JSON文件：

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

Step 2: 将此代码放入自定义插件：

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

SO网友:MMK

如果您使用的是经典的TinyMCE编辑器，那么您可能可以修改它并添加自定义样式。

以下代码可以帮助您创建用于添加内联样式的可视按钮。

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

SO网友:Ooker

仅适用于代码模式Custom HTML Block Extension 插件支持Emmet。

此外，您可以使用AutoHotkey 在选定文本周围插入格式。以下是我的示例：

#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

小码农CODE

如何在视觉模式下仅通过键盘添加自定义的HTML标签？

更好的解决方案

相关推荐

ACF loop and php formatting