如何在tinyMCE中爲WP添加行高選擇的下拉菜單3.9

我正在尋找一些代碼，它可以將下拉列表添加到WordPress後端的所見即所得字段中，通過它我可以選擇內聯行高爲選定的文本。我發現tinyMCE文檔非常混亂。此外，它主要是針對TM 3，但WP 3.9使用了第四個版本......如何在tinyMCE中爲WP添加行高選擇的下拉菜單3.9

我在TinyMCE插件看起來是這樣的：

tinymce.PluginManager.add('ad_lineheight', function(editor, url) { 

     … 

    editor.addButton('ad_lineheight', { 
     type: 'splitbutton', 
     text: 'line-height', 
     icon: false, 
     menu: menuval 
    }); 
});

你將如何整合的功能，增加了內聯樣式的選擇的輸入，像這樣<span style="line-height: 120%; display: inline-block;">selected text</span>？

編輯：我已經設法將下拉列表添加到編輯器，它顯示了我以編程方式定義的行高度，如80％，90％，100％等。

EDIT2：有了這個代碼，我能夠改變的line-height：

editor.addCommand('lineHeight', function(com, value) { 
    var selected = tinyMCE.activeEditor.selection.getContent(); 
    var content  = '<span style="line-height: '+value+';">' + (selected != '' ? selected : '') + '</span>'; 
    editor.execCommand('mceInsertContent', false, content); 
}); 

editor.addButton('lineheightselect', function() { 
    … 
    … 
    return { 
     type: 'listbox', 
     text: 'line-height', 
     tooltip: 'line-height', 
     values: items, 
     fixedWidth: true, 
     onclick: function(e) { 
      if (e.control.settings.value) { 
       editor.execCommand('lineHeight', false, e.control.settings.value); 
      } 
     } 
    }; 
});

但因爲它忽略內聯樣式，已經有導致像這樣的代碼是不是很實用：

<span class="h3" style="font-size: 90%;"><span style="line-height: 160%;">AND</span></span>

來源

2014-05-22 alexej_d

您需要爲TinyMCE編輯器添加自定義按鈕，還需要在某些CSS樣式表中創建樣式。也許一些WP功能可能是需要的。我不認爲你需要在JS中添加任何東西 - 已經有可能在TinyMCE中添加自定義樣式按鈕，你可以使用PHP來實現。

http://codex.wordpress.org/TinyMCE_Custom_Buttons http://codex.wordpress.org/TinyMCE_Custom_Styles

來源

2014-05-23 10:00:43 mrarm

感謝您就可以使用。看我的編輯。我已經有一個下拉功能。如果我需要一個簡單的按鈕，你發佈的內容只會有所幫助。 –

這是一個老問題，但我只是在有人的情況下仍然需要在這裏加入了答案。的getNode()代替getContent()

你命令的代碼將

editor.addCommand('lineHeight', function(com, value) { 
    var node = tinyMCE.activeEditor.selection.getNode(); 
    $(node).css('line-height', value); 
});

來源

2014-10-10 07:00:35

如何在tinyMCE中爲WP添加行高選擇的下拉菜單3.9

回答

相關問題