tinymce custom bullet и списки номеров

Question

Мне интересно, можно ли создавать пользовательские пули и списки номеров?

Я добавил вставку для плагинов и попробовал примеры, которые другие опробовали here и here. Первый, похоже, позволяет внести некоторые изменения. Тем не менее, я пытаюсь заменить образ стиля списка для пулевых или числовых списков с помощью специального изображения, но опция «styles» «listStyleImage» не работает, даже если она отображается в коде приложения.

Я также попытался добавить класс css, чтобы увидеть, будет ли это работать, но инструкция «classes» тоже не работает.

Я установил секцию инициализации вверх, как в примерах, и выполнил параметры в документации formats, но классы и настройки «listStyleImage» для стилей не работают.

Я уверен, что добавление класса в html-код будет работать вручную. Я бы просто хотел, чтобы он был настроен как пользовательский список, чтобы его не нужно было делать вручную.

Возможно ли это?

Есть ли другой способ достичь этого?

UPDATE: Чтобы обойти это сейчас, мне нужно вручную добавить класс в html через редактор. Это работает, но было бы неплохо, если бы был способ сделать это, добавив пользовательские списки.

Answer 1

Единственный способ, который я нашел до сих пор, чтобы cahnge пули на изображении с помощью

style_formats.

После добавления списка просто отметьте «И» и примените формат.

код TinyMCE:

toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | l ink image | print preview media fullpage | forecolor backcolor emoticons", 
image_advtab: true, 

    style_formats: [ 
    {title: 'checkMark', selector: 'li', 
    styles: { 
     'list-style-image' : 'url("../images/check-mark.png")' //your desired image 
    } 
    }  

],

Answer 2

наткнулся на этот вопрос, делая исследование, по тому же вопросу, после некоторых отладки нашел способ сделать это

1. в должен быть установлен и активирован плагин advlist.
2. в рамках инициализации расширенный стиль списка должен быть настроен, например:

tinyMCE.init({... 
     advlist_bullet_styles: [{ 
     title: 'image bullets', 
     styles: { 
      listStyleImage: "url('url/to/image.png')" 
     } 
     }, { 
     title: 'Default', 
     styles: { 
      listStyleType: '', 
      listStyleImage: "" 
     } 
     }, { 
     title: 'Circle', 
     styles: { 
      listStyleType: 'circle', 
      listStyleImage: "" 
     } 
     }, { 
     title: 'Disc', 
     styles: { 
      listStyleType: 'disc', 
      listStyleImage: "" 
     } 
     }, { 
     title: 'Square', 
     styles: { 
      listStyleType: 'square', 
      listStyleImage: "" 
     } 
     }], 
     ...}); 

это дает вам стили маркеров по умолчанию, а также стиль пользовательского изображения. массив стилей задает свойства элемента UL. , и вы устанавливаете шаблоны для списков номеров, используя свойство advlist_number_styles.

Answer 3

Вот хороший пример списка ol с многоуровневой нумерацией.

EXAMPLE SCSS компилирует:

ol { 
    list-style: none; 
    position: relative; 
    padding-left: 15; 
    margin: 0; 
} 
ol { 
    counter-reset: level0 0; 
} 
ol li::before { 
    content: counter(level0,decimal) ""; 
    counter-increment: level0; 
    position: absolute; 
    right: 100%; 
    margin-right: 15px; 
    text-align: right; 
    font-weight: bold; 
    font-size: 0.8em; 
} 
ol li:empty + { 
    counter-reset: level0 0; 
} 
ol li:empty::before { 
    display: none; 
} 
ol ol { 
    counter-reset: level1 ; 
} 
ol ol li::before { 
    content: counter(level0,decimal) "." counter(level1,decimal) ""; 
    counter-increment: level1; 
    position: absolute; 
    right: 100%; 
    margin-right: 15px; 
    text-align: right; 
    font-weight: bold; 
    font-size: 0.8em; 
} 
ol ol li:empty + ol { 
    counter-reset: level1 ; 
} 
ol ol li:empty::before { 
    display: none; 
} 
ol ol ol { 
    counter-reset: level2 ; 
} 
ol ol ol li::before { 
    content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) ""; 
    counter-increment: level2; 
    position: absolute; 
    right: 100%; 
    margin-right: 15px; 
    text-align: right; 
    font-weight: bold; 
    font-size: 0.8em; 
} 
ol ol ol li:empty + ol ol { 
    counter-reset: level2 ; 
} 
ol ol ol li:empty::before { 
    display: none; 
} 
ol ol ol ol { 
    counter-reset: level3 ; 
} 
ol ol ol ol li::before { 
    content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) ""; 
    counter-increment: level3; 
    position: absolute; 
    right: 100%; 
    margin-right: 15px; 
    text-align: right; 
    font-weight: bold; 
    font-size: 0.8em; 
} 
ol ol ol ol li:empty + ol ol ol { 
    counter-reset: level3 ; 
} 
ol ol ol ol li:empty::before { 
    display: none; 
} 
ol ol ol ol ol { 
    counter-reset: level4 ; 
} 
ol ol ol ol ol li::before { 
    content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) ""; 
    counter-increment: level4; 
    position: absolute; 
    right: 100%; 
    margin-right: 15px; 
    text-align: right; 
    font-weight: bold; 
    font-size: 0.8em; 
} 
ol ol ol ol ol li:empty + ol ol ol ol { 
    counter-reset: level4 ; 
} 
ol ol ol ol ol li:empty::before { 
    display: none; 
} 
ol ol ol ol ol ol { 
    counter-reset: level5 ; 
} 
ol ol ol ol ol ol li::before { 
    content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "." counter(level5,decimal) ""; 
    counter-increment: level5; 
    position: absolute; 
    right: 100%; 
    margin-right: 15px; 
    text-align: right; 
    font-weight: bold; 
    font-size: 0.8em; 
} 
ol ol ol ol ol ol li:empty + ol ol ol ol ol { 
    counter-reset: level5 ; 
} 
ol ol ol ol ol ol li:empty::before { 
    display: none; 
} 
ol ol ol ol ol ol ol { 
    counter-reset: level6 ; 
} 
ol ol ol ol ol ol ol li::before { 
    content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "." counter(level5,decimal) "." counter(level6,decimal) ""; 
    counter-increment: level6; 
    position: absolute; 
    right: 100%; 
    margin-right: 15px; 
    text-align: right; 
    font-weight: bold; 
    font-size: 0.8em; 
} 
ol ol ol ol ol ol ol li:empty + ol ol ol ol ol ol { 
    counter-reset: level6 ; 
} 
ol ol ol ol ol ol ol li:empty::before { 
    display: none; 
} 
ol ol ol ol ol ol ol ol { 
    counter-reset: level7 ; 
} 
ol ol ol ol ol ol ol ol li::before { 
    content: counter(level0,decimal) "." counter(level1,decimal) "." counter(level2,decimal) "." counter(level3,decimal) "." counter(level4,decimal) "." counter(level5,decimal) "." counter(level6,decimal) "." counter(level7,decimal) ""; 
    counter-increment: level7; 
    position: absolute; 
    right: 100%; 
    margin-right: 15px; 
    text-align: right; 
    font-weight: bold; 
    font-size: 0.8em; 
} 
ol ol ol ol ol ol ol ol li:empty + ol ol ol ol ol ol ol { 
    counter-reset: level7 ; 
} 
ol ol ol ol ol ol ol ol li:empty::before { 
    display: none; 
} 

li { 
    margin-top: 0.5em; 
    margin-bottom: 0.5em; 
    position: relative; 
}