Пользовательский список пуль TinyMCE

Question

Я использую TinyMCE 4.8.2. Я пытаюсь добавить пользовательские Bullets в существующий выпадающий список Bullet List в редакторе. Я провел некоторый поиск, и ответы, которые я нашел, похоже, относятся к более старым версиям TinyMCE. Когда я их реализую, ничего не происходит.

Я хотел бы добавить к имеющимся пулям элементы, подобные галочкам, стрелкам, звездам и т. Д.

Спасибо за любую помощь.

Answer 1

Единственный способ, который я нашел, - переопределить кнопку «форматы стилей», чтобы добавить класс в теги «ul», см. Документ tinymce: 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');