Tinymce：將自定義HTML添加到工具欄

Question

我想要使用字體系列選擇器來擴展tinymce工具欄，該選擇器顯示使用該字體系列樣式的字體系列名稱。爲此，我需要將每個字體名稱標記用類或內聯CSS包裝。我搜索了tinymce API文檔，並努力尋找在菜單項中添加自定義HTML的方法。

我得到的最接近的是一個無風格的按鈕，它用自定義HTML選擇器打開一個面板，但它並不理想。我真的很想直接添加一個選擇到字體系列樣式的工具欄。

Answer 1

這可能會幫助你。它不使用工具欄，而是使用自定義menuitems添加額外的menubar項目。

HTML

<form> 
<textarea></textarea> 
</form> 

的JavaScript

它通過添加的菜單項的菜單。然後，我們可以將classes選項提供給菜單項。這使我們可以通過css類選擇器分別定位每個菜單項。例如。如果我們提供classes: "monospace"。 TinyMCE將其轉換爲.mce-monospace作爲類選擇器。但是，除非您選擇更大的css優先級，否則tinymces css規則將被覆蓋。

tinymce.init({ 
    selector: "textarea", 
    menu: { 
    mynewmenu: { 
     title: 'Select Font Family', 
     items: 'arial | monospace | timesnew' 
    } 
    }, 

    menubar: 'mynewmenu', 

    setup: function(editor) { 
    editor.addMenuItem('arial', { 
     text: 'Arial', 
     classes: "arial", 
     context: 'mynewmenu', 
     onclick: function() { 
     alert('yey!'); 
     } 
    }); 

    editor.addMenuItem('monospace', { 
     text: 'Monospace',    
     classes: "monospace", 
     context: 'mynewmenu', 
     onclick: function() { 
     alert('yey!'); 
     } 
    }); 
    editor.addMenuItem('timesnew', { 
     text: 'Times New Roman',   
     classes: "timesnew", 
     context: 'mynewmenu', 
     onclick: function() { 
     alert('yey!'); 
     } 
    }); 
    } 
}); 

CSS

這是怎麼弄到的風格，通過CSS覆蓋。

.mce-menu-item.mce-monospace > span { 
    font-family: monospace; 
    color: olive; 
} 
.mce-menu-item.mce-arial > span{ 
    font-family: Arial; 
    color: red; 
} 

.mce-menu-item.mce-timesnew > span{ 
    font-family: Times New Roman; 
    color: green; 
} 

注意，如果你只是使用.mce-monospace > span的優先值不夠大，而與.mce-menu-item.mce-monospace > span有一個更大的優先值和覆蓋tinymces CSS。

看一看這個例子Demo