Question

我正在使用TinyMCE 4.8.2。我正在尝试将自定义项目符号添加到编辑器中现有的“项目符号列表”下拉列表中。我已经做了一些搜索，发现的答案似乎适用于TinyMCE的旧版本。当我实现它们时，什么也没有发生。

我想在可用的项目符号中添加类似于对号，箭头，星星等的项目。

谢谢您的帮助。

Answer 1

我发现的唯一方法是覆盖“样式格式”按钮，以便在“ ul”标签上添加一个类，请参见tinymce doc： https://www.tiny.cloud/docs/configure/content-formatting/#formats 以下文章对我有很大帮助（对于wordpress，但有助于理解其逻辑） https://wordpress.stackexchange.com/questions/128931/tinymce-adding-css-to-format-dropdown/128950 并且由于过载，如果需要，有必要恢复旧样式。因此，我们可以根据需要添加任意多个类，然后在CSS中处理该类以自定义列表。

.custom-ul-class-caret li:before {
content:"";
font-family: FontAwesome;
display: inline;
margin-right: 10px;

}

我的wordpress代码

    function my_tiny_mce_before_init( $mceInit) {
    $style_formats = array(
        array(
            "Title" =>"Headers",
                "items" => array(
                    array(
                        "Title" =>"Header 1",
                        "format" =>"h1',
                        "icon" =>"bold
                    ),
                    array(
                        "Title" =>"Header 2",
                        "format" =>"h2',
                        "icon" =>"bold
                    ),
                    array(
                        "Title" =>"Header 3",
                        "format" =>"h3",
                        "icon" =>"bold
                    ),
                    array(
                        "Title" =>"Header 4",
                        "format" =>"h4',
                        "icon" =>"bold
                    ),
                    array(
                        "Title" =>"Header 5",
                        "format" =>"h5',
                        "icon" =>"bold
                    ),
                    array(
                        "Title" =>"Header 6",
                        "format" =>"h6',
                        "icon" =>"bold
                    )
                )
        ),
        array(
            "title" =>"Inline",
                "items" => array(
                    array(
                        "title" =>"Bold",
                        "format" =>"bold",
                        "icon" =>"bold
                    ),
                    array(
                        "title" =>"Italic",
                        "format" =>"italic",
                        "icon" =>"italic
                    ),
                    array(
                        "Title" =>"Underline",
                        "format" =>"h3",
                        "icon" =>"underline
                    ),
                    array(
                        "Title" =>"Strikethrough",
                        "format" =>"strikethrough",
                        "icon" =>"strikethrough
                    ),
                    array(
                        "title" =>"Superscript",
                        "format" =>"Superscript",
                        "icon" =>"Superscript
                    ),
                    array(
                        "title" =>"Subscript",
                        "format" => "Subscript",
                        "icon" =>"Subscript
                    ),
                    array(
                        "title" =>"Code",
                        "format" =>"code",
                        "icon" =>"code
                    )
                )
        ),
        array(
            "Title" =>"Blocks",
                "items" => array(
                    array(
                        "title" =>"Paragraph",
                        "format" =>"p',
                    ),
                    array(
                        "Title" =>"Blockquote",
                        "format" => "blockquote",
                    ),
                    array(
                        "title" =>"Div',
                        "format" =>"div",
                    ),
                    array(
                        "title" =>"Pre",
                        "format" =>"pre",
                    )
                )
        ),
        array(
            "title" => "Bulleted list",
                "items" => array(
                    array(
                        "title" =>"caret", // Title to show in dropdown
                        "selector" =>"ul', // Element to add class to
                        "classes" => "custom-ul-class-caret" // CSS class to add
                    ),
                )
        )
    );
    $mceInit['style_formats'] = json_encode( $style_formats);   
    return $mceInit;    
}
add_filter("tiny_mce_before_init','my_tiny_mce_before_init');

TinyMCE自定义项目符号列表

1 个答案: