web-dev-qa-db-ja.com

tinyMCEボタンにカスタムアイコンを追加する

私はtinyMCEに追加したボタンにFont-Awsomeアイコンを追加しようとしています：

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

ドキュメントが提案するような画像を使用することは受け入れられませんでしたが、何らかの理由でこの作業を行うことができません。何か案は？

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

このスタック交換wordpress thread の matt-royal の回答に基づいています

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

基本的に、これにより、各アイコンに特定のクラスレイアウトを設定しなくても、フォントの素晴らしいアイコンを使用できます。

これが誰かを助けることを願っています。

11
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」という名前を付けます）を作成し、別のフォルダー（画像を配置する「アイコン」という名前を付けます）を作成し、youtubeフォルダーの下にファイルyoutube.jsを作成します。

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

Tinymce 5の場合、このサンプルを使用できます。

editor.ui.registry.addButton('customButton1', {
    text: '<span class="fa fa-youtube"></span>',
    //icon: '<span class="icon-youtube"></span>',
    onAction: () => alert('Button clicked!')
});
0
Bahman Shafiei