it-swarm.com.ru

добавление пользовательского значка к кнопке tinyMCE

Я пытаюсь добавить значок Font-Awsome к кнопке, которую я добавил в tinyMCE таким образом:

 ed.addButton('youtube', {
     title: 'Add Video' ,
     icon: 'icon-youtube',
     onclick: function () {
     //do stuff here...
 }

использование изображения, подобного предложенному в документации, было неприемлемо, но по какой-то причине я не могу сделать эту работу. есть идеи?

13
Kepedizer

это решение на основе CSS, кажется, работает хорошо:

 i.mce-i-[FONT-AWESOME-CLASSNAME]:before {   // FONT-AWESOME-CLASSNAME e.g. "icon-youtube"
    content: "[FONT-AWESOME-CONTENT]";       // FONT-AWESOME-CONTENT e.g. "\f166"
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 1.5em;
    padding-right: 0.5em;
    position: absolute;
    top: 15%;
    left: 0;
 }

это основано на matt-royal ответ на этот стек обмена WordPress Thread

25
Kepedizer

Я знаю, что это старо, но я думал, что я добавлю свой ответ для всех, кто заинтересован. Я использую TinyMCE 4. Я добавил это в свой CSS

.mce-ico.mce-i-fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

editor.addButton('adjust', {
    tooltip: 'Adjust Layout',
    icon: 'fa fa-adjust',
    onclick: function () {
        dialogLayout(editor, url, settings);
    }
});

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

Надеюсь, это кому-нибудь поможет.

8
Robert E. McIntosh

Из того, что я понимаю, вы пытаетесь добавить кнопку с изображением в список иконок tinyMCE.

 tinymce.PluginManager.add("youtube", function (editor) {   
    editor.addButton('youtube', {
        tooltip: 'Add video',
        image: tinymce.baseURL + '/plugins/youtube/icons/youtube.gif',
        onclick: function() {

        }
    }); 
});

Создайте папку (я назвал «youtube») в этой папке, создайте другую папку (я назвал «icons», в которую вы положили свое изображение), затем создайте файл youtube.js в папке youtube.

8
SSouhaieb

Следующий CSS работает для TinyMCE 4 и FontAwesome 5:

.mce-ico.mce-i-fas {
    display: inline-block;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; }
1
Thuc Nguyen

Эта простая таблица стилей работала для меня:

i.mce-i-[FONT-AWESOME-CLASSNAME]:before {   // FONT-AWESOME-CLASSNAME e.g. "icon-youtube"
    content: [FONT-AWESOME-CONTENT];         // FONT-AWESOME-CONTENT e.g. "\f166"
    font-family: FontAwesome;
}

Он может быть использован для кнопки панели инструментов или пункта меню одинаково хорошо.

ed.addButton('youtube', {
     title: 'Add Video' ,
     icon: '[FONT-AWESOME-CLASSNAME]',
     onclick: function () { /* magic */ }
}

ed.addMenuItem('youtube', {
     text: 'Add Video' ,
     icon: '[FONT-AWESOME-CLASSNAME]',
     onclick: function () { /* magic */ },
     context: 'view'
}

Не используйте position: absolute, потому что расположение в меню будет испорчено.

1
naXa