最近、tinymce 4 から tinymce 5 に移行しましたが、ボタンのようなドロップダウン メニューを作成し、現在の選択に基づいてそのテキストを変更する方法がわかりません。
基本的には、デフォルトのフォントやタイトルボタンのようなものが欲しいです。
選択したテキストを<span lang='xx'
タグで囲むドロップダウン ボタンを作成する方法を次に示します。
addLanguageBtn()
{
let lngBtn = editor.ui.registry.addMenuButton('languageBtn', {
text: 'Language',
fetch: (callback) => {
let items: any = [
{text: 'French', value: 'fr', type: 'menuitem'},
{text: 'German', value: 'de', type: 'menuitem'},
{text: 'Spanish', value: 'es', type: 'menuitem'},
];
items.forEach(item => {
item.onAction = () => {
let currentNode = editor.selection.getNode();
if (currentNode.tagName.toLocaleLowerCase() !== 'body')
{
currentNode.setAttribute('lang', item.value);
}
else
{
let textToWrap = editor.selection.getContent();
let wrappedContent = `<span lang='${item.value}'>${textToWrap}</span>`;
editor.selection.setContent(wrappedContent);
}
}
});
callback(items);
},
tinymce のメインメソッドでは、カーソルがタグsetup
内の単語に置かれるたびに、そのボタンのテキストを選択した言語に変更したいと考えています。<span lang='xx'
setup(ed)
{
let lngButton = this.addLanguageBtn(ed);
ed.on('NodeChange', function (ev) {
if (!lngButton)//No button
{
return;
}
let lang = ev.element.getAttribute('lang');
lngButton.text = lang; // <==== This does not work, value is modified but UI is not updated
ノート
ここにコードペンの例があります
編集: tinymce のソース コードを調べたところ、Alloy コンポーネントを使用して独自のフォント ファミリとフォント ウェイト ボタンを作成していることがわかりました。私はただ「シンプル」なものを探しています。