wake-up-neo.net

hinzufügen eines vermeintlichen Symbols zu einer tinyMCE-Schaltfläche

Ich versuche, einem Button, den ich tinyMCE hinzugefügt habe, ein Font-Awsome-Symbol hinzuzufügen:

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

es war nicht akzeptabel, ein Bild wie in den Dokumenten vorgeschlagen zu verwenden, aber aus irgendeinem Grund kann ich das nicht machen. irgendwelche Ideen?

13
Kepedizer

diese CSS-basierte Lösung scheint gut zu funktionieren:

 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;
 }

es basiert auf matt-royal s Antwort auf diesem Stack-Austausch-WordPress-Thread

25
Kepedizer

Ich weiß, das ist alt, aber ich dachte, ich würde meine Antwort für alle Interessierten einbringen. Ich verwende TinyMCE 4. Ich habe dies zu meinem CSS hinzugefügt

.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;
}

wenn ich dann das Symbol für die Tasten setze, verwende ich einfach.

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

im Grunde können Sie damit beliebige Symbole für Schriftarten verwenden, ohne dass für jedes Symbol ein bestimmtes Klassenlayout erforderlich ist. 

Hoffe das hilft jemandem.

8

Soweit ich weiß, versuchen Sie, eine Schaltfläche mit einem Bild in die Liste der Symbole tinyMCE hinzuzufügen.

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

        }
    }); 
});

Erstellen Sie in diesem Ordner einen Ordner (ich habe "youtube" genannt), erstellen Sie einen anderen Ordner ("Icons", in den Sie Ihr Bild einfügen), und erstellen Sie dann Ihre Datei youtube.js im Ordner youtube.

8
SSouhaieb

Das folgende CSS funktioniert für TinyMCE 4 und 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

Dieses einfache Stylesheet hat für mich funktioniert:

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;
}

Es kann genauso gut für eine Symbolleistenschaltfläche oder einen Menüpunkt verwendet werden.

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'
}

Verwenden Sie nicht position: absolute, da das Layout im Menü beeinträchtigt wird.

1
naXa